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使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
node.js基于express使用websocket的方法
2017/11/09 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
浅析VUE防抖与节流
2020/11/24 Vue.js
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 对类的成员函数开启线程的方法
2019/01/22 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
国贸专业个人求职信范文
2014/01/08 职场文书
2014年三万活动总结
2014/04/26 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
代理人委托书
2014/09/16 职场文书
《刷子李》教学反思
2016/02/20 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python