js时间倒计时
看了网上的其他的例子,觉得写的都有点复杂,不好理解,于是自己动手写了个。
本来想封装成jquery插件,但是觉得因为功能很简单,没有必要做成jquery插件,引用的时候不需要引入jqery库,这里直接用的原生js的方法。
TimeDown.js
/*
时间倒计时插件
TimeDown.js
*/
function TimeDown(id, endDateStr) {
//结束时间
var endDate = new Date(endDateStr);
//当前时间
var nowDate = new Date();
//相差的总秒数
var totalSeconds = parseInt((endDate - nowDate) / 1000);
//天数
var days = Math.floor(totalSeconds / (60 * 60 * 24));
//取模(余数)
var modulo = totalSeconds % (60 * 60 * 24);
//小时数
var hours = Math.floor(modulo / (60 * 60));
modulo = modulo % (60 * 60);
//分钟
var minutes = Math.floor(modulo / 60);
//秒
var seconds = modulo % 60;
//输出到页面
document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
//延迟一秒执行自己
setTimeout(function () {
TimeDown(id, endDateStr);
}, 1000)
}
Html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>时间倒计时</title>
<script src="TimeDown.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="show">
</div>
<script type="text/javascript">
TimeDown("show", "2013-11-25 8:00:45");
</script>
</form>
</body>
</html>
显示效果:
还剩:2天19小时29分钟5秒
js时间倒计时的更多相关文章
- js实现倒计时及时间对象
JS实现倒计时效果代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- 根据后端传的时间前端js进行倒计时
一.故事背景: 1. 今天公司有个项目需求 2. 在前端页面实现一个倒计时功能 3. 初步设想:后端根据需求规定一个未来的时间,前端根据当前时间进行计算 4. 然后将时间格式化,时分秒的格式 5. 时 ...
- 倒计时的js实现 倒计时 js Jquery
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现倒计时(天数,时,分,秒)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <titl ...
- 使用html+css+js实现倒计时,开启你痛苦的倒计时吧
使用html+css+js实现倒计时,开启你痛苦的倒计时吧 效果图: 这是我痛苦的倒计时,呜呜呜 好啦,再痛苦还是要分享代码,代码如下,复制即可使用: <!DOCTYPE html> &l ...
- 用JS实现倒计时(日期字符串作为参数)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS实现倒计时效果,并退出系统
背景:由于单点登录后,一直在本系统操作,可是门户体统的会话失效时间有30分钟,所以30分钟后,需要重新登录系统才可以进行操作. 方法:想过在本系统中的每个操作都先跟门户系统进行交互,渠道refresh ...
随机推荐
- mysql metadata lock(三)
前言 MDL锁主要用来保护Mysql内部对象的元数据,通过MDL机制保证DDL与DML以及SELECT查询操作的并发.MySQL Meta Lock(一)和MySQL Meta Lock(二)已经讲了 ...
- DateTime , DateTime2 ,DateTimeOffset 之间的小区别
闲来无事列了个表比对一下这3兄弟之间还是有一点差距的╮(╯_╰)╭ DateTime DateTime2 DateTimeOffset 日期范围 1753-01-01到 9999-12-31 00 ...
- Mac上打开拷贝到移动硬盘里的文件提示“已经被osx使用不能打开”解决办法
在终端里面粘贴xattr -d com.apple.FinderInfo(此处按一下空格),然后把文件拖进终端窗口,按一下回车就好了
- linux运维常用命令及知识
1.查找当前目录下所有以.tar结尾的文件然后移动到指定目录: find . -name “*.tar” -exec mv {} ./backup/ ; 查找当前目录30天以前大于100M的LOG文件 ...
- WPF 程序Form自的控件自适应方式之一
<Window x:Class="MapEditor2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/ ...
- ixgbe rx_missed_errors
https://communities.intel.com/thread/54600?start=0&tstart=0 I am acquiring 800Mb/sec+ multicast ...
- linux下 ^M
在Linux下使用vi来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些“^M”.有几种方法可以处理. 注意:在Linux下,可以通过ctrl+v,ctrl+m,打出^M字符.而却,以 ...
- 【转】【收藏】LINQ学习心得分享--------(二)LINQ语法详解
原地址:http://blog.csdn.net/xuemoyao/article/details/8053444 通过上一章节的学习,相信大家已经掌握了学习LINQ的前期的准备知识.在这一节里, ...
- hdu-5933----hdu-5943
hdu-5933 思路: 贪心,首先要求总和是k的倍数,而又要求相邻,说明相邻的一块如果是sum/k的倍数,那么就地切割这样才能使操作数目最少; hdu-5934 思路: 强连通分量,可以找出强连通分 ...
- UESTC-第五届ACM趣味程序设计竞赛第四场(正式赛)--不完全解题报告
比赛链接: http://acm.uestc.edu.cn/contest.php?cid=230 A.Police And The Thief ---UESTC 1913 简单博弈,先假设在警察先走 ...