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实现文字打印动态效果
Apr 21 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jquery检测上传文件大小示例
Apr 26 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 应用程序安全防范技术研究
2009/09/25 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
js三种排序算法分享
2012/08/16 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python 文件管理实例详解
2015/11/10 Python
Python中的Django基本命令实例详解
2018/07/15 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
python 穷举指定长度的密码例子
2020/04/02 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
软件测试面试题
2014/01/05 面试题
论文指导教师评语
2014/04/28 职场文书
开展警示教育活动总结
2015/05/09 职场文书
志愿者工作心得体会
2016/01/15 职场文书
导游词之河北野三坡
2019/12/11 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
python实现过滤敏感词
2021/05/08 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python