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


Posted in Javascript onAugust 17, 2017

代码如下:

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

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

Javascript 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
node.js基础知识汇总
Aug 25 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 #Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 #Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 #Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 #Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 #Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 #jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 #jQuery
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php实现上传图片文件代码
2015/07/19 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Python异常处理总结
2014/08/15 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python实现机器人卡牌
2019/10/06 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
小学生演讲稿
2014/01/12 职场文书
年终考核评语
2014/01/19 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
大学生村官考核材料
2014/05/23 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
琅琊山导游词
2015/02/05 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL