倒计时就是在秒杀表中设定好要秒杀的时间 再减去现在的时间 把时间差显示在页面上

由于第一次搞秒杀倒计时  辛苦搞了半天  留此微博  以留备用

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. 	<title>美多商城-商品详情</title>
  6. 	<link rel="stylesheet" type="text/css" href="css/reset.css">
  7. 	<link rel="stylesheet" type="text/css" href="css/main.css">
  8. 	    <script src="./js/jquery-1.12.1.min.js"></script>
  9. 	<script src="./js/axios.js"></script>
  10. 		<script src="./js/jquery.cookie.js"></script>
  11. 	<script>
  12. 		$(function(){
  13. 			var $tab_btn = $('.detail_tab li');
  14. 			var $tab_con = $('.tab_content');
  15. 			$tab_btn.click(function(){
  16. 				$(this).addClass('active').siblings().removeClass('active');
  17. 				$tab_con.eq( $(this).index() ).addClass('current').siblings().removeClass('current');
  18. 			})
  19. 		})
  20. 	</script>
  21. </head>
  22. <body>
  23. 	<div class="header_con">
  24. 		<div class="header">
  25. 			<div class="welcome fl">欢迎来到美多商城!
  26. 				<span>|</span>
  27. 					<a href="index.html">首页</a>
  28. 			</div>
  29. 			<div class="fr">
  30.  
  31. 				<div class="login_btn fl">
  32. 					欢迎您：<em class="Show"></em>
  33. 				</div>
  34. 				<div class="user_link fl">
  35. 					<span>|</span>
  36. 					<a href="user_center_info.html">用户中心</a>
  37. 					<span>|</span>
  38. 					<a href="cart.html">我的购物车</a>
  39. 					<span>|</span>
  40. 					<a href="user_center_order.html">我的订单</a>
  41. 				</div>
  42. 			</div>
  43. 		</div>
  44. 	</div>
  45.  
  46. 	<div class="search_bar clearfix">
  47. 			<a href="index.html" class="logo fl"><img src="data:images/logo.png"></a>
  48. 			<div class="search_wrap fl">
  49. 				<div class="search_con">
  50. 					<input type="text" class="input_text fl" name="" placeholder="搜索商品">
  51. 					<input type="button" class="input_btn fr" name="" value="搜索">
  52. 				</div>
  53. 				<ul class="search_suggest fl">
  54. 					<li><a href="#">索尼微单</a></li>
  55. 					<li><a href="#">优惠15元</a></li>
  56. 					<li><a href="#">美妆个护</a></li>
  57. 					<li><a href="#">买2免1</a></li>
  58. 				</ul>
  59. 			</div>
  60.  
  61. 			<div class="guest_cart fr">
  62. 				<a href="#" class="cart_name fl">我的购物车</a>
  63. 				<div class="goods_count fl" id="show_count">15</div>
  64.  
  65. 				<ul class="cart_goods_show">
  66. 					<li>
  67. 						<img src="data:images/goods/goods001.jpg" alt="商品图片">
  68. 						<h4>商品名称手机</h4>
  69. 						<div>4</div>
  70. 					</li>
  71. 					<li>
  72. 						<img src="data:images/goods/goods002.jpg" alt="商品图片">
  73. 						<h4>商品名称手机</h4>
  74. 						<div>5</div>
  75. 					</li>
  76. 					<li>
  77. 						<img src="data:images/goods/goods003.jpg" alt="商品图片">
  78. 						<h4>商品名称手机</h4>
  79. 						<div>6</div>
  80. 					</li>
  81. 					<li>
  82. 						<img src="data:images/goods/goods003.jpg" alt="商品图片">
  83. 						<h4>商品名称手机</h4>
  84. 						<div>6</div>
  85. 					</li>
  86. 				</ul>
  87. 			</div>
  88.  
  89. 		</div>
  90.  
  91. 		<div class="navbar_con">
  92. 				<div class="navbar">
  93. 					<div class="sub_menu_con fl">
  94. 						<h1 class="fl">商品分类</h1>
  95.  
  96. 					</div>		
  97.  
  98. 					<ul class="navlist fl">
  99. 						<li><a href="">首页</a></li>
  100. 						<li class="interval">|</li>
  101. 						<li><a href="">真划算</a></li>
  102. 						<li class="interval">|</li>
  103. 						<li><a href="">抽奖</a></li>
  104. 					</ul>
  105. 				</div>
  106. 			</div>
  107.  
  108. 	<div class="goods_detail_con clearfix" >
  109. 		<span id = "showseckill"></span>
  110. 		<div class="goods_detail_pic fl" ><img id="show_img" src="http://127.0.0.1:8000/upload/timg.jpg"></div>
  111. 		<div class="goods_detail_list fr">
  112. 			<h3 id="show_title"></h3><br>
  113. 			<h1 hidden>商品ID：<span id="id" hidden></span></h1>
  114. 			<div class="prize_bar">
  115.                 <span class="show_pirze" id="show_pirze"><em></em></span>
  116. 			</div>
  117. 			<div class="goods_num clearfix">
  118. 				<h3>数量：<span id="show_number"></span></h3>
  119.             </div>
  120.             <div id="LeftTime" style="color:red;font-size: 20px;"></div>
  121.  
  122. 			<div class="operate_btn" hidden>
  123. 				<a href="user_center_order.html" class="buy_btn" onclick="seckill()">立即抢货</a>
  124. 			</div>
  125. 		</div>
  126. 	</div>
  127.  
  128. 	<div class="main_wrap clearfix">
  129. 		<div class="l_wrap fl clearfix">
  130. 			<div class="new_goods">
  131. 				<h3>热销排行</h3>
  132. 				<ul>
  133. 					<li>
  134. 						<a href="#"><img src="data:images/goods/goods001.jpg"></a>
  135. 						<h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
  136. 						<div class="prize">￥3.90</div>
  137. 					</li>
  138. 					<li>
  139. 						<a href="#"><img src="data:images/goods/goods002.jpg"></a>
  140. 						<h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
  141. 						<div class="prize">￥16.80</div>
  142. 					</li>
  143. 				</ul>
  144. 			</div>
  145. 		</div>
  146.  
  147. 		<div class="r_wrap fr clearfix">
  148. 			<ul class="detail_tab clearfix">
  149. 				<li class="active">商品详情</li>
  150. 				<li>规格与包装</li>
  151. 				<li>商品评价(2)</li>
  152. 				<li>售后服务</li>
  153. 			</ul>
  154. 			<div class="tab_content current">
  155. 				<dl>
  156. 					<dt>商品详情：</dt>
  157. 					<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>
  158. 				</dl>
  159. 			</div>
  160. 			<div class="tab_content">
  161. 				<dl>
  162. 					<dt>规格与包装：</dt>
  163. 					<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>
  164. 				</dl>
  165. 			</div>
  166. 			<div class="tab_content">
  167. 				<ul class="judge_list_con">
  168. 					<li class="judge_list fl">
  169. 						<div class="user_info fl">
  170. 							<img src="data:images/cat.jpg">
  171. 							<b>潇***啼</b>
  172. 						</div>
  173. 						<div class="judge_info fl">
  174. 							<div class="stars_five"></div>
  175. 							<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>
  176. 						</div>
  177. 					</li>
  178. 					<li class="judge_list fl">
  179. 						<div class="user_info fl">
  180. 							<img src="data:images/cat.jpg">
  181. 							<b>潇***啼</b>
  182. 						</div>
  183. 						<div class="judge_info fl">
  184. 							<div class="stars_four"></div>
  185. 							<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>
  186. 						</div>
  187. 					</li>
  188. 					<li class="judge_list fl">
  189. 						<div class="user_info fl">
  190. 							<img src="data:images/cat.jpg">
  191. 							<b>潇***啼</b>
  192. 						</div>
  193. 						<div class="judge_info fl">
  194. 							<div class="stars_four"></div>
  195. 							<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>
  196. 						</div>
  197. 					</li>
  198. 				</ul>
  199. 			</div>
  200. 			<div class="tab_content">
  201. 				<dl>
  202. 					<dt>售后服务：</dt>
  203. 					<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>
  204. 				</dl>
  205. 			</div>
  206.  
  207. 		</div>
  208. 	</div>
  209.  
  210. 	<div class="main_wrap clearfix">
  211.  
  212. 	<div class="footer">
  213. 		<div class="foot_link">
  214. 			<a href="#">关于我们</a>
  215. 			<span>|</span>
  216. 			<a href="#">联系我们</a>
  217. 			<span>|</span>
  218. 			<a href="#">招聘人才</a>
  219. 			<span>|</span>
  220. 			<a href="#">友情链接</a>
  221. 		</div>
  222. 		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
  223. 		<p>电话：010-****888    京ICP备*******8号</p>
  224.     </div>
  225. </div>
  226. <script>
  227.  
  228. 			var rest = $.cookie('username')
  229. 			$(".Show").html(rest);
  230.  
  231.             // 渲染商品
  232.             axios({
  233.                 //指定请求地址
  234.                 url:'http://127.0.0.1:8000/md_admin/seckillinner',
  235.                 //请求参数
  236.                 // data:param,
  237.                 //请求类型
  238.                 method:'get',
  239.                 //接口返回值类型
  240.                 responseType:'json'
  241.             })
  242.             .then(function(obj){
  243.                 console.log(obj)
  244.                 $("#show_pirze").html('￥'+obj.data[0].fields.product_price);
  245. 				$("#show_title").html(obj.data[0].fields.product_name);
  246. 				$("#show_time").html(obj.data[0].fields.time);
  247. 				$("#show_number").html(obj.data[0].fields.sum);
  248. 				$("#id").html(obj.data[0].pk);
  249.  
  250. 				function FreshTime(){
  251.  
  252. 				var endtime=new Date(obj.data[0].fields.time.replace("T",' ').split("Z")[0]);//结束时间
  253. 				var nowtime = new Date();//当前时间
  254. 				var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);
  255. 				d=parseInt(lefttime/3600/24);
  256. 				h=parseInt((lefttime/3600)%24);
  257. 				m=parseInt((lefttime/60)%60);
  258. 				s=parseInt(lefttime%60);
  259.  
  260. 				document.getElementById("LeftTime").innerHTML="还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
  261. 				if(lefttime<=0){
  262. 					document.getElementById("LeftTime").innerHTML="秒杀已结束";
  263. 					clearInterval(sh);
  264. 					$(".operate_btn").show()
  265. 					}
  266. 				}
  267. 				FreshTime();
  268. 				var sh;
  269. 				sh=setInterval(FreshTime,1000);
  270.  
  271.             });
  272.  
  273. 			function seckill(){
  274.  
  275. 				let id = $("#id").html();
  276. 				let param = new URLSearchParams();
  277.                     param.append('id',id);
  278.                     param.append('username',rest);
  279.                     axios({
  280.                     url:'http://127.0.0.1:8000/md_admin/seckillorder',
  281.                     data:param,
  282.                     method:'post',
  283.                     responseType:'text',
  284.                     })
  285.  
  286.                     .then(function(obj){
  287.                         console.log(obj.data);
  288.                         // window.location.href='http://127.0.0.1:8080/cart.html'
  289.  
  290.                     })
  291.                 }
  292.  
  293. </script>
  294. </body>
  295. </html>

　　溜个 CSDN大神连接  留作备用 https://blog.csdn.net/muzilanlan/article/details/45647883

秒杀系统HTML倒计时设置的更多相关文章

  1. Java秒杀系统方案优化 高性能高并发实战（已完成）

    1:商品列表 2:商品详情判断是否可以开始秒杀,未开始不显示秒杀按钮显示倒计时,开始显示秒杀按钮,同时会显示验证码输入框以及验证码图片,当点击秒杀按钮的时候会首先判断验证码是否正确,如果正确会返回一个 ...

  2. 商城秒杀系统总结（Java）

    本文写的较为零散,对没有基础的同学不太友好. 一.秒杀系统项目总结(基础版) classpath 在.properties中时常需要读取资源,定位文件地址时经常用到classpath 类路径指的是sr ...

  3. PHP秒杀系统全方位设计（二）

    商品页面开发 静态化展示页面[效率要比动态PHP高很多,PHP程序需要解析等步骤,本身就需要很多流程,整个下来PHP的处理花的时间和资源要多] 商品状态的控制 开始前.进行中.库存不足.结束 数据逻辑 ...

  4. Java高并发秒杀系统【观后总结】

    项目简介 在慕课网上发现了一个JavaWeb项目,内容讲的是高并发秒杀,觉得挺有意思的,就进去学习了一番. 记录在该项目中学到了什么玩意.. 该项目源码对应的gitHub地址(由观看其视频的人编写,并 ...

  5. SSM实现秒杀系统案例

    ---------------------------------------------------------------------------------------------[版权申明:本 ...

  6. 从构建分布式秒杀系统聊聊Lock锁使用中的坑

    前言 在单体架构的秒杀活动中,为了减轻DB层的压力,这里我们采用了Lock锁来实现秒杀用户排队抢购.然而很不幸的是尽管使用了锁,但是测试过程中仍然会超卖,执行了N多次发现依然有问题.输出一下代码吧,可 ...

  7. 基于SpringMVC+Spring+MyBatis实现秒杀系统【概况】

    前言 本教程使用SpringMVC+Spring+MyBatis+MySQL实现一个秒杀系统.教程素材来自慕课网视频教程[https://www.imooc.com/learn/631].有感兴趣的可 ...

  8. laravel基于redis实现的一个简单的秒杀系统

    说明:网上很多redis秒杀系统的文章,看的都是一头雾水,然后自己来实现一个,也方便以后自己学习 实现的方式是用的redis的list队列,框架为laravel 核心部分为list的pop操作,此操作 ...

  9. Redis分布式锁----悲观锁实现,以秒杀系统为例

    摘要:本文要实现的是一种使用redis来实现分布式锁. 1.分布式锁 分布式锁在是一种用来安全访问分式式机器上变量的安全方案,一般用在全局id生成,秒杀系统,全局变量共享.分布式事务等.一般会有两种实 ...

随机推荐

  1. 【性能优化之道】每秒上万并发下的Spring Cloud参数优化实战

    一.写在前面   相信不少朋友都在自己公司使用Spring Cloud框架来构建微服务架构,毕竟现在这是非常火的一门技术. 如果只是用户量很少的传统IT系统,使用Spring Cloud可能还暴露不出 ...

  2. OAuth2.0 授权许可 之 Authorization Code

    写在前面: 在前一篇博客<OAuth2.0 原理简介>中我们已经了解了OAuth2.0的原理以及它是如何工作的,那么本篇我们将来聊一聊OAuth的一种授权许可方式:授权码(Authoriz ...

  3. 【EF6学习笔记】目录

    [EF6学习笔记](一)Code First 方式生成数据库及初始化数据库实际操作 [EF6学习笔记](二)操练 CRUD 增删改查 [EF6学习笔记](三)排序.过滤查询及分页 [EF6学习笔记]( ...

  4. 痞子衡嵌入式：ARM Cortex-M内核那些事（5）- 指令集

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M指令集. 指令集 指令长度(bits) 包含指令 CortexM0 CortexM0+ CortexM1 Cor ...

  5. 细说MVC中仓储模式的应用

    文章提纲 概述要点 理论基础 详细步骤 总结 概述要点 设计模式的产生,就是在对开发过程进行不断的抽象. 我们先看一下之前访问数据的典型过程. 在Controller中定义一个Context, 例如: ...

  6. AlwaysUp使用方法

    AlwaysUp是一款能将可执行文件.批处理文件及快捷方式作为Windows系统服务,并且进行管理和监视确保100%运行.当程序崩溃.挂起.弹出错误对话框时,AlwaysUp 能自动重启程序,并运行自 ...

  7. 【学习笔记】tensorflow实现一个简单的线性回归

    目录 准备知识 Tensorflow运算API 梯度下降API 简单的线性回归的实现 建立事件文件 变量作用域 增加变量显示 模型的保存与加载 自定义命令行参数 准备知识 Tensorflow运算AP ...

  8. 大型网站架构演进(6)使用NoSQL和搜索引擎

    随着网站业务越来越复杂,对数据存储和检索的需求也越来越复杂,网站需要采用一些非关系型数据库技术(即NoSQL)和非数据库查询技术如搜索引擎.NoSQL数据库一般使用MongoDb,搜索引擎一般使用El ...

  9. java框架之springboot

    快速入门 一.helloworld示例 二.springboot单元测试 三.springboot热部署 web开发 整合redis thymeleaf使用 spring-data-jpa使用 整合m ...

  10. js获取地址栏传参

    地址:http://127.0.0.1:8082/prosperleedir/index.html?id=6666&name=prosper#prosper         Location{ ...