用js实现倒计时效果
首先获得两个时间的时间戳
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实现倒计时效果的更多相关文章
- JS实现倒计时效果,并退出系统
背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...
- js实现倒计时效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
- (转)js实现倒计时效果(年月日时分秒)
原文链接:http://mengqing.org/archives/js-countdown.html 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用.(用的是张鑫旭写的一个倒计时,稍作 ...
- js 实现倒计时效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js日期倒计时效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js制作倒计时效果
该程序可以计算任意指定的两个日期中间的差值. 本例子的指定日期是2017年1月1日,当前时间是2016年10月21日:计算它们之间的差值,在网页上显示如图所示: 关键部分代码: var nowtime ...
- js 验证码倒计时效果
function settime(obj) { if(second == 0){ obj.removeAttribute("disabled"); obj.value=" ...
- js实现倒计时及时间对象
JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- Java基础—private、this关键字及get/set方法
Java基础-private\this关键字以及get\set方法 1.private关键字 private关键字通常用来修饰成员变量用来保护原有数据的安全,比如在下面学生类中 然后在测试类中调用成员 ...
- springcloud学习04- 断路器Spring Cloud Netflix Hystrix
依赖上个博客:https://www.cnblogs.com/wang-liang-blogs/p/12072423.html 1.断路器存在的原因 引用博客 https://blog.csdn.ne ...
- python 实现批量md转word
# qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 #md批量转word import os def auto_md_to_docx(f ...
- python 自定义加密与解密
import tkinter import webbrowser import re #本程序是一个中文字符和中文检测工具 #中文字符自己添加,我只添加了一点 #输入字符串,点击检查文本即可判断有没有 ...
- Java Study two
由于前段时间再做.NET 项目没做更新,今天简单的学习java项目的新建和入门的学习 今日目标 基础语法了解 新建第一个java项目 新建第一个项目Class ->HelloWorld 运行并输 ...
- 07模块化设计之top_down
一设计功能:(一)用两个分频模块,实现16分频,且让输入a 和b在16个系统时钟内,相与一次. (二)模块化设计思想(结构化思维) 拆分,即把一个系统划分成多个功能模块,控制模块,组合模块.然后从功能 ...
- 讲讲 kafka 维护消费状态跟踪的方法?
大部分消息系统在 broker 端的维护消息被消费的记录:一个消息被分发到 consumer 后 broker 就马上进行标记或者等待 customer 的通知后进行标记.这 样也可以在消息在消费后立 ...
- python 基础数据类型汇总
数据类型小结(各数据类型常用操作) 一.数字/整型int int()强行转化数字 二.bool类型False&True bool()强行转化布尔类型. 0,None,及各个空的字符类型为Fal ...
- Protected 修饰符
Protected 修饰的变量和方法,在子类中可见.所有的变量和方法,子类都继承( private 也是).父类的变量和方法在子类实例中预留内存空间. Private 成员不能被子类实例引用.构造方法 ...
- spring aop 源码解读之我见
spring aop 都是动态代理,分为jdk代理和cglib代理.默认的情况下,如果类有实现了接口,使用jdk代理.如果没有实现接口,则使用cglib代理.在下面的代码中,我会标明对应的这段代码. ...