JS倒计时两种实现方式代码实例


Posted in Javascript onJuly 27, 2020

最近做浏览器界面倒计时,用js就实现,两种方式:

一:设置时长,进行倒计时。比如考试时间等等

代码如下:

<html>
<head>
<meta charset="UTF-8">
<title>简单时长倒计时</title>
<SCRIPT type="text/javascript">
      var maxtime = 60 * 60; //一个小时,按秒计算,自己调整!
      function CountDown() {
        if (maxtime >= 0) {
          minutes = Math.floor(maxtime / 60);
          seconds = Math.floor(maxtime % 60);
          msg = "距离结束还有" + minutes + "分" + seconds + "秒";
          document.all["timer"].innerHTML = msg;
          if (maxtime == 5 * 60)alert("还剩5分钟");
            --maxtime;
        } else{
          clearInterval(timer);
          alert("时间到,结束!");
        }
      }
      timer = setInterval("CountDown()", 1000);
    </SCRIPT>
</head>
<body>
<div id="timer" style="color:red"></div>
<div id="warring" style="color:red"></div>
</body>
</html>

运行结果:

JS倒计时两种实现方式代码实例

二:设置时间戳,进行倒计时。比如距离活动结束时间等等

代码如下:

<html>
<head>
  <meta charset="UTF-8">
  <title>js简单时分秒倒计时</title>
  <script type="text/javascript">
    function countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var str="2017/5/17 00:00:00";
      var endDate = new Date(str);
      var end = endDate.getTime();

      //时间差
      var leftTime = end-now;
      //定义变量 d,h,m,s保存倒计时的时间
      var d,h,m,s;
      if (leftTime>=0) {
        d = Math.floor(leftTime/1000/60/60/24);
        h = Math.floor(leftTime/1000/60/60%24);
        m = Math.floor(leftTime/1000/60%60);
        s = Math.floor(leftTime/1000%60);
      }
      //将倒计时赋值到div中
      document.getElementById("_d").innerHTML = d+"天";
      document.getElementById("_h").innerHTML = h+"时";
      document.getElementById("_m").innerHTML = m+"分";
      document.getElementById("_s").innerHTML = s+"秒";
      //递归每秒调用countTime方法,显示动态时间效果
      setTimeout(countTime,1000);

    }
  </script>
</head >
<body onload="countTime()" >
  <div>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
  </div>
</body>
</html>

运行结果:

JS倒计时两种实现方式代码实例

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

Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 #Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 #Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
2017/08/30 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python3搜索及替换文件中文本的方法
2015/05/22 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python简单实现操作Mysql数据库
2018/01/29 Python
如何用python写个模板引擎
2021/01/14 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
中国好声音华少广告词
2014/03/17 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP