基于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 拾漏补遗
Dec 27 Javascript
浅析node.js中close事件
Nov 26 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
JavaScript 异步调用
Oct 25 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
浅析vue-router实现原理及两种模式
Feb 11 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 fread读取文件注意事项
2016/09/24 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python得到电脑的开机时间方法
2018/10/15 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Tensorflow 实现释放内存
2020/02/03 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
怎样声明接口
2014/09/19 面试题
善意的谎言事例
2014/02/15 职场文书
家具促销活动方案
2014/02/16 职场文书
优秀团员自我评价
2015/03/10 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技