首页 > 开发 > JS > 正文

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

2024-05-06 16:39:04
字体:
来源:转载
供稿:网友

代码如下:

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

 

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



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表