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解析获取JSON数据
Apr 08 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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
写一个用户在线显示的程序
2006/10/09 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
python实现淘宝秒杀脚本
2020/06/23 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
海飞丝广告词
2014/03/20 职场文书
建设工地安全标语
2014/06/07 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers