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 相关文章推荐
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
vue生命周期的探索
Apr 03 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
js实现中文实时时钟
Jan 15 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP重定向的3种方式
2013/03/07 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
python常见的格式化输出小结
2016/12/15 Python
Python处理文本换行符实例代码
2018/02/03 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
违纪检讨书2000字
2014/02/08 职场文书
拉歌口号大全
2014/06/13 职场文书
销售人员求职信
2014/07/22 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
研究生简历自我评
2015/03/11 职场文书
检讨书格式
2015/05/07 职场文书
60句有关成长的名言
2019/09/04 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Python包argparse模块常用方法
2021/06/04 Python