jquery制做精致的倒计时特效


Posted in Javascript onJune 13, 2016

本文实例为大家分享了jquery做一个小的倒计时效果的代码,供大家参考,具体内容如下

html:

<div id="shop_rec">
 <ul class="cf">
  <li>
   <img src="image/goods.jpg" alt="小米 Note 顶配版" />
   <div>
    <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="image/goods.jpg" alt="小米 Note 顶配版" />
   <div>
    <h5>小米 Note 顶配版</h5>
    <p>全网通 香槟金 移动联通<br />双4G手机 双卡双待</p>
    <em>¥2998<i>起</i></em>
    <span class="time" data-starttime="1445912375" data-endtime="1436350400"></span>
   </div>
  </li>
 </ul>
</div>

jquery:

$(function(){
 var abj = $("#shop_rec"),
  timeObj = abj.find('.time');
 var starttime = timeObj.data('starttime');

 // 定时器函数
 function actionDo(){
  return setInterval(function(){
   timeObj.each(function(index, el) {
    var t = $(this),
     surplusTime = t.data('endtime') -starttime;
    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("");
     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();
});

本文由FungLeo原创

本文地址:http://blog.csdn.net/fungleo/article/details/49446887

总结

不是特别优秀,但是小的应用完全没有问题。

精彩专题分享:js实现倒计时功能汇总

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
详解JS数组方法
Nov 20 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 #Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 #Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 #Javascript
Bootstrap表单Form全面解析
Jun 13 #Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 #Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 #Javascript
多种jQuery绑定事件的实现方式
Jun 13 #Javascript
You might like
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
机器学习实战之knn算法pandas
2019/06/22 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
appium+python adb常用命令分享
2020/03/06 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
元旦晚会主持词
2014/03/24 职场文书
老龄工作先进事迹
2014/08/15 职场文书
离婚财产处理协议书
2014/09/30 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
办公室文员岗位职责
2015/02/04 职场文书
校长师德表现自我评价
2015/03/04 职场文书
迎新年主持词
2015/07/06 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python