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 相关文章推荐
Google AJAX 搜索 API实现代码
Nov 17 Javascript
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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发电子邮件
2006/10/09 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
用python与文件进行交互的方法
2018/03/01 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python issubclass 和 isinstance函数
2019/07/25 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
提高EJB性能都有哪些技巧
2012/03/25 面试题
翻译学院毕业生自荐书
2014/02/02 职场文书
公司活动总结怎么写
2014/06/25 职场文书
学术会议通知范文
2015/04/15 职场文书
法律服务所工作总结
2015/08/10 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL