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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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简介
2006/10/09 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP session会话的安全性分析
2011/09/08 PHP
php三元运算符知识汇总
2015/07/02 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
为python设置socket代理的方法
2015/01/14 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
python实现xlsx文件分析详解
2018/01/02 Python
python对XML文件的操作实现代码
2020/03/27 Python
python的Jenkins接口调用方式
2020/05/12 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
浅谈python出错时traceback的解读
2020/07/15 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
创联软件面试题笔试题
2012/10/07 面试题
环保小标语
2014/06/13 职场文书
2014年幼师工作总结
2014/11/22 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年检验科工作总结
2015/04/27 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书