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 相关文章推荐
input按钮的事件处理大全
Dec 10 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
vue选项卡切换登录方式小案例
Sep 27 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
axios拦截设置和错误处理方法
2018/03/05 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
运动会获奖感言
2014/02/11 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
三严三实对照检查材料
2014/09/22 职场文书
致接力运动员加油稿
2015/07/21 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
详解CSS故障艺术
2021/05/25 HTML / CSS
利用python调用摄像头的实例分析
2021/06/07 Python