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可访问其它域名的cookie的方法
Sep 18 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
原生js实现回复评论功能
Jan 18 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 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
mysql+php分页类(已测)
2008/03/31 PHP
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
Python基于property实现类的特性操作示例
2018/06/15 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
质检员的岗位职责
2013/11/15 职场文书
流动人口婚育证明
2014/10/19 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
感动中国何玥观后感
2015/06/02 职场文书
政审证明范文
2015/06/19 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js