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

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

<!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. 【ASP.NET Core快速入门】（十四）MVC开发：UI、 EF + Identity实现、注册实现、登陆实现

    前言 之前我们进行了MVC的web页面的Cookie-based认证实现,接下来的开发我们要基于之前的MvcCookieAuthSample项目做修改. MvcCookieAuthSample项目地址 ...

  2. 【ASP.NET Core快速入门】（五）命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options

    命令行配置 我们通过vs2017创建一个控制台项目CommandLineSample 可以看到现在项目以来的是dotnet core framework 我们需要吧asp.net core引用进来,我 ...

  3. scrapy爬虫学习系列七：scrapy常见问题解决方案

    1 常见错误 1.1 错误: ImportError: No module named win32api 官方参考:https://doc.scrapy.org/en/latest/faq.html# ...

  4. 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes

    前言 在之前的一篇文章中,我们介绍了 如何将一个本地的 Java 应用程序直接部署到阿里云 ECS ,有不少读者反馈,如果目前已经在使用阿里云容器服务 Kubernetes 了,那该如何配合这个插件部 ...

  5. springboot情操陶冶-web配置(一)

    承接前文springboot情操陶冶-@SpringBootApplication注解解析,在前文讲解的基础上依次看下web方面的相关配置 环境包依赖 在pom.xml文件中引入web依赖,炒鸡简单, ...

  6. 痞子衡嵌入式：第一本Git命令教程（4）- 转移(add/rm/mv)

    今天是Git系列课程第四课,上一课我们在Git空间里做了一些文件改动并且知道了如何利用Git查看这些变动,今天痞子衡要讲的是将这些变动提交到Git本地仓库前的准备工作. Git仓库目录下的文件改动操作 ...

  7. 深度学习（Deep Learning）资料大全（不断更新）

    Deep Learning(深度学习)学习笔记(不断更新): Deep Learning(深度学习)学习笔记之系列(一) 深度学习(Deep Learning)资料(不断更新):新增数据集,微信公众号 ...

  8. Redis数据类型使用场景及有序集合SortedSet底层实现详解

    Redis常用数据类型有字符串String.字典dict.列表List.集合Set.有序集合SortedSet,本文将简单介绍各数据类型及其使用场景,并重点剖析有序集合SortedSet的实现. Li ...

  9. 【.NET Core项目实战-统一认证平台】第十三章 授权篇-如何强制有效令牌过期

    [.NET Core项目实战-统一认证平台]开篇及目录索引 上一篇我介绍了JWT的生成验证及流程内容,相信大家也对JWT非常熟悉了,今天将从一个小众的需求出发,介绍如何强制令牌过期的思路和实现过程. ...

  10. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...