下面是用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. xml实现登录表单验证

    定义: XML(eXtended Markup Language,可扩展标记语言)提供了一套跨平台.跨网络.跨程序的语言的数据描述方式,使用XML可以方便地实现数据交换.系统配置.内容管理等常见功能. ...

  2. 在chrome console添加jQuery支持

    有时候想在chrome console使用jq,那么下面这段代码就可以完美解决问题了. var script = document.createElement('script');script.src ...

  3. ISNUMERIC使用说明和BUG

    ISNUMERIC ( expression )参数 expression 要计算的表达式.返回类型 int 备注当输入表达式的计算结果为有效的 numeric 数据类型时,ISNUMERIC 返回 ...

  4. python学习笔记（三）- 字典、集合

    字典:key-value形式 1)取数据方便   #字典里面没有重复的key 2)查询速度快 #字典是无序的 一.定义一个字典 infos = { 'name':'王小明', 'sex':'male' ...

  5. EOS的发币逻辑

    [EOS的发币逻辑] EOS官网的Guide中(参考[1]),描述了如何发自己的Token: 1.创建一个contract. 2.有一些create.transfer.close action. 3. ...

  6. Django 学生信息 添加 功能 遇到的问题.

    1  添加 班级信息时的问题 (grade为外键) 原因是 grade 必需接收 一个 实例, 而我交是一个 str字符串, if request.method == 'POST': data = { ...

  7. CentOS7双网卡绑定配置

    step1:创建绑定文件 [root@node-1 ~]# vi /etc/sysconfig/network-scripts/ifcfg-bond0 TYPE="bond"BOO ...

  8. unknow Unknown type name 'NSString'

    转载:geweb 今天看到个问题,编辑工程提示Unknown type name 'NSString',如下图 导致出现异常的原因是是因为工程中添加了ZipArchive(第三方开源解压缩库) 一般情 ...

  9. 1.5eigen中高级初始化

    1.5 高级初始化 这一节讨论一些初始化矩阵的高级方法. 1.The comma initializer eigen提供一个简单设定所有矩阵系数.向量.数组系数的初始化语法,从左上角开始到右下角结束. ...

  10. 阿里巴巴Java开发规约插件安装使用指南

    编码规范插件安装使用指南 阿里技术公众号于今年的2月9日首次公布<阿里巴巴Java开发规约>,瞬间引起全民代码规范的热潮,后又发布了PDF的终极版,大家踊跃留言,期待配套的静态扫描工具开放 ...