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

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

<!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. Django学习笔记（6）——Form表单

    知识储备:HTML表单form学习 表单,在前端页面中属于最常见的一个东西了.基本上网站信息的提交都用到了表单,所以下面来学习Django中优雅的表单系统:Form 表单的主要作用是在网页上提供一个图 ...

  2. Java8之Optional类

    写在前头 今天再看阿里的Java开发手册,里面异常处理第10条提到这样一个建议. [推荐]防止 NPE ,是程序员的基本修养,注意 NPE 产生的场景:1 ) 返回类型为基本数据类型,return 包 ...

  3. C#委托与事件总结

    目录 C#委托与事件的总结 1.概述 2.委托 2.1 什么是委托 2.2 委託的使用 2.3 深入理解委托 2.4 为什么要使用委托 2.5 代码清单 3.事件 3.1 事件与委托的关系 3.2 订 ...

  4. C# 爬虫----Cookies处理(Set-Cookie)

    /// <summary> /// Cookie 助手 /// </summary> public class CookieHelper { /// <summary&g ...

  5. oracle账户登录数据库进行如下操作：

    CREATE USER NORTHBOUND IDENTIFIED BY NORTHBOUND DEFAULT TABLESPACE "TBS_DNINMSV31" TEMPORA ...

  6. Java开发笔记（六十五）集合：HashSet和TreeSet

    对于相同类型的一组数据,虽然Java已经提供了数组加以表达,但是数组的结构实在太简单了,第一它无法直接添加新元素,第二它只能按照线性排列,故而数组用于基本的操作倒还凑合,若要用于复杂的处理就无法胜任了 ...

  7. Apollo配置中心动态刷新日志级别

    Apollo配置中心动态刷新日志级别 添加次配置后,当在apollo上面调整日志级别不需要重启服务器,马上就能生效 /** * 结合apollo动态刷新日志级别 * @author: nj * @da ...

  8. GNOME图形界面的基本操作

    成功登录进入CentOS系统之后,我们首先看到的桌面就是GNOME图形界面,下面来看一下相关的基本操作. 个性化设置 1,设置屏幕分辨率 进入菜单 2,更换桌面背景 进入下面菜单. 选择一张背景图片, ...

  9. mybatis基础（中）

    数据模型分析思路 每张表记录的数据内容 分模块对每张表记录对内容进行熟悉,相当于学习系统需求(功能)的过程 每张表重要的字段设置 非空字段.外键字段 数据库级别表与表之间的关系 外键关系 表与表之间的 ...

  10. 【大数据】了解Hadoop框架的基础知识

    介绍 此Refcard提供了Apache Hadoop,这是最流行的软件框架,可使用简单的高级编程模型实现大型数据集的分布式存储和处理.我们将介绍Hadoop最重要的概念,描述其架构,指导您如何开始使 ...