基于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 相关文章推荐
JS实现切换标签页效果实例代码
Nov 01 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
js单例模式的两种方案
2013/10/22 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
python 链接和操作 memcache方法
2017/03/04 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
甲方资料员岗位职责
2013/12/13 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
汉语言文学职业规划
2014/02/14 职场文书
大学运动会入场词
2014/02/22 职场文书
授权委托书范本
2014/04/03 职场文书
献爱心倡议书
2014/04/14 职场文书
南京青奥会口号
2014/06/12 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
财务个人年度总结范文
2015/02/26 职场文书