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> ...
随机推荐
- JVM类加载以及执行的实战
前几篇文章主要是去理解JVM类加载的原理和应用,这一回讲一个可以自己动手的例子,希望能从头到尾的理解类加载以及执行的整个过程. 这个例子是从周志明的著作<深入理解Java虚拟机>第9章里抄 ...
- linux下部署php项目-Apache、php、mysql关联
linux下部署php项目环境可以分为两种,一种使用Apache,php,mysql的压缩包安装,一种用yum命令进行安装. 使用三种软件的压缩包进行安装,需要手动配置三者之间的关系.apache和p ...
- day_ha配置文件
流程图: 代码 #!/sur/bin/env python # -*- coding: utf-8 -*- #{"backend": "www.oldboy.org&qu ...
- MySQL 5.7中 performance_schema 替代 show profile 命令
本文出处:http://www.cnblogs.com/wy123/p/6979499.html show profile 命令用于跟踪执行过的sql语句的资源消耗信息,可以帮助查看sql语句的执行情 ...
- Nmap绕过防火墙&脚本的使用
Nmap是用于端口扫描,服务检测,甚至是漏洞扫描等多种功能的强大工具.Nmap从入门到高级覆盖了许多基础的概念和命令,在这篇文章的第二部分,我将提及Nmap一些高级的技术. 防火墙和入侵检测系统(ID ...
- php面向对象1
类和对象的关系 首先看一段代码 var_dump()后的结果 注意 一个对象系统自动分配一个对象标识符!
- html5中cookie介绍,封装以及添加,获取,删除
cookie是储存在用户本地终端上的数据. 在我们登陆网站时有记录密码,也有时间限制比如说7天,5天等等这都是我们利用cookie来写的, 这就是利用了cookie的会话周期,但cookie同时又是不 ...
- .NET链接Oracle 参数绑定问题
在.NET项目中链接Oracle使用的驱动是 Oracle.ManagedDataAccess.dll ,这里下载 所遇到的问题 使用存储过程一个参数没有问题,发现两个或两个以上会有参数没传过来的现象 ...
- Linux下的视频字幕编辑
一.Linux下的字幕编辑软件 常用的有subtitleeditor, gnome-subtitles, gaupol 1.gnome-subtitles:不支持多字幕文件批量处理2.gaupol:全 ...
- Apache和PHP环境配置
最近闲来想学习一下PHP. 工欲善其事,必先利其器.我的PHP环境配置了三遍,才安装成功. 下面就分享一下我的安装经验. 1.Apache2.4,PHP5.6,MySql5.6这些都是从官网下载的. ...