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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
vue封装swiper代码实例解析
Oct 08 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 socket(fsockopen)的应用实例分析
2013/06/02 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
Python机器学习logistic回归代码解析
2018/01/17 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python3.7调试的实例方法
2020/07/21 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
C语言编程题
2015/03/09 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
财务分析个人的自荐书范文
2013/11/24 职场文书
财务会计专业推荐信
2013/11/30 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
校运会入场式解说词
2014/02/10 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
python 如何用terminal输入参数
2021/05/25 Python