基于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 相关文章推荐
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
chrome原生方法之数组
2011/11/30 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python判断输入日期为第几天的实例
2018/11/13 Python
django的ORM模型的实现原理
2019/03/04 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
幼儿园秋游活动方案
2014/01/21 职场文书
优秀护士先进事迹
2014/05/08 职场文书
机械系毕业生求职信
2014/05/28 职场文书
幼儿生日活动方案
2014/08/27 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书