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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
javascript json2 使用方法
Mar 16 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
Javascript var变量删除原理及实现
Aug 26 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去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
周年庆典主持词
2014/04/02 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
调解协议书范本
2016/03/21 职场文书
2019银行竞聘书
2019/06/21 职场文书