jQuery实现倒计时计时器

最新推荐文章于 2024-08-02 13:35:44 发布

henouren

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量2.6k

点赞数 1

分类专栏：开发 js jQuery web前端文章标签：计时器 jQuery js 前端 html

web前端同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

开发

22 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

本文转载自 jquery 做一个小的倒计时效果

在实际运用中，经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery倒计时实现</title>
		<style type="text/css">
			.shop_list ul li{
				display: inline-block;
				list-style: none;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div class="shop_list" id="shop_list">
			<ul>
				<li>
					<img src="img/index/zixun1.jpg"/>
					<div class="listItem">
						<h5>小米手机 Note 顶配版</h5>
						<p>全网通 香槟金 移动联通<br/>双4G手机 双卡双待</p>
						<em>￥2998<i>起</i></em>
						<span class="time" data-starttime="1445982375" data-endtime="1446350400"></span>
					</div>
				</li>
				<li>
					<img src="img/index/zixun1.jpg"/>
					<div class="listItem">
						<h5>小米手机 Note 顶配版</h5>
						<p>全网通 香槟金 移动联通<br/>双4G手机 双卡双待</p>
						<em>￥2998<i>起</i></em>
						<span class="time" data-starttime='1445982375' data-endtime='1446350400'></span>
					</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="js/lib/jquery-1.10.1.min.js" ></script>
	<script type="text/javascript">
		$(function(){
			//找到商品列表以及时间显示span
		    var abj = $("#shop_list"),
		        timeObj = abj.find('.time');
		    //获取开始时间
		    var starttime = timeObj.data('starttime');
		    
		    // 定时器函数
		    function actionDo(){
		        return setInterval(function(){
		            timeObj.each(function(index, el) {
		            	//surplusTime为活动剩余开始时间
		                var t = $(this),
		                    surplusTime = t.data('endtime') -starttime;
		                //若活动剩余开始时间小于0，则说明活动已开始
		                if (surplusTime <= 0) {
		                    t.html("活动已经开始");
		                } else{
		                //否则，活动未开始，将剩余的时间转换成年，月，日，时，分，秒的形式
		                    var year = surplusTime/(24*60*60*365),
		                        showYear = parseInt(year),
		                        month = (year-showYear)*12,
		                        showMonth = parseInt(month),
		                        day = (month-showMonth)*30,
		                        showDay = parseInt(day),
		                        hour = (day-showDay)*24,
		                        showHour = parseInt(hour),
		                        minute = (hour-showHour)*60,
		                        showMinute = parseInt(minute),
		                        seconds = (minute-showMinute)*60,
		                        showSeconds = parseInt(seconds);
		                    t.html("");
		                    //设置输出到HTML的格式并输出到HTML
		                    if (showYear>0) {
		                        t.append("<span>"+showYear+"年</span>")
		                    };
		                    if (showMonth>0) {
		                        t.append("<span>"+showMonth+"月</span>")
		                    };
		                    if (showDay>0) {
		                        t.append("<span>"+showDay+"天</span>")
		                    };
		                    if (showHour>=0) {
		                        t.append("<span>"+showHour+"小时</span>")
		                    };
		                    if (showMinute>=0) {
		                        t.append("<span>"+showMinute+"分钟</span>")
		                    };
		                    if (showSeconds>=0) {
		                        t.append("<span>"+showSeconds+"秒</span>")
		                    };
		                };
		            });
		            starttime++;
		        },1000); // 设定执行或延时时间
		    };
		    // 执行它
		    actionDo();
		});
	</script>
</html>

实现效果：

henouren

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现倒计时计时器

本文转载自 jquery 做一个小的倒计时效果在实际运用中，经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。 jquery倒计时实现 .shop_list ul li{ display: inline-block; list-style: none; width: 300px; }
复制链接

扫一扫

专栏目录