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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
pandas带有重复索引操作方法
2018/06/08 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python发展史及网络爬虫
2019/06/19 Python
python根据多个文件名批量查找文件
2019/08/13 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
appium+python adb常用命令分享
2020/03/06 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
端口镜像是怎么实现的
2014/03/25 面试题
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
世界文化遗产导游词
2019/08/07 职场文书
多表查询、事务、DCL
2021/04/05 MySQL