快捷導(dǎo)航

JavaScript輸入分鐘、秒倒計(jì)時(shí)技巧總結(jié)（附代碼）

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

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

代碼如下：

<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()"> 開(kāi)始 </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>

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

您可能感興趣的文章:

相關(guān)文章

TypeScript中Class類的基本使用方法
在TypeScript中,我們可以使用Class來(lái)定義類,這使得我們能夠更加結(jié)構(gòu)化地組織代碼并使用面向?qū)ο蟮乃枷脒M(jìn)行開(kāi)發(fā),本文小編將給大家詳細(xì)的總結(jié)一下TypeScript中Class類的基本語(yǔ)法,需要的朋友可以參考下
2023-09-09
JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript鏈?zhǔn)秸{(diào)用基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
javascript url幾種編碼方式詳解
下面小編就為大家?guī)?lái)一篇javascript url幾種編碼方式詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
JS中判斷某個(gè)字符串是否包含另一個(gè)字符串的五種方法
本文給大家?guī)?lái)JS中判斷某個(gè)字符串是否包含另一個(gè)字符串的五種方法，有string對(duì)象的方法，match() 方法，RegExp對(duì)象的方法，test() 方法，exec() 方法，具體內(nèi)容詳情大家參考下本文
2018-05-05
javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法
這篇文章主要介紹了javascript元素動(dòng)態(tài)創(chuàng)建實(shí)現(xiàn)方法,涉及javascript操作元素的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
一文快速弄懂webpack動(dòng)態(tài)import原理
無(wú)論你開(kāi)發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來(lái)管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動(dòng)態(tài)import原理的相關(guān)資料,需要的朋友可以參考下
2022-04-04
element-ui?對(duì)話框dialog使用echarts報(bào)錯(cuò)'dom沒(méi)有獲取到'的問(wèn)題
這篇文章主要介紹了element-ui?對(duì)話框dialog里使用echarts，報(bào)錯(cuò)'dom沒(méi)有獲取到'的問(wèn)題，在這個(gè)事件里邊進(jìn)行echarts的初始化，執(zhí)行數(shù)據(jù)，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解,需要的朋友可以參考下
2022-11-11
JS中的Replace()傳入函數(shù)時(shí)的用法詳解
這篇文章主要介紹了JS中的Replace()傳入函數(shù)時(shí)的用法詳解,replace方法的語(yǔ)法是：stringObj.replace(rgExp, replaceText)關(guān)于js replace 傳入函數(shù)的用法，大家通過(guò)本文學(xué)習(xí)吧
2017-09-09
js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼功能
本文主要介紹了js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼功能的示例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
JavaScript中的標(biāo)簽語(yǔ)句用法分析
這篇文章主要介紹了JavaScript中的標(biāo)簽語(yǔ)句用法,實(shí)例分析了標(biāo)簽語(yǔ)句的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下
2015-02-02