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实现div跟随鼠标移动
Aug 20 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
详解jQuery中的easyui
Sep 02 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
帝国cms常用标签汇总
2015/07/06 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery的one()方法用法实例
2015/01/19 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
交通安全演讲稿
2014/01/07 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
党课培训主持词
2014/04/01 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
经济管理专业求职信
2014/06/09 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技