JavaScript輸入分鐘、秒倒計時技巧總結（附代碼）

更新時間：2017年08月17日 15:16:35 作者：小倔驢

這篇文章主要介紹了JavaScript輸入分鐘、秒倒計時的代碼實現(xiàn)，通過css和js代碼展示了邏輯過程，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。

代碼如下：

<div class="container-fluid"> 
 <div class="main-content-inner"> 
 <div class="page-content">
  <div class="page-header"> 
  <form class="form-inline" id="searchform"> 
  <div class="form-group" style="margin-left: 10px;">
   <label>分</label> 
  <input type="text" class="form-control" name="Minute" id="Minute">
   </div> 
  <div class="form-group" style="margin-left: 10px;"> 
  <label>秒</label> 
  <input type="text" class="form-control" name="Second" id="Second">
   </div>
  <button type="button" class="btn btn-purple btn-sm" onclick="ok()"> 開始 </button> 
  </form>
  </div>
  <div class="row" style="height:500px;line-height:500px;vertical-align:middle;font-size:200px;color:red;text-align:center;margin-top:100px"> <p id="listview"></p> 
  </div> 
 </div>
  </div> 
 </div>

 <script>
  var t;
  var Minute;
  var Second; 
  var d;
  function ok() {
   if ($("#Minute").val() == "0" || $("#Minute").val() == "") {
   Minute = 0;
   } else {
   Minute = $("#Minute").val();
   }
   if ($("#Second").val() == "0" || $("#Second").val() == "") {
   Second = 0;
   } else {
   Second = $("#Second").val();
   }
  var min = "";
  if (Minute < 10) {
   min = "0" + Minute;
  } else {
   min = Minute + "";
  }
  var sec = "";
  if (Second < 10) {
   sec = "0" + Second;
  } else {
   sec = Second + "";
  }
  $("#listview").text(min + ":" + sec);
  $(".page-header").hide();
  $("#listview").show();
  setTimeout(function () {
   begin()
  }, 1000);  
  }
  function begin() {  
  if (Second != 0) {
   Second--;
   min = "";
   if (Minute < 10) {
   min = "0" + Minute;
   } else {
   min = Minute + "";
   }
   sec = "";
   if (Second < 10) {
   sec = "0" + Second;
   } else {
   sec = Second + "";
   }
   $("#listview").text(min + ":" + sec);
  } else {
   if (Minute > 0) {
   Minute--;
   Second = 59;
   min = "";
   if (Minute < 10) {
    min = "0" + Minute;
   } else {
    min = Minute + "";
   }
   sec = "";
   if (Second < 10) {
    sec = "0" + Second;
   } else {
    sec = Second + "";
   }
   $("#listview").text(min + ":" + sec);
   } else {
   clearTimeout(t);
   }
  }
  t = setTimeout(function () {
   begin()
  }, 1000)
  }
 </script>

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助~如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持!

您可能感興趣的文章:

js
倒計時

Javascript中匿名函數(shù)的調(diào)用與寫法實例詳解(多種)
js中定義函數(shù)的方式有很多種，函數(shù)直接量就是其中一種，下面通過本文給大家介紹匿名函數(shù)是如何調(diào)用的及匿名函數(shù)的n中寫法，對js匿名函數(shù)調(diào)用，js匿名函數(shù)寫法相關知識感興趣的朋友一起學習吧
2016-01-01
BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)
這篇文章主要介紹了BootStrap selectpicker后臺動態(tài)綁定數(shù)據(jù)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
JS實現(xiàn)數(shù)組去重的常用方法
在JavaScript開發(fā)中,數(shù)組操作是不可或缺的一部分,數(shù)組去重作為數(shù)據(jù)處理的一個常見需求,旨在從一個可能包含重復元素的數(shù)組中移除重復項,只保留唯一值,本文將詳細介紹幾種常見的數(shù)組去重方法,并結合實際應用場景進行探討,需要的朋友可以參考下
2024-12-12
微信小程序?qū)崿F(xiàn)美食展示與收藏功能
這篇文章主要介紹了如何在微信小程序中實現(xiàn)美食展示與收藏的功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手嘗試一下
2022-03-03
js原型鏈原理看圖說明
任何一個對象都有一個prototype的屬性，在js中可以把它記為：__proto__
2012-07-07
自定義百度分享的分享按鈕
這篇文章主要介紹了自定義百度分享的分享按鈕的相關資料,需要的朋友可以參考下
2015-03-03
詳解JavaScript兩個實用的圖片懶加載優(yōu)化方法
本文主要介紹了JavaScript兩個實用的圖片懶加載優(yōu)化方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
JS實現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
這篇文章主要介紹了JS實現(xiàn)放大、縮小及拖拽圖片的方法,可兼容IE及火狐等瀏覽器,通過javascript自定義函數(shù)實現(xiàn)針對圖片的放大、縮小及拖拽等功能,涉及javascript動態(tài)操作頁面元素的相關技巧,需要的朋友可以參考下
2016-08-08
JsRender實用入門教程
這篇文章主要介紹了JsRender實用入門實例,包含了tag else使用、循環(huán)嵌套訪問父級數(shù)據(jù)等知識點,并提供了完整的實例下載,非常具有實用價值,需要的朋友可以參考下
2014-10-10
基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件的問題及解決
這篇文章主要介紹了基于element?UI?input組件自行封裝“數(shù)字區(qū)間”輸入框組件,實現(xiàn)代碼可以分為兩塊一塊為組件的封裝代碼，一塊為文中實現(xiàn)效果的演示代碼，對element?UI數(shù)字區(qū)間輸入組件相關知識感興趣的朋友一起看看吧
2022-05-05