基于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将string类型转换int类型
Dec 09 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
js实现文字选中分享功能
Jan 25 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
node跨域请求方法小结
Aug 25 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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
PHPAnalysis中文分词类详解
2014/06/13 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
js密码强度校验
2015/11/10 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
使用python实现飞机大战游戏
2020/03/23 Python
python模拟实现分发扑克牌
2020/04/22 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
安全生产实施方案
2014/02/23 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
退休欢送会致辞
2015/07/31 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle
Java完整实现记事本代码
2022/06/16 Java/Android