基于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 事件小结 表格区别
Aug 13 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
javascript 解析url的search方法
Feb 09 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
vue+axios全局添加请求头和参数操作
Jul 24 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 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php创建多级目录的方法
2015/03/24 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JS中表单的使用小结
2014/01/11 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Python远程linux执行命令实现
2020/11/11 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
怎样写留学自荐信
2013/11/11 职场文书
家长学校实施方案
2014/03/15 职场文书
化工操作工岗位职责
2014/04/29 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
运动会宣传稿50字
2015/07/23 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python