jQuery实现倒计时计时器

本文转载自 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(){//找到商品列表以及时间显示spanvar 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的格式并输出到HTMLif (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>

实现效果：

jQuery实现倒计时计时器相关推荐

jquery实现倒计时
1 <html> 2 <head> 3 <meta charset="utf-8"/> 4 <title>jquery实现倒计时&l ...
jQuery自适应倒计时插件
jQuery自适应倒计时插件在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
jq倒计时html源码,jQuery实现倒计时功能
定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被 ...
JavaScript 实现页面内时间实时倒计时计时器内附完整文件欢迎调用(可用于抢购倒计时,记录恋爱纪念日总时长等)输出对应的天数小时分钟秒数
JavaScript 实现页面内时间倒计时计时器可用于抢购倒计时,记录恋爱纪念日总时长等输出对应的天数小时分钟秒数注意:在下一个文章中将公布一个纪念日成品代码,欢迎各位来学习(复制) 第一步:构 ...
jquery.countdown 倒计时插件的学习
1.第一种简单的使用第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...
Android课程设计倒计时app,999倒计时计时器课程设计.docx
倒计时计时器倒计时计时器的用途很广泛.它可以用做定时,控制被定时的电器的工作状态,实现定时开或者定时关,最长定时时间为 999 分钟.它还可以用做倒计时记数,最长记时时间为999 秒, 有三位数码 ...
Flutter学习之倒计时计时器
1.自定义倒计时计时器控件: import 'dart:async'; import 'package:flutter/material.dart';final TextStyle _availabl ...
【毕业设计】51-基于Multisim的篮球比赛24秒倒计时计时器的设计（仿真工程+相关芯片资料+答辩论文）
typora-root-url: ./ [毕业设计]51-基于Multisim的篮球比赛24秒倒计时计时器的设计(仿真工程+相关芯片资料+答辩论文) 文章目录 typora-root-url: ./ ...
C#上位机——倒计时计时器
C#工控上位机--倒计时计时器第一步:找出需要的工具第二步:对工具进行布局第三步:修改各个工具的属性 using System.Collections.Generic; using System ...

jQuery实现倒计时计时器

jQuery实现倒计时计时器相关推荐

最新文章

热门文章