JS - 实现简单易用的倒计时 x 天 x 时 x 分 x 秒
<script>
(function () {
var tian = document.getElementsByClassName('JS-tian')[0];
var shi = document.getElementsByClassName('JS-shi')[0];
var fen = document.getElementsByClassName('JS-fen')[0];
var miao = document.getElementsByClassName('JS-miao')[0];
var endTime = new Date('2117/07/12 23:59:59').getTime() + 1000;
var interval = null;
interval = setInterval(function () {
var syhm = endTime - Date.now(); // 剩余毫秒
if (syhm >= 0) {
tian.innerText = Math.floor(syhm / 1000 / 60 / 60 / 24);
shi.innerText = Math.floor(syhm / 1000 / 60 / 60 % 24);
fen.innerText = Math.floor(syhm / 1000 / 60 % 60);
miao.innerText = Math.floor(syhm / 1000 % 60);
} else {
clearInterval(interval);
}
}, 0);
})();
</script>
<div>
距结束还剩:<span class="JS-tian"></span>天<span class="JS-shi"></span>时<span class="JS-fen"></span>分<span class="JS-miao"></span>秒
</div>
JS - 实现简单易用的倒计时 x 天 x 时 x 分 x 秒的更多相关文章
- js学习笔记之日期倒计时(天,时,分,秒)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- js网页倒计时功能(天,时,分,秒)
给定任何一个时间,然后实现现在到那个时间的倒计时. 下面的例子是显示现在到2019年8月1号0时0分的倒计时: <div class="list"> <span ...
- javascript - 活动倒计时(天、时、分、秒)
计数时: 结束时: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Android倒计时:计算两个时间将得到的时间差转化为倒计时(xx时xx分xx秒格式)
首先是一个自定义控件: public class RushBuyCountDownTimerView extends LinearLayout { // 小时,十位 private TextView ...
- vue.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js如何比较两个日期之间相差数(天、时、分、秒)
首先,我们模拟一个例子 引入js文件 <script type="text/javascript" src="jquery.min.js">< ...
- js计算时间差,包括计算,天,时,分,秒
收集两个计算时间差的计算方法代码片段: var date1=new Date(); //开始时间 var date2=new Date(); //结束时间 var date3=date2.getTim ...
- 【JavaScript 实现倒计时(天、时、分、秒)】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- MySQL存储汉字
之前在网上查找了很多方法,排在前排的都是修改配置文件my.ini的,没有成功,后来找到了一个解决方法: 在建表的时候,在语句后面加上段"engine = innodb default cha ...
- Jquery操作Table
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...
- React+Redux开发实战项目【美团App】,没你想的那么难
README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...
- 解决Ubuntu开关机动画不正常方法
联想的笔记本,显卡NVIDIA GT218M,默认使用开源的驱动,但挂起后,再唤醒就黑屏回不到桌面. 1.解决办法:安装NVIDIA专有驱动 $sudo apt-get install nvidia- ...
- css__金属质感的文字
金属质感的文字 网上看到的优秀思想!神奇的css~~~~ css div.a { width: 300px; text-align: center; color: white; background: ...
- GitHub:多人协作下的分支处理
GitHub上的团队协作 远程信息 git remote:查看远程库的信息 git remote -v:查看远程库的详细信息 推送分支 git push origin 要推送的分支:比如git pus ...
- Intel VT-x 处于禁用状态
出现错误"此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态"的问题,如下图. Intel VT-x 即Virtualization Technology, ...
- 2017最新技术java高级架构、千万高并发、分布式集群、架构师入门到精通视频教程
* { font-family: "Microsoft YaHei" !important } h1 { color: #FF0 } 15套java架构师.集群.高可用.高可扩展. ...
- PHP安装phpredis扩展
phpredis 的github地址:https://github.com/nicolasff/phpredis第一步:切换到指定的目录,然后wget https://github.com/nicol ...
- JAVA类型擦除
Java泛型-类型擦除 一.概述 Java泛型在使用过程有诸多的问题,如不存在List<String>.class, List<Integer>不能赋值给List<Num ...