js倒计时小实例

原创 2017-01-11 09:35:03 254
摘要:一个简单的js计时函数(多次定时)<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title>  <sty

一个简单的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倒计时小实例请关注PHP中文网(www.php.cn)其他文章! 

发布手记

热门词条