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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
详解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错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python生成随机数组的方法小结
2017/04/15 Python
python issubclass 和 isinstance函数
2019/07/25 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
如何用Python 加密文件
2020/09/10 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
优秀党员转正的自我评价
2013/10/06 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
小学生作文评语集锦
2014/12/25 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server
Mysql文件存储图文详解
2021/06/01 MySQL
python计算列表元素与乘积详情
2022/08/05 Python