js倒计时小实例(多次定时)_javascript技巧

一个简单的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
, 定时
倒计时
js定时器倒计时、ios 倒计时定时器、倒计时定时器、羽睿倒计时定时器、羽睿专用倒计时定时器,以便于您获取更多的相关知识。

时间: 2024-09-10 06:01:23

js倒计时小实例(多次定时)_javascript技巧的相关文章

js实现小窗口拖拽效果_javascript技巧

本文实例为大家分享了js实现窗口拖拽的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 300px; width: 300px; background-color: green; po

js 去掉空格实例 Trim() LTrim() RTrim()_javascript技巧

1.js去掉字符串的空格//去左空格;function ltrim(s)...{ return s.replace(/(^s*)/g, "");}//去右空格;function rtrim(s)...{return s.replace(/(s*$)/g, "");}//去左右空格;function trim(s)...{//s.replace(/(^s*)|(s*$)/g, "");return rtrim(ltrim(s)); } 2.去除字符

js倒计时抢购实例_javascript技巧

本文实例为大家分享了JavaScript实现限时抢购,供大家参考,具体代码如下 运行效果图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"

js倒计时显示实例_javascript技巧

话不多说,请看实例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js倒计时显示-细数逝去的过往</title> <style type="text/css"> #clock { font: bold 24pt sans; background-color: #f5f5f5; padding: 10px 1

微信小程序开发之录音机 音频播放 动画实例 (真机可用)_javascript技巧

趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,

yepnope.js使用详解及示例分享_javascript技巧

yepnope.js的一个典型实例: yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); 此实例表示如果Modernizr.geolocation为真的时候加载normal.js,为假则加载polyfill.js及wrapper.js. yepnope完整语法: yepnope([{ test : /* boolean(ish) 输入条件 */, y

JS简单实现表格排序功能示例_javascript技巧

本文实例讲述了JS简单实现表格排序功能的方法.分享给大家供大家参考,具体如下: 思路:遍历每个li,并把它们存放到数组中去,然后通过sort()方法进行排序,再插入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

js实现交换运动效果的方法_javascript技巧

本文实例讲述了js实现交换运动效果的方法.分享给大家供大家参考.具体分析如下: 实现后的效果,点击互相交换位置和距离左边和上角的信息. 要点一: var now = s_pic_li[0]; for(var i=0; i<s_pic_li.length; i++){ s_pic_li[i].onclick = function(){ if(this == now) return false; var w = now.offsetWidth; var h = now.offsetHeight; v

javascript实现倒计时(精确到秒)_javascript技巧

代码相当简单实用,这里就不多废话了,小伙伴们简单看下就能明白 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <