编程 Javascript

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js倒计时小实例（多次定时）

- Author -

小朋友663

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一个可以显示阴历的JS代码

Mar 05 Javascript

Firebug 字幕文件JSON地址获取代码

Oct 28 Javascript

jquery制作居中遮罩层效果分享

Feb 21 Javascript

深入理解bootstrap框架之第二章整体架构

Oct 09 Javascript

JS使用正则实现去掉字符串左右空格的方法

Dec 27 Javascript

jquery 判断是否支持Placeholder属性的方法

Feb 07 Javascript

jQuery实现获取h1-h6标题元素值的方法

Mar 06 Javascript

JavaScript之iterable_动力节点Java学院整理

Jun 29 Javascript

JS图片轮播与索引变色功能实例详解

Jul 06 Javascript

小程序自定义模板实现吸顶功能

Jan 08 Javascript

JavaScript简易计算器制作

Jan 17 Javascript

Vue组件间的通信pubsub-js实现步骤解析

Mar 11 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