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

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

<!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. idea操作整理

    前言 这篇记录一下,在idea使用的过程中一些加快开发效率的操作. live template  postfix 当使用一个数字或者一个参数按照以下写法会自动变成例子中的情况 100.for -&g ...

  2. AR增强现实开发介绍

    AR增强现实开发介绍 ---理论篇 ​ AR增强现实开发最近做一些AR增强现实的内容,一些普及性的内容,与大家分享. 一: 什么是AR增强现实技术: 是一种将真实世界信息和虚拟世界信息“无缝”集成的新 ...

  3. Kafka性能测试实例

    1.概述 在分布式实时数据流场景下,随着数据量的增长,对Kafka集群的性能和稳定性的要求也很高.本篇博客将从生产者和消费者两方面来做性能测试,针对具体的业务和数据量,来调优Kafka集群. 2.内容 ...

  4. 痞子衡嵌入式：一表全搜罗常见移动通信标准(1-5G, GSM/GPRS/CDMA/LTE/NR...)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是移动通信标准. 移动无线网络已经成为我们生活.学习.娱乐不可缺少的必备品,而移动无线通信技术本身也在不断地更新换代.从1986年诞生第一 ...

  5. express中间件系统的基本实现

    一直觉得express的中间件系统这种流式处理非常形象,就好像加工流水线一样,每个环节都在针对同一个产品的不同部分完成自己的工作,最后得到一个成品.今天就来实现一个简易的[中间件队列]. 一. API ...

  6. Scala(四) —— 集合

    一.List var x = List(1,2,3,4) //x:List[Int] = List(1, 2, 3, 4) var y = List("x","y&quo ...

  7. 安装VS2010时出现进入的图标没有与需要部分升级VS10Sp1-KB983509的解决方案

    大家好,今天又想到需要写一下博客了,毕竟感觉应该在新人入公司的时候可能需要将你电脑上的开发环境进行修改. 下面讲的主要是将VS2012卸载后,重新安装VS2010,. 我遇到了这种情况:在我将VS20 ...

  8. Linux，在不使用U盘的情况下使用wubi.exe程序在Win7上安装ubuntu-14.04.3版系统

    本文介绍如何在不使用U盘的情况下使用wubi.exe程序在Win7上安装ubuntu-14.04.3版系统. 花了一天的时间终于安装上了Ubuntu14.04,过程坎坷,是血泪史,开始报“cannot ...

  9. Ext.override

    Ext.override:4种情况 如果target是使用Ext.define声明的一个类,给出overrides那个类的override方法被调用(看Ext.Base.override) If th ...

  10. JS 关于 bind ,call,apply 和arguments p8

    关于这3个货,网上有很多文章介绍,我这边还是记录下并加上自己的理解,还有arguments函数内置对象顺便也记录下: 简单的说apply和call 会绑定第一个参数的作用域给调用函数对象实例,并会执行 ...