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

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

代码如下：

<html>

<head>

<meta charset="UTF-8">

<title>简单时长倒计时</title>

<SCRIPT type="text/javascript">

            var maxtime =  * ; //一个小时，按秒计算，自己调整!

            function CountDown() {

                if (maxtime >= ) {

                    minutes = Math.floor(maxtime / );

                    seconds = Math.floor(maxtime % );

                    msg = "距离结束还有" + minutes + "分" + seconds + "秒";

                    document.all["timer"].innerHTML = msg;

                    if (maxtime ==  * )alert("还剩5分钟");

                        --maxtime;

                } else{

                    clearInterval(timer);

                    alert("时间到，结束!");

                }

            }

            timer = setInterval("CountDown()", );

        </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>=) {

                d = Math.floor(leftTime////);

                h = Math.floor(leftTime///%);

                m = Math.floor(leftTime//%);

                s = Math.floor(leftTime/%);

            }

            //将倒计时赋值到div中

            document.getElementById("_d").innerHTML = d+"天";

            document.getElementById("_h").innerHTML = h+"时";

            document.getElementById("_m").innerHTML = m+"分";

            document.getElementById("_s").innerHTML = s+"秒";

            //递归每秒调用countTime方法，显示动态时间效果

            setTimeout(countTime,);  

        }

    </script>

</head >

<body onload="countTime()" >

    <div>

        <span id="_d"></span>

        <span id="_h"></span>

        <span id="_m"></span>

        <span id="_s"></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. C#不用union，而是有更好的方式实现 .net自定义错误页面实现 .net自定义错误页面实现升级篇 .net捕捉全局未处理异常的3种方式 一款很不错的FLASH时种插件 关于c#中委托使用小结 WEB网站常见受攻击方式及解决办法 判断URL是否存在 提升高并发量服务器性能解决思路

    C#不用union,而是有更好的方式实现   用过C/C++的人都知道有个union,特别好用,似乎char数组到short,int,float等的转换无所不能,也确实是能,并且用起来十分方便.那C# ...

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

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

  8. 一个很不错的支持Ext JS 4的上传按钮

    以前经常使用的swfUpload,自从2010年开始到现在,很久没更新了.而这几年,flash版本已经换了好多个,所以决定抛弃swfupload,使用新找到的上传按钮. 新的上传按钮由harrydel ...

  9. 自制Javascript分页插件，支持AJAX加载和URL带参跳转两种初始化方式，可用于同一页面的多个分页和不同页面的调用

    闲话部分 最近闲着实在无聊,就做了点小东西练练手,由于原来一直在用AspNetPager进行分页,而且也进行了深度的定制与原有系统整合的也不错,不过毕竟是用别人的,想着看自己能试着做出来不能,后台的分 ...

随机推荐

  1. 关于pip安装较慢的问题解决

    在 ~/.pip/ 下创建文件 pip.conf(如果还没有的话),并填入以下内容: [global] timeout = 6000 index-url = http://pypi.douban.co ...

  2. Python连接数据库流行用到的第三方库

    Python连接数据库流行用到的第三方库: mysqldb:只支持Python2.x mysqlclient : mysqldb的衍生版本,完全兼容mysqldb,同时支持Python3.x,安装较复 ...

  3. 【JZOJ6271】锻造 (forging)

    description analysis 首先看一下\(p=1\),即\(1\)以后的合成一定成功的情况 如果按照求期望值的一般做法求两把\(0\)合成\(1\)的期望,会画出一棵无穷大的树 这个的期 ...

  4. redis和ehcache的区别，存储方式（各属于内存还是外存）

    ehcache属于内存存储,redis的缓存属于内存存储,redis的持久文件属于外存存储: redis是通过socket访问到缓存服务,效率比ecache低,比数据库要快很多,处理集群和分布式缓存方 ...

  5. Maven Projects报错但对应的pom文件不报错解决方案

    情景:dependencies中总有红波浪线报错,但是核对包名和路径,以及pom文件没有任何问题 项目可以正常运行,这种时候有强迫症的就不行了.... 解决方案是,根据波浪线提示的jar包,到pom文 ...

  6. UNIT对话系统（杂记）

    单轮对话指标: 召回率=机器人能回答的问题数/问题总数 准确率=机器人正确回答的问题数/问题总数 问题解决率=机器成功解决的问题数/问题总数 多轮对话指标: 任务完成率=成功结束的多轮会话数/多轮会话 ...

  7. USACO 2007 February Silver The Cow Lexicon /// DP oj24258

    题目大意: 输入w,l: w是接下来的字典内的单词个数,l为目标字符串长度 输入目标字符串 接下来w行,输入字典内的各个单词 输出目标字符串最少删除多少个字母就能变成只由字典内的单词组成的字符串 Sa ...

  8. POJ 1743-POJ - 3261~后缀数组关于最长字串问题

    POJ 1743 题意: 有N(1 <= N <=20000)个音符的序列来表示一首乐曲,每个音符都是1~~88范围内的整数,现在要找一个重复的主题.“主题”是整个音符序列的一个子串,它需 ...

  9. asp.net Core 获取应用程序所在目录的2种方式

    //获取应用程序所在目录的2种方式(绝对,不受工作目录影响,建议采用此方法获取路径).如:d:\Users\xk\Desktop\WebApplication1\WebApplication1\bin ...

  10. LUA中的冒号、点和self

    在Lua编程中,经常会看到有时用点号定义一个table的成员函数,有时却用冒号,在调用的时候也是如此.那么点号和冒号在使用上有什么区别呢?它们与self之间又是什么样的关系呢?稍安勿躁,接下来谜底将一 ...