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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
利用js实现简单开关灯代码
Nov 23 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+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
python logging模块的使用总结
2019/07/09 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python统计文章中单词出现次数实例
2020/02/27 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
中学生校园广播稿
2014/01/16 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
春节晚会开场白
2015/05/29 职场文书
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL