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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 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 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
PHP7新特性简述
2017/06/11 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python 元组(Tuple)操作详解
2014/03/11 Python
使用Python写CUDA程序的方法
2017/03/27 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python 遍历pd.Series的index和value
2019/11/26 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
国际领先的学术出版商:Springer
2017/01/11 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
工厂采购员岗位职责
2014/04/08 职场文书
2014年团委工作总结
2014/11/13 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
致运动员赞词
2015/07/22 职场文书
高中军训感想
2015/08/07 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis