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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
PHP导入导出Excel代码
2015/07/07 PHP
PHP加密解密函数详解
2015/10/28 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
MYSQL支持事务吗
2013/08/09 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
小松树教学反思
2014/02/11 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
消防安全宣传标语
2014/06/07 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python