首先获得两个时间的时间戳

            var newdate = new Date('2021-01-22 21:25:00').getTime();

            var olddate = new Date().getTime();

然后相减获得相差时间的毫秒数

            var difference = newdate - olddate

计算还有多少天,多少小时,多少分,多少秒

1 　　　　　　　var day = parseInt(difference / 1000 / 60 / 60 / 24);

2             difference = difference % (1000 * 60 * 60 * 24)

3             var hours = parseInt(difference / 1000 / 60 / 60);

4             difference = difference % (1000 * 60 * 60)

5             var m = parseInt(difference / 1000 / 60);

6             difference = difference % (1000 * 60)

7             var s = parseInt(difference / 1000)

最后打印一下,就是距离目标时间的天数(精确到秒)

            console.log(day + '-' + hours + '-' + m + '-' + s);

怎么让他显示在页面上并且一直动呢,,这时候我们的定时器就登场了

首先创建一个div盒子存放所有的数字

    <div id="show"><span></span>天<span></span>小时<span></span>分<span></span>秒</div>

然后动态添加

            show[0].innerHTML = day;

            show[1].innerHTML = hours;

            show[2].innerHTML = m;

            show[3].innerHTML = s;

封装函数,并加入定时器,

完整代码来啦(直接复制粘贴到html就可以运行)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="show"><span></span>天<span></span>小时<span></span>分<span></span>秒</div>

    <script>

        var show = document.getElementById("show").getElementsByTagName("span");

        function count() {

            var newdate = new Date('2021-01-22 21:25:00').getTime();

            var olddate = new Date().getTime();

            var difference = newdate - olddate

            var day = parseInt(difference / 1000 / 60 / 60 / 24);

            difference = difference % (1000 * 60 * 60 * 24)

            var hours = parseInt(difference / 1000 / 60 / 60);

            difference = difference % (1000 * 60 * 60)

            var m = parseInt(difference / 1000 / 60);

            difference = difference % (1000 * 60)

            var s = parseInt(difference / 1000)

            show[0].innerHTML = day;

            show[1].innerHTML = hours;

            show[2].innerHTML = m;

            show[3].innerHTML = s;

            console.log(day + '-' + hours + '-' + m + '-' + s);

        };

        count();

        clearInterval(timer);

        var timer = setInterval(function () {

            count(), 1000

        })

        console.log(new Date().getTime());

        console.log(new Date('2020-01-01 12:00:00').getTime());

    </script>

</body>

</html>

注意:自己用的时候可以写一个简单的判断,如果 difference (相差毫秒数)小于等于零,可以show.innerHTML添加一个提示,

还有还有,我这里设置的时间比较近,因为那个时辰对我来说很重要,我很期待,过几天可能会是负数,所以我没设置提示,也是避免大家误会,你们可以在new Date('')写任何时间,如果不用当前时间可以设置每秒让秒数减一就可以,下次有空再整理啦

哦!对了,这不适用于苹果手机哦

我记得之前看到苹果手机里要用new Data(Mon Jan 11 2021 14:46:33 GMT+0800)这种模式,大家试试哦~

用js实现倒计时效果的更多相关文章

  1. JS实现倒计时效果，并退出系统

    背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...

  2. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  3. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  4. (转)js实现倒计时效果(年月日时分秒)

    原文链接:http://mengqing.org/archives/js-countdown.html 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用.(用的是张鑫旭写的一个倒计时,稍作 ...

  5. js 实现倒计时效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. js日期倒计时效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js制作倒计时效果

    该程序可以计算任意指定的两个日期中间的差值. 本例子的指定日期是2017年1月1日,当前时间是2016年10月21日:计算它们之间的差值,在网页上显示如图所示: 关键部分代码: var nowtime ...

  8. js 验证码倒计时效果

    function settime(obj) { if(second == 0){ obj.removeAttribute("disabled"); obj.value=" ...

  9. js实现倒计时及时间对象

    JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. 当前分支拉取master的操作 git rebase master

    使用场景 理解rebase 操作步骤 1 git切换至当前开发版本 2 查找需要变基到的branch,不一定是master 3 执行rebase变基 没有冲突的情况 存在冲突的情况 解决冲突 标记冲突 ...

  2. xss平台搭建

    1. xss平台搭建 l 将xss平台源码放置在网站目录下 l 进入MySQL管理界面中的phpMyAdmin界面,新建一个XSS平台的数据库 l 修改XSS源码文件目录下的config.php中的数 ...

  3. sql高级手工注入

    非常重要:首先在网站找到管理入口,否则,呵呵就算有用户名和密码,找不到入口,也是白玩.. 注入时,注意通过改变大小写.编码.转换等方式躲过系统检查,顺利执行语句!!! (一)数字型注入 正常步骤: 1 ...

  4. 【网鼎杯2020白虎组】Web WriteUp [picdown]

    picdown 抓包发现存在文件包含漏洞: 在main.py下面暴露的flask的源代码 from flask import Flask, Response, render_template, req ...

  5. 到底为什么不建议使用SELECT *？

    "不要使用SELECT *"几乎已经成为了MySQL使用的一条金科玉律,就连<阿里Java开发手册>也明确表示不得使用*作为查询的字段列表,更是让这条规则拥有了权威的加 ...

  6. Ubuntu下交换Alt和Ctrl (适用于任何按键修改)

    在 Ubuntu 下交换Alt和Ctrl键: sudo vim /usr/share/X11/xkb/keycodes/evdev 或者用系统默认编辑器打开: sudo xdg-open /usr/s ...

  7. Python的类和继承

    一.类的封装: 封装将类的信息隐藏在类内部,不允许外部直接修改该类的变量,只能通过该类提供的方法来实现对隐藏信息的操作和访问 class Boss(): # 类的公共属性 level=1 # 类的初始 ...

  8. OSPF的五种报文

    OSPF的五种报文 Hello报文 DD(Database Description)数据库描述报文 LSR(LinkState Request)链路状态请求报文 LSU(LinkState Updat ...

  9. idea使用技巧、心得1

    0.安装idea之后的准备 (1) 永久快乐使用:在我的博客搜索安装idea关键词既可 (2) 取消更新: (3) idea 官网的关于idea的使用手册:https://www.jetbrains. ...

  10. 企业应用架构研究系列十九：Docker开发环境

    软件行业流行这样一个说法,由于Docker 技术的成熟和该技术被广大厂商的普遍应用,成就了微服务领域的快速成长,衍生了云原生技术和公有云的进一步推广.我个人认为Dockers 技术.微服务技术.云原生 ...