JS和jQuery倒计时插件

来源:https://www.sucaihuo.com/js/2802.html 2017-08-22 22:02浏览(725) 收藏

一款JS倒计时插件和一款jQuery倒计时插件,可以自由设置倒计时的时间点,格式为年/月/日 时:分:秒,倒计时样式也可以自由调整。
JS和jQuery倒计时插件
分类:日期时间 > 倒计时 难易:初级
查看演示 下载资源: 29 下载资源 下载积分: 20 积分

页面的head部分,简单设置页面元素的样式,代码如下:

*{margin: 0;padding: 0;font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
div{
	float:left;
	width: auto;
	height: 100px;
	background: #0c2345;
	font-size: 60px;
	color: #fff;
	line-height: 100px;
	text-align: center;
	font-weight: 500;
	border-radius: 5px;
	margin-right: 10px;
	padding-left:20px;
	padding-right:20px;
}

页面的body部分,需设置好天、时、分、秒的div容器,代码如下:

<div id="day">--</div>
<div id="hours">--</div>
<div id="minutes">--</div>
<div id="seconds">--</div>

页面的底部,需引入倒计时插件time.js,设置倒计时的相关参数,代码如下:

<script type="text/javascript" src="js/time.js"></script>
<script type="text/javascript">
var	day = document.getElementById('day');
var	hours = document.getElementById('hours');
var	minutes = document.getElementById('minutes');
var seconds = document.getElementById('seconds');
// 日 时 分 秒的dom对象
countDownTime.init('2018/08/08 18:38:08', day, hours, minutes, seconds);
countDownTime.start();
</script>
标签: 倒计时计时器
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2