基于javascript实现的购物商城商品倒计时实例


Posted in Javascript onDecember 11, 2016

话不多说,下面跟着小编一起来看下实例代码吧

Js:

/**
 * Author: Black_Jay郗
 * downCount: 时间转换 倒计时
 */
(function ($) {
  $.fn.downCount = function (options, callback) {
    var settings = $.extend({
        date: null,
        offset: null
      }, options);
    if (!settings.date) {
      $.error('Date is not defined.');
    }
    if (!Date.parse(settings.date)) {
      $.error('Incorrect date format, it should look like this, 12/24/2012 12:00:00.');
    }
    var container = this;
    var currentDate = function () {
      var date = new Date();
      /*var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
      var new_date = new Date(utc + (3600000*settings.offset));*/
      return date;
    };
    function countdown () {
      var target_date = new Date(settings.date),
        current_date = currentDate();
      var difference = target_date - current_date;
      if (difference < 0) {
        clearInterval(interval);//取消 setInterval() 函数设定的定时执行操作
        if (callback && typeof callback === 'function') callback();
        return;
      }
      var _second = 1000,
        _minute = _second * 60,
        _hour = _minute * 60,
        _day = _hour * 24;
      var days = Math.floor(difference / _day),
        hours = Math.floor(((difference % _day) / _hour) + (days*24)),
        minutes = Math.floor((difference % _hour) / _minute),
        seconds = Math.floor((difference % _minute) / _second);
        days = (String(days).length >= 2) ? days : '0' + days;
        hours = (String(hours).length >= 2) ? hours : '0' + hours;
        minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes;
        seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
      container.find('.hours').text(hours);
      container.find('.minutes').text(minutes);
      container.find('.seconds').text(seconds);
    };
    var interval = setInterval(countdown, 1000);
  };
})(jQuery);

html:

<!-- 倒计时显示Star -->
<p class="countdown">
  <span class="hours">00</span>:
  <span class="minutes">00</span>:
  <span class="seconds">00</span>
</p>
<!-- 倒计时End -->

最后输入你想要的结束时间

JS:

$('.countdown').downCount({
  date: '11/09/2016 13:45:00',
  offset: +10
}, function () {
  alert('秒杀已结束');
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
javascript中的隐式调用
Feb 10 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 #Javascript
jquery滚动条插件(可以自定义)
Dec 11 #Javascript
jquery实现简单的瀑布流布局
Dec 11 #Javascript
js倒计时显示实例
Dec 11 #Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 #Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 #Javascript
JavaScript获取服务器时间的方法详解
Dec 11 #Javascript
You might like
php防止网站被攻击的应急代码
2015/10/21 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
JavaScript实现职责链模式概述
2018/01/25 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
微信公众号token验证失败解决方案
2019/07/22 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
python eventlet绿化和patch原理
2020/11/21 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
职称自我鉴定
2013/10/15 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
教师群众路线心得体会
2014/11/04 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
三八节活动主持词
2015/07/04 职场文书