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 Plupload上传插件的使用
Apr 19 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 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程序效率优化的一些策略小结
2010/07/17 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python软件都是免费的吗
2020/06/18 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
销售员自我评价怎么写
2013/09/19 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
行政诉讼答辩状
2015/05/21 职场文书
隐形的翅膀观后感
2015/06/10 职场文书