最近做浏览器界面倒计时，用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. phpmyadmin登陆错误：The requested URL /phpmyadmin was not found on this serve

     解决方法: 首先,重新安装apache2: sudo dpkg-reconfigure -plow phpmyadmin 配置时记得选择apache2 如果仍然无法登陆,再对phpmyadmin和a ...

  2. Java核心技术第五章——2.Object类

    Object类:所有类的超类 Object类是Java中所有类的始祖,在Java中每个类都是由它扩展而来的.但是并不需要这样写: public class Emloyee extends Object ...

  3. CSS Modules In Webpack

    1)从形式上看,CSS Modules 是将CSS中的选择器转换为变量,然后在DOM中引用变量来引入样式. 2)从效果上看,CSS Modules 可以将CSS选择器名字转成随机字符串,保证选择器同名 ...

  4. webpack打包The 'mode' option has not been set,错误提示

    学习到webpack打包这个工具的时候,总是报错.在这里记录一下...... 我是window系统 当使用npm安装好webpack后,你去查看如果出现一下问题. 出现以上问题,我的做法是 先将web ...

  5. 用ASP.NET Core 2.1 建立规范的 REST API -- 翻页/排序/过滤等

    本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblogs.com/cgzl/p/9019314 ...

  6. C#利用NPOI操作Excel文件

    NPOI作为开源免费的组件,功能强大,可用来读写Excel(兼容xls和xlsx两种版本).Word.PPT文件.可是要让我们记住所有的操作,这便有点困难了,至此,总结一些在开发中常用的针对Excel ...

  7. [开源]Entity Framework 6 Repository 一种实现方式

    在使用Entity Framework这种ORM框架得时候,一般结合Repository仓储形式来处理业务逻辑:虽然这种模式带来很多好处,但是也会引发一些争议,在此抛开不谈,小弟结合项目经验来实现一下 ...

  8. Python：strip 函数踩坑

    S.strip(chars=None) strip 函数用于去除字符串首尾的空格,当 chars 不为 None 时,则删除字符串首尾的 chars 中的字符. 当 chars=None 时,去除首尾 ...

  9. 原子操作&普通锁&读写锁

    一:原子操作CAS(compare-and-swap) 原子操作分三步:读取addr的值,和old进行比较,如果相等,则将new赋值给*addr,他能保证这三步一起执行完成,叫原子操作也就是说它不能再 ...

  10. asp.net mvc 三层加EF 登录注册 增删改查

    首先打开vs软件新建项目创建web中的mvc项目再右击解决方案创建类库项目分别创建DAL层和BLL层再把DAL层和BLL层的类重命名在mvc项目中的Models文件夹创建model类在DAL创建ADO ...