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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
javascript 全角转换实现代码
Jul 17 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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出现web系统多域名登录失败的解决方法
2014/09/30 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
jquery遍历input取得input的name
2009/04/27 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
Python中的ctime()方法使用教程
2015/05/22 Python
Python类的用法实例浅析
2015/05/27 Python
python实现线程池的方法
2015/06/30 Python
Python 序列的方法总结
2016/10/18 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
户外用品商店创业计划书
2014/01/29 职场文书
大学毕业感言200字
2014/03/09 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
学习普通话的体会
2014/11/07 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
面试通知单大全
2015/04/20 职场文书
python基础之函数的定义和调用
2021/10/24 Python