js倒计时小实例(多次定时)


Posted in Javascript onDecember 08, 2016

一个简单的js计时函数(多次定时)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  h1{text-align:center;font-size:40px;}
 </style>
</head>
<body>
 <h1 id="number">
  <!-- 倒计时还有 01时01分01秒 -->
 </h1>
 <script>
  //设置倒计时的时间范围
  var seconds = 1000;

  //手工调用计时函数
  timeRun();

  //定时调用函数
  var timer = setInterval(timeRun, 1000);

  //倒计时函数
  function timeRun(){
   //获取 h1
   var h1 = document.getElementById('number');
   //判断
   if (seconds <= 0) {
    h1.innerHTML = "Game Over";
    h1.style.fontSize = "120px";
    clearInterval(timer);
    return;
   }
   //计算 秒数 里面包含的小时数
   var h = Math.floor(seconds / 3600);
   //计算剩下的秒数
   var s = seconds - h * 3600;
   //在从剩下的秒数中 取出 分钟
   var m = Math.floor(s / 60);
   //计算剩下的秒数
   s -= m * 60; 

   //处理数字 <10的数字前加0
   h = (h<10)?'0'+h:h;
   m = (m<10)?'0'+m:m;
   s = (s<10)?'0'+s:s;

   //拼接字符串
   var message = "倒计时还有 "+h+'时'+m+'分'+s+'秒';
   //把字符串输出到h1中
   h1.innerHTML = message;

   //秒数减少
   seconds --;
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
VUE长按事件需求详解
Oct 18 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
详解JavaScript中的属性和特性
Dec 08 #Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 #Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 #Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 #Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 #Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 #Javascript
原生js编写焦点图效果
Dec 08 #Javascript
You might like
php HTML无刷新提交表单
2016/04/05 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
小程序实现多列选择器
2019/02/15 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Python实现一个优先级队列的方法
2020/07/31 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
安全生产目标责任书
2014/04/14 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
中考学习决心书
2015/02/04 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
经典爱情感言
2015/08/03 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python