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 图片轮播(5张图片)
Dec 30 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
详解Puppeteer 入门教程
May 09 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
初识Node.js
2014/09/03 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
vant时间控件使用方法详解
2020/12/24 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
基层工作经验证明样本
2014/11/16 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
道歉信范文
2015/05/12 职场文书
二十年同学聚会感言
2015/07/30 职场文书
Java 死锁解决方案
2022/05/11 Java/Android
MySQL主从切换的超详细步骤
2022/06/28 MySQL