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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
Vue SSR 组件加载问题
May 02 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 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抽象方法和抽象类实例分析
2016/12/07 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
实习生自荐信范文分享
2013/11/27 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
国旗下的演讲稿
2014/05/08 职场文书
岗位说明书标准范本
2014/07/30 职场文书
销售2014年度工作总结
2014/12/08 职场文书
优秀员工推荐材料
2014/12/20 职场文书
解除处分决定书
2015/06/25 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python