jquery实现倒计时小应用


Posted in jQuery onSeptember 19, 2017

 本文实例为大家分享了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();
});

 总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
jQuery选择器之子元素选择器详解
Sep 18 #jQuery
You might like
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
改进Django中的表单的简单方法
2015/07/17 Python
Flask之flask-script模块使用
2018/07/26 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python中re模块知识点总结
2021/01/17 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
承诺书模板
2014/08/30 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
统计员岗位职责范本
2015/04/14 职场文书
开除员工通知
2015/04/22 职场文书
家装电话营销开场白
2015/05/29 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
话题作文之成长
2019/12/09 职场文书