jQuery实现每日秒杀商品倒计时功能

时间：2021-05-26

html & js：

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jQuery每日秒杀倒计时</title><link rel="stylesheet" href="css/zzsc.css" rel="external nofollow" ></head><body><div class="se-kl"> <div class="se-cn">倒计时</div> <div class="se-en">COUNT DOWN</div> <i class="se-io"></i> <div class="se-info">距离结束还剩</div> <div class="se-count"> <div class="se-day"></div> <div class="se-hour"><span class="se-txt">00</span></div> <div class="se-min"><span class="se-txt">00</span></div> <div class="se-sec"><span class="se-txt">00</span></div> </div></div><script src="js/jquery.min.js"></script> <!-- 依赖条件1 --><script type="text/javascript"> $(document).ready(function () { var oDate = new Date(); var nowTime = oDate.getTime(); //现在的毫秒数 oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天 var targetDate = new Date(oDate.toLocaleDateString()); run(targetDate); }); function run(enddate) { getDate(enddate); setInterval("getDate('" + enddate + "')", 500); } function getDate(enddate) { var oDate = new Date(); //获取日期对象 var nowTime = oDate.getTime(); //现在的毫秒数 var enddate = new Date(enddate); var targetTime = enddate.getTime(); // 截止时间的毫秒数 var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数 var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ； second = second % 86400; //余数代表剩下的秒数； var hour = Math.floor(second / 3600); //整数部分代表小时； second %= 3600; //余数代表 剩下的秒数； var minute = Math.floor(second / 60); second %= 60; var spanH = $('.se-txt')[0]; var spanM = $('.se-txt')[1]; var spanS = $('.se-txt')[2]; spanH.innerHTML = tow(hour); spanM.innerHTML = tow(minute); spanS.innerHTML = tow(second); } function tow(n) { return n >= 0 && n < 10 ? '0' + n : '' + n; }</script></body></html>

css：

(zzsc.cs)* { margin: 0; padding: 0;}.se-kl { width: 190px; height: 275px; background-color: #e83632; margin: 100px auto; position: relative;}.se-cn { position: absolute; top: 42px; left: 0; width: 100%; text-align: center; font-size: 34px; color: #fff;}.se-en { position: absolute; top: 90px; left: 0; width: 100%; text-align: center; font-size: 20px; color: rgba(255, 255, 255, 0.5);}.se-io { width: 20px; height: 33px; position: absolute; background: url(../imgs/seckill.png) no-repeat; background-position: -32.5px 0; background-size: 52.5px 40px; left: 85px; top: 126px; display: block;}.se-info { position: absolute; top: 170px; text-align: center; width: 100%; font-size: 16px; color: #fff;}.se-count { position: absolute; top: 212px; left: 30px; height: 40px;}.se-day { display: none;}.se-hour,.se-min,.se-sec { position: relative; background-color: #2f3430; width: 40px; height: 40px; float: left; text-align: center; line-height: 40px; margin-right: 5px;}.se-txt { font-size: 20px; font-weight: bold; color: #fff;}.se-txt:before { content: ""; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #e83632;}

示例图1：

注：本程序依赖于jquery库，请自行下载并选择合适路径或使用远程cdn地址：

https://cdn.bootcss.com/jquery/3.4.1/jquery.js

总结

以上所述是小编给大家介绍的jQuery实现每日秒杀商品倒计时功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章