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导航条固定定位效果实例代码
May 26 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP简单生成缩略图相册的方法
2015/07/29 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP7新增函数
2021/03/09 PHP
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
js实现小时钟效果
2020/03/25 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Django实现学员管理系统
2019/02/26 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
小学生演讲稿
2014/01/12 职场文书
给老婆的保证书范文
2014/04/28 职场文书
给学校的建议书范文
2014/05/15 职场文书
2014组织生活会方案
2014/05/19 职场文书
创先争优标语
2014/06/27 职场文书
文明好少年事迹材料
2014/08/19 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js