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

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

<!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. 【Java基础】【14正则表达式&常用工具类】

    14.01_常见对象(正则表达式的概述和简单使用) A:正则表达式 是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. 作用:比如注册邮箱,邮箱有 ...

  2. MarkDown语法总结

    MarkDown常用语法讲解,写博客使用. 一丶标题的设置. 标题设置使用#来区分一级标题,几个#代表几级标题. 图片如下. 二丶添加代码块,以及标记代码. 1.添加代码块使用语法三个 '设置 2.添 ...

  3. ServletRequest HttpServletRequest 请求方法 获取请求参数 请求转发 请求包含 请求转发与重定向区别 获取请求头字段

      ServletRequest 基本概念 JavaWeb中的 "Request"对象  实际为   HttpServletRequest  或者  ServletRequest, ...

  4. -1-6 java 异常简单介绍 java异常 异常体系 Throwable 分类 throws和throw 异常处理 自定义异常

      异常   异常:异常就是Java程序在运行过程中出现的错误. 异常由来:问题也是现实生活中一个具体事务,也可以通过java 的类的形式进行描述,并封装成对象. 其实就是Java对不正常情况进行描述 ...

  5. 服务器端配置nodejs环境(使用pm2进程管理运行)

    一.brew安装: 由于Mac没有装ubantu,所以不能用apt-get命令,在本地命令行下Mac安装homebrew替代:  https://brew.sh 二.新开命令窗口,登录root用户,安 ...

  6. MySQL 笔记整理（8.b） --事务到底是隔离还是不隔离的？

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 8.a) --事务到底是隔离还是不隔离的? 本周工作较忙,加上懒惰,拖更 ...

  7. Mybatis框架基础支持层——反射工具箱之泛型解析工具TypeParameterResolver（4）

    简介:TypeParameterResolver是一个工具类,提供一系列的静态方法,去解析类中的字段.方法返回值.方法参数的类型. 在正式介绍TypeParameterResolver之前,先介绍一个 ...

  8. laravel5集成支付宝alipay扫码支付流程（Laravel 支付解决方案）

    首先我们来探讨如何在Laravel应用中使用支付宝进行支付,对此,GitHub上有很多相关的包,其中最流行的两个包:Omnipay For Laravel 5 & Lumen 和 Larave ...

  9. SQL Server中几种遍历方式比较

    SQL遍历解析 在SQL的存储过程,函数中,经常需要使用遍历(遍历table),其中游标.临时表等遍历方法很常用.面对小数据量,这几种遍历方法均可行,但是面临大数据量时,就需要择优选择,不同的遍历方法 ...

  10. 【20190407】JavaScript-indexOf方法解析

    在JavaScript中,字符串类型String和数组类型Array都有indexOf()方法,虽然他们的作用都是返回传入元素在指定字符串或数组中的位置,但他们之间还是存在着一点点不同. Str.in ...