当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript输入分钟、秒倒计时技巧总结（附代码）

JavaScript输入分钟、秒倒计时技巧总结（附代码）

2017年12月12日  | 移动技术网IT编程  | 我要评论

代码如下：

<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>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持!

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网