下面是用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. 非virtual函数，用指针进行upcast

    void print_func(A* p) { p -> print(); } int main() { A a(); B b(,); //a.print(); //b.print(); pri ...

  2. 在ASP.NET MVC中使用UEditor无法提交的解决办法

    很简单的一个ajax提交,却怎么都不成功 $.ajax({ type: "POST", url: "/mms/riskmanage/commitreply", ...

  3. DRF中的序列化器

    DRF中的序列化器详细应用   视图的功能:说白了就是接收前端请求,进行数据处理 (这里的处理包括:如果前端是GET请求,则构造查询集,将结果返回,这个过程为序列化:如果前端是POST请求,假如要对数 ...

  4. python note 02 格式化与判断、字符串转换

    1.格式化输出% %s %d name = input ('请输入姓名:') age = input ('请输入年龄:') height = input ('请输入身高:') msg = " ...

  5. 百度地图sdk sha1秘钥获取有种想吐的赶脚

    撸代码坐的腰算背疼还只是弄一个不是项目里边需要的升级版本的so 日 需要sha1 指纹秘钥,还有项目包, 才能用百度地图sdk 这个找sha1  获取废了20分钟, 显示全盘找keytool.exe ...

  6. 设置textfield 文字左边距

    默认情况下,当向textField输入文字时,文字会紧贴在textField左边框上.我们可以通过设置textField的leftView,设置一个只有宽度的leftView.这样还不够,因为默认le ...

  7. yii框架 隐藏index.php 以及美化URL(pathinfo模式访问)

    首先我们分步骤来: 安装好 yii 以后  我们看到的url地址如下所示: http://www.3w.com/MyApp/backend/web/index.php?r=site%2Flogin 我 ...

  8. Web 研发模式的演变

    前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的优劣. 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 ...

  9. java 大任务分解成小任务 fork/join

    https://blog.csdn.net/weixin_41404773/article/details/80733324目标求 0+1+2+3+4+5+....+1000 初始 start=0 , ...

  10. Python(五) 字典