下面是用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. TensorFlow学习之四

    Tensorflow一些常用基本概念与函数(1) 摘要:本文主要对tf的一些常用概念与方法进行描述. 1.tensorflow的基本运作 为了快速的熟悉TensorFlow编程,下面从一段简单的代码开 ...

  2. django中执行py报错Requested setting DEFAULT_INDEX_TABLESPACE, but settings are not configured

    https://blog.csdn.net/heybob/article/details/49684261 django代码下面直接run的时候报错: django.core.exceptions.I ...

  3. Windows下用VS2015+MSYS编译OpenH264

    因为项目用到了OpenH264,编译的过程不想做过多研究,搜了下,有网页可以参考,遂记录下来,并在后面做一些补充. 原帖地址:http://blog.csdn.net/dbyoung/article/ ...

  4. ntp时间同步参考

    https://blog.csdn.net/kamereon/article/details/54344114

  5. vue 关键词模糊查询

    页面html,绑定的列表数据为datas,关键词为 select_words,如下图 其中d.accounts和d.roleName是需要进行搜索的字段,也可以进行大小写都可以

  6. BlockTrain网络

    [BlockTrain网络] 1.每个节点都参与全⽹络的路由功能,同时也可能包含其他功能.每个节点都参与验证并传播交易及区块信息,发现并维持与对等节点的连接.在图6-1所⽰的全节点⽤例中,名为“⽹络路 ...

  7. 从汇编层面解释switch语句判断快速的原因

      源码如下: #include <stdio.h>   void main(){     int flag;     flag=1;     switch (flag){         ...

  8. 153. Find Minimum in Rotated Sorted Array找其中的最小值

    ［抄题］: [暴力解法]: 时间分析: 空间分析: [优化后]: 时间分析: 空间分析: ［奇葩输出条件］: ［奇葩corner case］: ［思维问题］: 总算自己写出一道题来了. ［英文数据结构 ...

  9. react项目的react-router-dom路由的使用

    现在测试一下react-router-dom路由的使用,首先在App.js这个文件搭配路由 import React, { Component } from 'react'; import {Link ...

  10. mysql-8.0.15-winx64 解压版安装 图文详解

    1.官网下载 https://dev.mysql.com/downloads/mysql/ 2.解压到合适的目录 3.配置环境变量 ①. path ②.MYSQL_HOME 4.新建一个my.ini  ...