下面是用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. windows下Mysql8.0.12安装详解

    MySQL的安装过程还是比较繁琐,为了以后安装节约时间,将其详细安装过程总结如下: 1>下载对应版本 下载地址:https://dev.mysql.com/downloads/mysql/ 2& ...

  2. 合批只是对CPU的优化，与GPU没有任何关系

    如题. 今天细想了下合批这个东西. 合批是节省了CPU的相关准备工作的工作量. 合批后,经过VS,PS,尝试测试,模板测试后,此时已没有了纹理,顶点,索引的概念,只剩下一个个孤立的像素,各像素间没有任 ...

  3. Mybatis-PageHelper分页插件

    PageHelper.startPage 静态方法调用 除了 PageHelper.startPage 方法外,还提供了类似用法的 PageHelper.offsetPage 方法. 在你需要进行分页 ...

  4. Linux下，如何查看磁盘是否包含数据

    可以使用lquerypv -h来查看磁盘是否包含数据,或磁盘头是否被dd过.这在安装RAC的过程中,是非常实用的一个命令.如果不包括数据的话,那么如下所示: [ZFFR4CB2101:root]/]& ...

  5. springboot整合dubbox与zookeeper

    springboot中dubbo依赖的引入和配置(application.properties)参见:https://blog.csdn.net/wohaqiyi/article/details/72 ...

  6. xcode项目打不开:incompatible project version问题

    低版本xcode打开高版本xcode项目或库工程的时候就会出现,打不开的问题 解决 1可以重建创建工程,将文件拷贝到新工程 2 相对一,较简单 找到.xcodeproj文件 右键 显示包内容,找到pr ...

  7. FortiGate抓包 Sniffer

    1.图形界面抓包 系统管理--网络--数据包捕获 选择添加好的数据捕获,点击"运行"开关抓包:抓取包后,可以点击"下载"将抓取的数据包保存的本地磁盘,可以用wi ...

  8. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  9. 如何快速学好Shell脚本？ 转

    如何快速学好Shell脚本?   目录 写作思路 知识体系 Shell 语言作为类 Unix 系统的原生脚本,有着非常实用的价值.但对于很多刚刚接触 Shell 脚本的同学来说,搞懂 Shell 语言 ...

  10. Scanner 随机数

    import java.util.Scanner;                                               import java.util.Scanner; Sc ...