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 蒙版进度条(结合图片)
Mar 10 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
JavaScript实现简单的弹窗效果
May 19 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
关于时间计算的结总
2006/12/06 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php强制运行广告的方法
2014/12/01 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python3字符串操作总结
2019/07/24 Python
财务工作个人求职的自我评价
2013/12/19 职场文书
少先队入队活动方案
2014/02/08 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
感谢信
2019/04/11 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python