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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>美多商城-商品详情</title>

	<link rel="stylesheet" type="text/css" href="css/reset.css">

	<link rel="stylesheet" type="text/css" href="css/main.css">

	    <script src="./js/jquery-1.12.1.min.js"></script>

	<script src="./js/axios.js"></script>

		<script src="./js/jquery.cookie.js"></script>

	<script>

		$(function(){

			var $tab_btn = $('.detail_tab li');

			var $tab_con = $('.tab_content');

			$tab_btn.click(function(){

				$(this).addClass('active').siblings().removeClass('active');

				$tab_con.eq( $(this).index() ).addClass('current').siblings().removeClass('current');

			})

		})

	</script>

</head>

<body>

	<div class="header_con">

		<div class="header">

			<div class="welcome fl">欢迎来到美多商城!

				<span>|</span>

					<a href="index.html">首页</a>

			</div>

			<div class="fr">

				<div class="login_btn fl">

					欢迎您：<em class="Show"></em>

				</div>

				<div class="user_link fl">

					<span>|</span>

					<a href="user_center_info.html">用户中心</a>

					<span>|</span>

					<a href="cart.html">我的购物车</a>

					<span>|</span>

					<a href="user_center_order.html">我的订单</a>

				</div>

			</div>

		</div>

	</div>

	<div class="search_bar clearfix">

			<a href="index.html" class="logo fl"><img src="data:images/logo.png"></a>

			<div class="search_wrap fl">

				<div class="search_con">

					<input type="text" class="input_text fl" name="" placeholder="搜索商品">

					<input type="button" class="input_btn fr" name="" value="搜索">

				</div>

				<ul class="search_suggest fl">

					<li><a href="#">索尼微单</a></li>

					<li><a href="#">优惠15元</a></li>

					<li><a href="#">美妆个护</a></li>

					<li><a href="#">买2免1</a></li>

				</ul>

			</div>

			<div class="guest_cart fr">

				<a href="#" class="cart_name fl">我的购物车</a>

				<div class="goods_count fl" id="show_count">15</div>

				<ul class="cart_goods_show">

					<li>

						<img src="data:images/goods/goods001.jpg" alt="商品图片">

						<h4>商品名称手机</h4>

						<div>4</div>

					</li>

					<li>

						<img src="data:images/goods/goods002.jpg" alt="商品图片">

						<h4>商品名称手机</h4>

						<div>5</div>

					</li>

					<li>

						<img src="data:images/goods/goods003.jpg" alt="商品图片">

						<h4>商品名称手机</h4>

						<div>6</div>

					</li>

					<li>

						<img src="data:images/goods/goods003.jpg" alt="商品图片">

						<h4>商品名称手机</h4>

						<div>6</div>

					</li>

				</ul>

			</div>

		</div>

		<div class="navbar_con">

				<div class="navbar">

					<div class="sub_menu_con fl">

						<h1 class="fl">商品分类</h1>

					</div>		

					<ul class="navlist fl">

						<li><a href="">首页</a></li>

						<li class="interval">|</li>

						<li><a href="">真划算</a></li>

						<li class="interval">|</li>

						<li><a href="">抽奖</a></li>

					</ul>

				</div>

			</div>

	<div class="goods_detail_con clearfix" >

		<span id = "showseckill"></span>

		<div class="goods_detail_pic fl" ><img id="show_img" src="http://127.0.0.1:8000/upload/timg.jpg"></div>

		<div class="goods_detail_list fr">

			<h3 id="show_title"></h3><br>

			<h1 hidden>商品ID：<span id="id" hidden></span></h1>

			<div class="prize_bar">

                <span class="show_pirze" id="show_pirze"><em></em></span>

			</div>

			<div class="goods_num clearfix">

				<h3>数量：<span id="show_number"></span></h3>

            </div>

            <div id="LeftTime" style="color:red;font-size: 20px;"></div>

			<div class="operate_btn" hidden>

				<a href="user_center_order.html" class="buy_btn" onclick="seckill()">立即抢货</a>

			</div>

		</div>

	</div>

	<div class="main_wrap clearfix">

		<div class="l_wrap fl clearfix">

			<div class="new_goods">

				<h3>热销排行</h3>

				<ul>

					<li>

						<a href="#"><img src="data:images/goods/goods001.jpg"></a>

						<h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>

						<div class="prize">￥3.90</div>

					</li>

					<li>

						<a href="#"><img src="data:images/goods/goods002.jpg"></a>

						<h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>

						<div class="prize">￥16.80</div>

					</li>

				</ul>

			</div>

		</div>

		<div class="r_wrap fr clearfix">

			<ul class="detail_tab clearfix">

				<li class="active">商品详情</li>

				<li>规格与包装</li>

				<li>商品评价(2)</li>

				<li>售后服务</li>

			</ul>

			<div class="tab_content current">

				<dl>

					<dt>商品详情：</dt>

					<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>

				</dl>

			</div>

			<div class="tab_content">

				<dl>

					<dt>规格与包装：</dt>

					<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>

				</dl>

			</div>

			<div class="tab_content">

				<ul class="judge_list_con">

					<li class="judge_list fl">

						<div class="user_info fl">

							<img src="data:images/cat.jpg">

							<b>潇***啼</b>

						</div>

						<div class="judge_info fl">

							<div class="stars_five"></div>

							<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>

						</div>

					</li>

					<li class="judge_list fl">

						<div class="user_info fl">

							<img src="data:images/cat.jpg">

							<b>潇***啼</b>

						</div>

						<div class="judge_info fl">

							<div class="stars_four"></div>

							<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>

						</div>

					</li>

					<li class="judge_list fl">

						<div class="user_info fl">

							<img src="data:images/cat.jpg">

							<b>潇***啼</b>

						</div>

						<div class="judge_info fl">

							<div class="stars_four"></div>

							<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>

						</div>

					</li>

				</ul>

			</div>

			<div class="tab_content">

				<dl>

					<dt>售后服务：</dt>

					<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>

				</dl>

			</div>

		</div>

	</div>

	<div class="main_wrap clearfix">

	<div class="footer">

		<div class="foot_link">

			<a href="#">关于我们</a>

			<span>|</span>

			<a href="#">联系我们</a>

			<span>|</span>

			<a href="#">招聘人才</a>

			<span>|</span>

			<a href="#">友情链接</a>

		</div>

		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>

		<p>电话：010-****888    京ICP备*******8号</p>

    </div>

</div>

<script>

			var rest = $.cookie('username')

			$(".Show").html(rest);

            // 渲染商品

            axios({

                //指定请求地址

                url:'http://127.0.0.1:8000/md_admin/seckillinner',

                //请求参数

                // data:param,

                //请求类型

                method:'get',

                //接口返回值类型

                responseType:'json'

            })

            .then(function(obj){

                console.log(obj)

                $("#show_pirze").html('￥'+obj.data[0].fields.product_price);

				$("#show_title").html(obj.data[0].fields.product_name);

				$("#show_time").html(obj.data[0].fields.time);

				$("#show_number").html(obj.data[0].fields.sum);

				$("#id").html(obj.data[0].pk);

				function FreshTime(){

				var endtime=new Date(obj.data[0].fields.time.replace("T",' ').split("Z")[0]);//结束时间

				var nowtime = new Date();//当前时间

				var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000);

				d=parseInt(lefttime/3600/24);

				h=parseInt((lefttime/3600)%24);

				m=parseInt((lefttime/60)%60);

				s=parseInt(lefttime%60);

				document.getElementById("LeftTime").innerHTML="还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";

				if(lefttime<=0){

					document.getElementById("LeftTime").innerHTML="秒杀已结束";

					clearInterval(sh);

					$(".operate_btn").show()

					}

				}

				FreshTime();

				var sh;

				sh=setInterval(FreshTime,1000);

            });

			function seckill(){

				let id = $("#id").html();

				let param = new URLSearchParams();

                    param.append('id',id);

                    param.append('username',rest);

                    axios({

                    url:'http://127.0.0.1:8000/md_admin/seckillorder',

                    data:param,

                    method:'post',

                    responseType:'text',

                    })

                    .then(function(obj){

                        console.log(obj.data);

                        // window.location.href='http://127.0.0.1:8080/cart.html'

                    })

                }

</script>

</body>

</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. 这可能是最low的发布dotnet core站点到centos7教程

    前言 不得不说:我在chrome上写了好长一段,贴了23张图,然后一个crash..我想说我电脑上的chrome已经crash太多次了 以后一定要搞离线编辑的. 正文 什么是.net core,bal ...

  2. Shiro+easyUI+SpringMVC实现登录认证

      最近在做一个小项目,其中认证这块使用shiro+SpringMVC+easyUI,因为easyUI在提交数据的时候使用的是ajax的异步提交,所以shiro在处理数据的时候需要重写FormAuth ...

  3. 使用EMQ搭建MQTT服务器

    前言寒假的时候开始搭建mqtt服务器,一开始使用的是RabbitMQ,基于Erlang语言.但是RabbitMQ的本职工作是AMQP,MQTT只是他的一个插件功能,似乎有些大材小用,很多MQTT的功能 ...

  4. 4-4 Redis 的常用配置

    2016-12-22 15:30:43 本篇文章属于Redis 系列第四篇文章:Redis 配置文件介绍 该系列文章链接 NoSQL 数据库简介 Redis的安装及及一些杂项基础知识 Redis 的常 ...

  5. 用JS编写一个函数，返回数组中重复出现过的元素

    用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: , , , , , , , ]; var getRepeat = function (arr) { var obj = {}; , le ...

  6. 博弈论进阶之Anti-SG游戏与SJ定理

    前言 在上一节中,我们初步了解了一下SG函数与SG定理. 今天我们来分析一下SG游戏的变式--Anti-SG游戏以及它所对应的SG定理 首先从最基本的Anti-Nim游戏开始 Anti-Nim游戏是这 ...

  7. 当桌面的快捷方式图标左下角出现一个X（叉）的时候应该怎么去掉

    win+r打开运行,然后复制粘贴如下命令就OK辣 cmd /k reg delete "HKEY_CLASSES_ROOT\lnkfile" /v IsShortcut /f &a ...

  8. 2018 AI产业界大盘点

    2018  AI产业界大盘点 大事件盘点 “ 1.24——Facebook人工智能部门负责人Yann LeCun宣布卸任 Facebook人工智能研究部门(FAIR)的负责人Yann LeCun宣布卸 ...

  9. WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 前言 GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不 ...

  10. SVN拉取后撤销，恢复未拉取之前的状态

    在做项目的时候,一不小心将服务器上的代码覆盖了本地的代码,本来可以使用log查看svn上的历史列表,然后选中某个选项,右键,点击revert to this vision来使代码恢复到任意一个版本. ...