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关键字球状旋转效果的实例代码
Nov 29 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
ng-zorro-antd 入门初体验
Dec 03 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 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循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
canvas绘制多边形
2017/02/24 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
python Django中models进行模糊查询的示例
2019/07/18 Python
Python简易版图书管理系统
2019/08/12 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python3 配置logging日志类的操作
2020/04/08 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
季度思想汇报
2014/01/01 职场文书
工厂搬迁方案
2014/05/11 职场文书
英语分层教学实施方案
2014/06/15 职场文书
运动会演讲稿200字
2014/08/25 职场文书
开展创先争优活动总结
2014/08/28 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
员工福利申请报告
2015/05/15 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
python神经网络Xception模型
2022/05/06 Python