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

 更新时间:2016年12月11日 16:46:35   作者:Black_Jay  
本文主要介绍了基于javascript实现的购物商城商品倒计时实例,代码详细,可直接复制试试看效果。需要的朋友可以参考借鉴

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

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('秒杀已结束');
});

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

相关文章

  • js+html+css实现鼠标移动div实例

    js+html+css实现鼠标移动div实例

    移动div对于很多的网有们来说是一件很熟悉的事了,本文老生长谈,用js实现鼠标移动div,希望大伙们可以举一反三,感兴趣的朋友可以参考下,或许本文对你有所帮助
    2013-01-01
  • js遍历json的key和value的实例

    js遍历json的key和value的实例

    下面小编就为大家带来一篇js遍历json的key和value的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • javascript DOM实用学习资料

    javascript DOM实用学习资料

    比较详细的实例分析了dom的一些常用方法
    2008-09-09
  • 性能优化篇之Webpack构建速度优化的建议

    性能优化篇之Webpack构建速度优化的建议

    这篇文章主要介绍了性能优化篇之Webpack构建速度优化的建议,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript数组塌陷实例解析

    JavaScript数组塌陷实例解析

    这篇文章主要为大家介绍了JavaScript数组塌陷实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • javascript递归回溯法解八皇后问题

    javascript递归回溯法解八皇后问题

    网上看到许多关于八皇后算法的文章,很少能看到使用javascript来实现的,今天就给大家使用javascript来解决下这个问题,有需要的小伙伴可以参考下。
    2015-04-04
  • js将html页面转为pdf两种方法

    js将html页面转为pdf两种方法

    最近遇到的需求,把html转成pdf文件下载导出,下面这篇文章主要给大家介绍了关于js将html页面转为pdf的两种方法,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-08-08
  • vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记!

    vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件附踩坑日记!

    以目前的vscode版本来说,作者并没有开放访问本地媒体权限,所以插件市场里面的所有语音相关插件也并没有直接获取vscode的媒体权限,这篇文章主要介绍了vscode录音及语音实时转写插件开发并在工作区生成本地mp3文件 踩坑日记!,需要的朋友可以参考下
    2023-05-05
  • 与iframe进行跨域交互的解决方案(推荐)

    与iframe进行跨域交互的解决方案(推荐)

    这篇文章主要介绍了与iframe进行跨域交互的解决方案,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • Google的跟踪代码 动态加载js代码方法应用

    Google的跟踪代码 动态加载js代码方法应用

    Google的跟踪代码 动态加载js代码,需要的朋友可以参考下
    2012-11-11

最新评论