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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery冲突问题解决方法
Jan 19 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
php之字符串变相相减的代码
2007/03/19 PHP
PHP合并静态文件详解
2014/11/14 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
phpinfo的知识点总结
2019/10/10 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
使用Firebug对js进行断点调试的图文方法
2011/04/02 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python检测生僻字的实现方法
2016/10/23 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
怎么快速自学python
2020/06/22 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
离婚协议书怎样才有法律效力
2014/10/10 职场文书
师范生见习报告
2014/10/31 职场文书
工作年限证明模板
2014/11/01 职场文书
行政主管岗位职责
2015/02/03 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
工程项目合作意向书
2015/05/08 职场文书
亮剑观后感500字
2015/06/05 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python