Javascript特效：距离某个时间倒计时

知识点

直接在 new Date(’····’)中加入时间可以自定义时间
Date()内置对象函数的灵活运用
parseInt()函数可解析一个字符串，并返回一个整数
number < 10 ? ‘0’ + number : number ;
时间转换

运行效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#time{font-size: 40px;color:red;text-align: center;padding: 100px;}</style>
</head>
<body>
<div id="time"></div>
<script>window.onload = function (ev) {var nowDate, nowTimes, lastTimes, lastSeconds, lastD, lastH, lastM, lastS;var time = document.getElementsByTagName('div')[0];// 1. 定义将来时间var preDate = new Date('2020/05/01 00:00:00');var preTimes = preDate.getTime();   // 获取目标日期距离1970年1月1日毫秒数// 2. 开启定时器setInterval(function () {// 3. 获取当前时间nowDate = new Date();// 4. 获取距离1970年1月1日毫秒数nowTimes = nowDate.getTime();// 5. 获取剩余毫秒数lastTimes = preTimes - nowTimes;// 6. 毫秒转换// ① 毫秒转换为秒lastSeconds = parseInt(lastTimes / 1000);// ② 通过秒转天、时、分、秒lastD = size(parseInt(lastSeconds / 3600 / 24));lastH = size(parseInt(lastSeconds / 3600 % 24));lastM = size(parseInt(lastSeconds / 60 % 60));lastS = size(parseInt(lastSeconds % 60));// 7. 将结果放入divtime.innerHTML = '距离五一放假还剩：' + lastD +'天' + lastH + '小时' + lastM + '分钟' + lastS + '秒！';}, 1000);function size(number){return number < 10 ? '0' + number : number ;}}</script>
</body>
</html>

Javascript特效：距离某个时间倒计时相关推荐

JavaScript实现距离指定时间还有多少天
/*** 获取距离指定时间还有多少天* @param {String | Number | Date} dateTime 日期时间* @example* ```javascript* getDista ...
JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数
JavaScript 实现页面内时间倒计时计时器可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制) 第一步:构 ...
javascript特效实现(4)——当前时间和倒计时效果
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body>当前时间:<p id="p1&quo ...
关于前端在vue中实现‘距离某个时间点的倒计时’问题：设置了间隔计算时间，刚开始有停顿。
//函数接受一个结束时间,单位为毫秒,算出当前距离结束时间点的时间,输出一个对象 //输出示例:{ // hourNum: '12', // minuteNum: '13', // secondNum ...
js 时间戳与时间格式的转化, xx天xx小时xx分倒计时,距离当前时间多久
目录一.时间戳和日期格式相互转化 (1) 获取时间戳 (2) 时间戳转化为日期格式 (3) 日期格式转换为时间戳二. XX天XX小时XX分倒计时三.距离当前时间的计算, 显示效果为3秒前,1小时 ...
html怎么实现时间倒计时,Javascript实现时间倒计时功能
本文实例为大家分享了js实现时间倒计时的具体代码,供大家参考,具体内容如下这里使用的是Date日期类日期类倒计时 window.οnlοad=function(){ var odiv=docume ...
html时间倒计时----定时器
html时间倒计时 <!doctype html> <html><head><meta charset="utf-8"></h ...
个性JavaScript特效页面大全
个性JavaScript特效页面大全 (在展示页面右键--查看源文件即为源码): 1:警报对话框篇 2:菜单导航篇 3:状态栏特效篇 4:浏览器篇 5:页面背景篇 6:页面导航篇 7:页面搜素篇 8: ...
JS与CSS交互及JavaScript 特效之四大家族
一.JS获取与CSS交互问题: (1)CSS样式有三种类型:行内样式.内部样式和外部样式 (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法和非行内样式获取法 ...
js 时间倒计时，开始时间到结束时间
封装一个倒计时函数,直接调用即可,时间格式为:2020-06-18 11:26:20 代码如下 : //时间倒计时函数,第一个值传id名字,第二个值传结束的时间function TimeDown(id ...

Javascript特效：距离某个时间倒计时

知识点

运行效果

代码

Javascript特效：距离某个时间倒计时相关推荐

最新文章

热门文章