jQuery倒计时插件

jQuery倒计时插件,主要用来限时购买

 
  
1 /*
2 * 倒计时插件,主要用来限时购买
3 * By wayshan 版本1.0
4 * 使用方法:
5 * $(function(){
6 * $("#ElementId").countdown({
7 * Edate:"2012-12-21 15:14:23"
8 * });
9 * })
10
11   */
12 ;( function ($){
13 $.fn.countdown = function (options){
14 if ( this .length == 0 ){
15 return false ;
16 }
17 return this .each( function (){
18 var Default = {
19 Sdate: null , // 开始时间(格式为“2010-10-10 10:10:10”)可以设置为服务端的时间
20   Edate: null , // 结束日期(格式为“2010-10-10 10:10:10”)
21 callback: function (){
22 return false ;
23 }
24 },
25 _H_Text = ' 小时 ' ,
26 _M_Text = ' ' ,
27 _S_Text = ' ' ,
28 _lT = null ,
29 _cT = new Date(),
30 _eT = null ,
31 _elT = null ,
32 ctime = null ,
33 etime = null ,
34 DomId = null ,
35 _timeout = null ,
36 _gt = function (){
37 if (_lT == null ) {
38 _elT = (etime - ctime);
39 if (_elT < 0 ){
40 $( ' # ' + DomId).html( " <strong>0</strong> " + _H_Text + " :<strong>0</strong> " +
41 _M_Text + " :<strong>0</strong> " + _S_Text);
42 }
43 var _xT = Math.ceil(_elT / (24*60*60*1000));
44 _cT = parseInt(_cT.match( / \s(\d+)\D / )[ 1 ] * 3600 )
45 + parseInt(_cT.split( " : " )[ 1 ] * 60 ) + parseInt(_cT.split( " : " )[ 2 ]);
46 _eT = _xT * 24 * 3600 + parseInt(_eT.match( / \s(\d+)\D / )[ 1 ] * 3600 )
47 + parseInt(_eT.split( " : " )[ 1 ] * 60 ) + parseInt(_eT.split( " : " )[ 2 ]);
48 _lT = _elT / 1000;
49 }
50 if (_elT > 0 ) {
51 if (_lT >= 0 ) {
52 var _H = Math.floor(_lT / 3600 );
53 var _M = Math.floor((_lT - _H * 3600 ) / 60 );
54 var _S = (_lT - _H * 3600 ) % 60 ;
55 $( ' # ' + DomId).html( " <strong> " + _H + " </strong> " + _H_Text + " :<strong> "
56 + _M + " </strong> " + _M_Text + " :<strong> " + _S + " </strong> " + _S_Text);
57 _lT -- ;
58 } else {
59 clearInterval(_timeout);
60 if (s.callback && $.isFunction(s.callback)){
61 s.callback.call( this );
62 }
63 }
64 } else {
65 clearInterval(_timeout);
66 if (s.callback && $.isFunction(s.callback)){
67 s.callback.call( this );
68 }
69 }
70 },
71 strDateTime = function (str){
72 // 判断日期时间的输入是否正确,类型必须形如为:2011-01-01 01:01:01
73 var reg = / ^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$ / ;
74 var r = str.match(reg);
75 if (r == null ) return false ;
76 var d = new Date(r[ 1 ], r[ 3 ] - 1 ,r[ 4 ],r[ 5 ],r[ 6 ],r[ 7 ]);
77 return (d.getFullYear() == r[ 1 ] && (d.getMonth() + 1 ) == r[ 3 ] && d.getDate() == r[ 4 ]
78 && d.getHours() == r[ 5 ] && d.getMinutes() == r[ 6 ] && d.getSeconds() == r[ 7 ]);
79 }
80 var s = $.extend({}, Default, options || {});
81 DomId = this .id;
82 if (DomId == ' null ' ){
83 return ;
84 }
85 _eT = s.Edate;
86 if ( ! strDateTime(_eT)){
87 alert( ' 结束日期格式不正确 ' );
88 return false ;
89 }
90 if (s.Sdate != null ){
91 _cT = s.Sdate;
92 }
93 _cT = _cT.toString();
94 cdate = _cT.replace( / - / g, ' / ' );
95 _eT = _eT.toString();
96 edate = _eT.replace( / - / g, ' / ' );
97 ctime = new Date(cdate);
98 etime = new Date(edate);
99 _timeout = setInterval(_gt, 1000 )
100 });
101 }
102 })(jQuery);

转载于:https://www.cnblogs.com/wayshan/archive/2011/05/06/2039421.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery遮罩层倒计时可以通过使用jQuery插件和Bootstrap来实现。你可以使用Bootstrap的模态框组件来创建遮罩层,并且使用jQuery的计时器功能来实现倒计时。 首先,你需要在页面中引入jQuery和Bootstrap的相关文件。然后,你可以按照下面的步骤来实现遮罩层倒计时: 1. 创建一个按钮或者其他触发事件的元素,当用户点击该元素时,触发倒计时和遮罩层的显示。 2. 使用jQuery的计时器功能来实现倒计时。你可以使用`setInterval`函数来设置一个定时器,每隔一定的时间更新倒计时的显示内容。 3. 在定时器的回调函数中,更新倒计时的显示内容,并根据剩余时间判断是否显示遮罩层。你可以使用jQuery选择器来获取遮罩层的元素,并使用`show`和`hide`函数来控制其显示和隐藏。 4. 当倒计时结束时,你可以触发弹出模态框(遮罩层)的操作。你可以使用`modal`方法来显示模态框。 这是一个简单的实现示例代码: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> </head> <body> <button id="startCountdown" class="btn btn-primary">开始倒计时</button> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">警告</h5> </div> <div class="modal-body"> <p>您的时间已经用完</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">确定</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $("#startCountdown").click(function() { var countdown = 10; // 设置倒计时的秒数 var countdownTimer = setInterval(function() { countdown--; if (countdown <= 0) { clearInterval(countdownTimer); $("#myModal").modal("show"); // 显示模态框 } else { $("#countdownDisplay").text(countdown); // 更新倒计时显示 } }, 1000); }); }); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值