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 相关文章推荐
jquery构造器的实现代码小结
May 16 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 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
2006/11/25 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
React实现轮播效果
2020/08/25 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python itertools模块详解
2015/05/09 Python
python根据日期返回星期几的方法
2015/07/06 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python异步Web框架sanic的实现
2020/04/27 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
营业经理岗位职责
2013/11/10 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
小学生安全演讲稿
2014/04/25 职场文书
初婚初育证明范本
2014/11/24 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
logback 实现给变量指定默认值
2021/08/30 Java/Android
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android