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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
JavaScript语言核心数据类型和变量使用介绍
Aug 23 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
javascript每日必学之循环
Feb 19 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
js 表格隔行颜色
2009/12/02 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
django 按时间范围查询数据库实例代码
2018/02/11 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
保洁主管岗位职责
2013/11/20 职场文书
护理专业自荐信
2013/12/03 职场文书
现金出纳岗位职责
2014/03/15 职场文书
目标责任书格式
2014/07/28 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
六年级语文教学反思
2016/03/03 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL