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


Posted in jQuery onSeptember 06, 2019

 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实现每日秒杀商品倒计时功能

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

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

总结

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

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现全选按钮
Jan 01 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 #jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 #jQuery
Jquery动态列功能完整实例
Aug 30 #jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
关于时间计算的结总
2006/12/06 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
美的官方商城:Midea
2016/09/14 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
上课迟到检讨书
2014/02/19 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
利用Python实现Picgo图床工具
2021/11/23 Python
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Golang bufio详细讲解
2022/04/21 Golang