最近做浏览器界面倒计时，用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>

运行结果：

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

代码如下：

 <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倒计时两种种实现方式的更多相关文章

  1. JS倒计时两种种实现方式 很不错

    最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...

  2. Js的两种post方式

    第一种提交post的方式是传统方式,判断浏览器进行post请求. var xmlobj; //定义XMLHttpRequest对象 function CreateXMLHttpRequest() { ...

  3. js的两种查询方式 LHS and RHS

    为了进一步理解,我们需要多介绍一点编译器的术语.编译器在编译过程的第二步中生成了代码,引擎执行它时,会通过查找变量 a 来判断它是否已声明过.查找的过程由作用域进行协助,但是引擎执行怎样的查找,会影响 ...

  4. vue引用外部JS的两种种方案

    前言 肯定会遇到没有npm化的库 自己写的js 方法 在Vue中该怎么引用呢 第一种 如果库是es6写的 就可以用import 引入 比如我自己写的http 封装接口的方法 就可以这样子导入哦 第二种 ...

  5. JS 数组两种定义方式

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  6. iOS活动倒计时的两种实现方式

    代码地址如下:http://www.demodashi.com/demo/11076.html 在做些活动界面或者限时验证码时, 经常会使用一些倒计时突出展现. 现提供两种方案: 一.使用NSTime ...

  7. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...

  8. js倒计时-倒计输入的时间

    计算指定时间到指定时间之间相差多少天.时.分.秒. 节日.活动.商城常用. 原理: 主要使用到时间戳,也就是从1970 年 1 月 1 日 到指定时间的毫秒数. 1. 求出毫秒差 :当两个时间直接进行 ...

  9. js保留两位小数

    js保留两位小数四舍五入: (Math.floor(until_price*100)/100).toFixed(2);//会四舍五入   保留两位小数 且不四舍五入(三种方式,请用最后一种): var ...

随机推荐

  1. 安卓开发笔记（二十）：利用夜神模拟器调试运行Android Studio的apk

    一.首先来到夜神模拟器的安装目录下 如下图所示: 再把这整个文件夹添加到我们的windows环境变量里.然后再把android studio 和夜神模拟器都打开,注意必须同时打开而且不能够把夜神模拟器 ...

  2. JVM之垃圾收集器

    前一篇讲了垃圾收集算法--JVM之GC算法.垃圾收集算法——标记-清除算法.复制算法.标记-整理算法.分代收集算法,如果把它看作是方法论,那么下面说的就应该是内存回收的具体实现. 先看一下JVM中有哪 ...

  3. Android 音视频开发学习思路

    Android 音视频开发这块目前的确没有比较系统的教程或者书籍,网上的博客文章也都是比较零散的.只能通过一点点的学习和积累把这块的知识串联积累起来. 初级入门篇: Android 音视频开发(一) ...

  4. FFmpeg命令行工具学习(五)：FFmpeg 调整音视频播放速度

    FFmpeg对音频.视频播放速度的调整的原理不一样.下面简单的说一下各自的原理及实现方式: 一.调整视频速率 调整视频速率的原理为:修改视频的pts,dts 实现: ffmpeg -i input.m ...

  5. 当List<String> list =new ArrayList<String>(20); 他会扩容多少次

    当List<String> list =new ArrayList<String>(20); 他会扩容多少次?A 0       B 1 C 2 D 3答案是A: 因为这个集合 ...

  6. 【机器学习篇】--SVD从初始到应用

    SVD一般应用场景--推荐系统,图像压缩. 1.直观感受. SVD其实就是将矩阵分界,直观感受如图.就是将A矩阵分界成U,S,V三个矩阵相乘.一般推荐系统中用的多.S是对角阵,里面的特征值是从大到小排 ...

  7. springboot~@Valid注解对嵌套类型的校验

    @Valid注解可以实现数据的验证,你可以定义实体,在实体的属性上添加校验规则,而在API接收数据时添加@valid关键字,这时你的实体将会开启一个校验的功能,具体的代码如下,是最基本的应用: 实体: ...

  8. LindDotNetCore~Scheduling任务调度模块的介绍

    回到目录 任务调度组件 位于Scheduling目录 基类JobBase,所有JOB都派生自它,重写Cron属性可以修改调度周期 支持单次JOB,即执行完成后马上停止 支持对外API接口,以便获取和修 ...

  9. Linux通配符应用详解

    一.强大的“*” “*”在通配符中是最常用的一种,代表0个.一个或多个字符.在使用中有三种情况,表示三种不同的含义. 1.单独的“*” 这里指的是只有“*”出现的情况,默认为单独的一个,当然连续敲两个 ...

  10. java_IO流

    IO流概述及分类 Reader  InputStream  OutputStream  Writer都是Object的直接子类 字节流: 字节输入流 InputStream(抽象类) |---File ...