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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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 中dirname(_file_)讲解
2007/03/18 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
js实现抽奖功能
2020/11/24 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Django的models模型的具体使用
2019/07/15 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
Python hashlib模块实例使用详解
2019/12/24 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
八项规定整改措施
2014/02/12 职场文书
购房意向书
2014/04/01 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python