html5在线天数计时器,JS实现动态倒计时功能(天数、时、分、秒)
写在前面:
实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒。由于得到的时间不能直接运算,可以采用object.getTime()方法转化成相同类型进行运算。
相关说明:
如果想要显示界面好看些,可以添加一下样式。
function show(){
//获取目的日期
var myyear=document.getElementById("year").value;
var mymonth=document.getElementById("month").value-1;
var myday=document.getElementById("day").value;
var myhour=document.getElementById("hour").value;
var myminute=document.getElementById("minute").value;
var mysecond=document.getElementById("second").value;
var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
// var time=new Date(myyear,mymonth,myday,myhour,myminute,mysecond).getTime();
//获取当前时间
var nowTime=Date.now();
// var nowTime=new Date().getTime();
//获取时间差
var timediff=Math.round((time-nowTime)/1000);
//获取还剩多少天
var day=parseInt(timediff/3600/24);
//获取还剩多少小时
var hour=parseInt(timediff/3600%24);
//获取还剩多少分钟
var minute=parseInt(timediff/60%60);
//获取还剩多少秒
var second=timediff%60;
//输出还剩多少时间
document.getElementById("1").innerHTML=day;
document.getElementById("2").innerHTML=hour;
document.getElementById("3").innerHTML=minute;
document.getElementById("4").innerHTML=second;
setTimeout(show,1000);
if(timediff==0){return;}
}
Document
input{width:50px;height: 20px;border:1px solid black;}
.time1 span{display:inline-block;width:40px;height: 20px;}
目的日期:
年
月
日
时
分
秒
天
时
分
秒
写在最后:倒计时的难点主要是时间格式和数字格式的转换,转换时除了object.getTime()方法还有Number(object)方法,大家可以尝试使用一下。
总结
以上所述是小编给大家介绍的JS实现动态倒计时功能(天数、时、分、秒),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
时间: 2019-12-10
html5在线天数计时器,JS实现动态倒计时功能(天数、时、分、秒)相关推荐
- JS获取日期(年/月/日/时/分/秒)格式转化
因为用到JS倒计时,所以就把网上搜到的各种关于日期的整理了一下,有个印象,以后再用到,可以直接看自己的,方便很多. var myDate = new Date(); 以下都是在myDate的基础上得到 ...
- JS获取日期(年/月/日/时/分/秒)以及完整格式转化(补0)
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位 ...
- 简单几行javascript代码,实现动态倒计时功能
2019独角兽企业重金招聘Python工程师标准>>> js实现动态倒计时功能 * a是从后台接收到的时间戳,需转换成毫秒单位 <div>距明年还有:<span i ...
- JS实现倒计时精确到天数,时,分,秒或者精确到时、分、秒(小时数累加)
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>JS ...
- (常用代码)原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式 <!-- 构建 HTML --> <div class="timing" ...
- js将当前时间格式化为年-月-日 时:分:秒
利用js的Date()对象,将系统当前时间格式化为年-月-日 时:分:秒.也可以自己定义格式.(做项目时遇到这个问题.本来想百度一个用,哎,网上的结果太乱了,于是自己写一个) 代码如下: <!D ...
- 使用js定时器实现倒计时功能
先看看效果图: 倒计时使用的技术主要就是js中的定时器. 首先还是先理一下思路,先要确定一个具体的时间,你想从哪个时间到哪个时间,我这个就是从现在的时间到2022年过年,然后使用data对象获取天.小 ...
- js版的倒计时(月-日-时-分-秒-毫秒)
大早上好瞌睡,爬起来接着写. 今天做的倒计时用了三种方法 过程和思路: 设置未来的时间.(使用在new Date()后面直接设置时间的方法) 获取当前的时间( newDate() ) 用未来时间减去现 ...
- 小程序实现天/时/分/秒倒计时效果
一.普通倒计时 <view><view class="start-time"><view class="day">{{day ...
最新文章
- OC 的反射机制以及使用场景
- 简单易懂棒棒哒的视频传输工具!
- MongoDB for PHP扩展操作类
- IT基础设施最佳实践ITIL
- SPP-net论文笔记
- nginx 开展对RT5350
- UVa272 - Tex Quotes
- 7 月编程语言指数榜:Python 与 Java 逐渐拉开差距
- Javasript中Date日期常用用法(正则、比较)
- photoshop基础视频教程 [4G]
- Python批量自定义文件夹图标
- Windbg内核调试(大杂烩)
- matlab画模拟信号图,【 MATLAB 】MATLAB 实现模拟信号采样后的重建(一)
- 数值分析与算法 (2)
- Python爬取《你好李焕英》猫眼实时票房
- PAT | 算法笔记 | 简单模拟
- C语言 switch语句实现不同分数段划分不同等级
- 编码实现字符串类CNString实现运算符重载
- 文本的检测、识别实战:使用 Tesseract 进行 OpenCV OCR 和文本识别
- 关于Synaptics.exe感染型病毒
热门文章
- HDU - 5542 The Battle of Chibi(树状数组+DP)
- Java 遍历List的4种方式
- C# Cad二次开发新手入门系列教程(二)Line对象
- 2019-一个基于CNN的多模式工具来保证视频的正确性A MULTIMODAL CNN- BASED TOOL TO CENSURE INAPPROPRIATE VIDEO SCENES
- 正则校验非中文 加长度校验
- 暴风魔镜VR项目实战(凝视)
- EasyUI DataGrid 多级表头设置
- 《rust程序设计、入门和进阶》
- m基于FPGA的MSK调制解调系统verilog开发,并带FPGA误码检测模块和matlab仿真程序
- left join on and 和 left join on where的区别