下面是用JS中的日期函数和定时器完成的一个倒计时的例子，效果如图：

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <title>倒计时</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    </head>

    <body>

        <input type="button" onclick="daojishi();" value="开始倒计时"/>

        <div id="daojishi"></div>

    </body>

    <script type="text/JavaScript">

        function daojishi(){

            //获取当前时间

            var nowTime = new Date();

            //获取活动结束时间，这里注意，月份是0-11

            var EndTime = new Date(2018,05,11,15,24,0);

            //比较活动结束日期和当前时间

            var chaTime = EndTime.getTime() - nowTime.getTime();

            var nMS = 0;

            if (chaTime > 0){

                nMS = chaTime;

            }if (chaTime == 0){

                alert("活动时间到");

                return;

            }else if(chaTime < 0){

                alert("活动已过期");

                return;

            }

            //floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

            var nD = Math.floor(nMS / (1000 * 60 * 60) / 24);//天

            var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//时

            var nM = Math.floor(nMS / (1000 * 60)) % 60;//分

            var nS = Math.floor(nMS / 1000) % 60;//秒

            if (nH < 10) {

                nH = '0' + nH;

            }

            if (nM < 10) {

                nM = '0' + nM;

            }

            if (nS < 10) {

                nS = '0' + nS;

            }

            document.getElementById("daojishi").innerHTML = "<span>"+nD+"</span>天<span>"+nH+"</span>时<span>"+nM+"</span>分<span>"+nS+"</span>秒";

            //定时器

            setTimeout(function() {

                daojishi();

            }, 1000);

        }

    </script>

</html>

JavaScript实现页面显示倒计时功能的更多相关文章

  1. javascript 实现页面显示当前时间 动态读秒

    用户进入网站后,出于友好目的,可以添加一些欢迎语句,并且显示系统当前时间,动态读秒的操作.还是直接粘贴代码吧 <script type="text/javascript"&g ...

  2. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  3. [javascript]各种页面定时跳转(倒计时跳转)代码总结

    (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) <script type="text/javascript"> //3秒钟之后跳转到指定 ...

  4. 开源的javascript实现页面打印功能，兼容所有的浏览器（情况属实）

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

  5. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  6. 在同一页面显示多个JavaScript统计图表

    最近我接到一个开发任务,要求就"售后服务客户满意度调查问卷表"里客户填写的反馈答案做一个统计. 问题的例子如下: 您最后一次是何时购买了我们的产品? 服务人员服务态度是否友好.工作 ...

  7. JS数组 编程练习 使用Javascript语言，把以下数组 在页面显示如下图所示的图案

    编程练习 使用Javascript语言,把以下数组 var  arr = ['*','##',"***","&&","****&quo ...

  8. 模块：js实现一个倒计时功能

    1.给显示内容加样式 <style> #p1{font-size: large; color: red;} </style> 2.客户端页面 <div id=" ...

  9. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

随机推荐

  1. jquery之过滤filter,not

    <body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭</p> <p class="intro"> ...

  2. 关于http以及aphace配置https

    我是通过腾讯云配置的ssl.   网站:www.xian029.cn 免费申请,然后通过phpstudy  来配置的. 密码学:   研究密码编码与解码的学科,可以分为编码学和破译学.   HTTPS ...

  3. CDH Spark-shell启动报错

    Spark-shell启动报错      具体报错如下: 在CDH  YARN 中修改以下两个配置: yarn.scheduler.maximum-allocation-mb 2048 yarn.no ...

  4. C语言之标准源文件模板

    /*======================================================================================* * 版权 : xxx ...

  5. 求树的直径+并查集（bfs，dfs都可以）hdu4514

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4514 这题主要是叫我们求出树的直径,在求树的直径之前要先判断一下有没有环 树的直径指的就是一棵树上面距 ...

  6. Swift 循环引用

    - 循环引用的weak用法 // ** {} 中所有 self 都是弱引用,注意需要解包        // 1.类似于 OC 中的 __weak typeof(self) weakSelf = se ...

  7. Java之IO流总结

    IO流·Java流式输入/输出原理·Java流类的分类·输入/输出流类·常见的节点流和处理流·文件流·缓冲流·转换流·数据流·Print流·Object流 ①Java流式输入/输出原理         ...

  8. Python3实战系列之八（获取印度售后数据项目）

    问题:续接上一篇.说干咱就干呀,勤勤恳恳写程序呀! 目标:此篇开始进入正题了.为实现我们整个项目功能而开始实现各个子模块功能.首先实现第一篇列出的分步功能模块的第五步: 5.python连接SQL S ...

  9. 图解HTTP第二章

    简单的 HTTP 协议 1>HTTP 协议用于客户端和服务器端之间的通信 HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同,用于客户端和服务器之间的通信.请求访问文本或图像等资源的一 ...

  10. PHP-循环结构-数组

    今日目标: (1)循环结构 —— do..while.. —— 掌握 (2)循环结构 —— for —— 重点 (3)数组 —— 重点 1.PHP中的循环结构 —— do..while... do: ...