如何利用倒计时抛出链接地址？

时间：2022-08-25 19:48:08
思路是这样的：
比如我有A、B、C三款产品，A产品需要2016年1月1日10:00:00上线，B产品需要2016年1月2日12:00:00，C产品需要2016年1月3日15:00:00上线，把链接放到nob中的a链接里面，我设置一个通用的计算器，等到到点，分别上线该款产品（实质是隐藏blc这个div，显示nob这个div）这个功能如何实现？本人是JS小白，公司下达的任务，完成不了，恳求大神帮忙解决下哈！ 



<html>


	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

		</script>

		<style>

			.blc {

				display: block;

			}


			.blc em {

				width: 120px;

				height: 40px;

				line-height: 40px;

				background: gray;

				display: block;

				font-style: normal;

				font-size: 18px;

				text-align: center;

				color: #FFF;

				margin-bottom: 10px;

			}


			.nob {

				display: none;

			}


			.nob a {

				width: 120px;

				height: 40px;

				line-height: 40px;

				background: red;

				display: block;

				font-style: normal;

				font-size: 18px;

				text-align: center;

				color: #FFF;

				text-decoration: none;

			}

		</style>

	</head>


	<body>

		<div class="box Acp">

			<div class="blc">

				<em>暂未开始</em>

			</div>

			<div class="nob">

				<a href="#" target="_blank">马上抢购</a>

			</div>

		</div>

		<div class="box Bcp">

			<div class="blc">

				<em>暂未开始</em>

			</div>

			<div class="nob">

				<a href="#" target="_blank">马上抢购</a>

			</div>

		</div>

		<div class="box Ccp">

			<div class="blc">

				<em>暂未开始</em>

			</div>

			<div class="nob">

				<a href="#" target="_blank">马上抢购</a>

			</div>

		</div>

	</body>

</html>

9 个解决方案

#1

这个肯定要后台控制了，不到时间请求也无效。不然人家修改页面代码，提前请求怎么办？
你要做的就是做个计时器。
var date=new Date(2016-12-25 10:00)
var beginTime=date.getTime();

然后获取现在的时间，计时器，大于beginTime就抛出链接地址。

#2

引用 1 楼 qq_29594393 的回复:
这个肯定要后台控制了，不到时间请求也无效。不然人家修改页面代码，提前请求怎么办？
你要做的就是做个计时器。
var date=new Date(2016-12-25 10:00)
var beginTime=date.getTime();

然后获取现在的时间，计时器，大于beginTime就抛出链接地址。


其实我们系统很烂，但是可以设置抢购时间，也可以让商品在那个点上线，但是就是前端没有这个时间接口调用，其实他改页面代码，让时间提前也没有用，因为商品都还没有上线，也买不下来，上级领导要的是时间到抛出链接，然后商品它会自动上线，这样就可以了。不知道大神是否有方法解决？

#3




var interval = 1000; 

function ShowCountDown(year,month,day,hour,minute,second,divname){//倒计时

	var now = new Date();//服务器当前时间

	var endDate = new Date(year,month-1,day,hour,minute,second); 

	var leftTime = endDate.getTime() - now.getTime(); 

	var leftsecond = parseInt(leftTime/1000); 

	if (leftsecond >= 0){

		var day1 = Math.floor(leftsecond/(60*60*24)); 

		var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

		var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

		var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

		var showtimebox = document.getElementById(divname);

		showtimebox.innerHTML = "<span>"+day1+"</span>天<span>"+hour+"</span>小时<span>"+minute+"</span>分<span>"+second+"</span>秒";		

		$(".lasttimebar").css("display","block");

	}else{

		$(".lasttimebar").css("display","none");

		$(".liveingbar").css("display","block");		

	}

} 

window.setInterval(function(){ShowCountDown(2016,08,06,07,0,0,'timebar');}, interval);



之前做奥运用的一个，你修改下自己用吧。

#4

1、每隔1秒通过ajax调用服务器反对时间的方法，获得服务器系统实现
2、判断的当时间在你预期的三个时间范围后，用js动态设置对应a的href

#5

引用 3 楼 webyellow 的回复: 



var interval = 1000; 

function ShowCountDown(year,month,day,hour,minute,second,divname){//倒计时

	var now = new Date();//服务器当前时间

	var endDate = new Date(year,month-1,day,hour,minute,second); 

	var leftTime = endDate.getTime() - now.getTime(); 

	var leftsecond = parseInt(leftTime/1000); 

	if (leftsecond >= 0){

		var day1 = Math.floor(leftsecond/(60*60*24)); 

		var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

		var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

		var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

		var showtimebox = document.getElementById(divname);

		showtimebox.innerHTML = "<span>"+day1+"</span>天<span>"+hour+"</span>小时<span>"+minute+"</span>分<span>"+second+"</span>秒";		

		$(".lasttimebar").css("display","block");

	}else{

		$(".lasttimebar").css("display","none");

		$(".liveingbar").css("display","block");		

	}

} 

window.setInterval(function(){ShowCountDown(2016,08,06,07,0,0,'timebar');}, interval);



之前做奥运用的一个，你修改下自己用吧。


兄台，你再帮我看下我设定的时间，倒计时停止，并把倒计时这个前端隐藏（lasttimebar的display由block变成none，并显示立即购买的按钮，即liveingbar的display由none变成block，可是我写了以下代码，却实现不了，大神帮我看下要怎么改？

下面是我的代码： 


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

        <div class="box" id="demo01">

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box" id="demo02">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box" id="demo03">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

            var interval = 1000;

 

            function ShowCountDown(time,dayElem,hourElem,minuteElem,secondElem) { //倒计时

                var nowDate = new Date().getTime(); //服务器当前时间

                var endDate = new Date(time).getTime();

                var syTime = endDate - nowDate;

                var sySecond = parseInt(syTime / 1000);

                if(sySecond > 0) {

                    sySecond -= 1;

                    var day = Math.floor((sySecond / 3600) / 24);

                    var hour = Math.floor((sySecond / 3600) % 24);

                    var minute = Math.floor((sySecond / 60) % 60);

                    var second = Math.floor(sySecond % 60);

                    dayElem && $(dayElem).text(day);//计算天

                    $(hourElem).text(hour<10?"0"+hour:hour);//计算小时

                    $(minuteElem).text(minute<10?"0"+minute:minute);//计算分

                    $(secondElem).text(second<10?"0"+second:second);// 计算秒

                    $(".lasttimebar").css("display","block");

                    $(".liveingbar").css("display", "none");

                } else {

                    $(".lasttimebar").css("display", "none");

                    $(".liveingbar").css("display", "block");

                }

            }

            window.setInterval(function() {

                //ShowCountDown(2016, 12, 27, 07, 0, 0, 'timebar1');

                //ShowCountDown(2016, 12, 29, 07, 0, 0, 'timebar2');

                //ShowCountDown(2016, 12, 16, 07, 0, 0, 'timebar3');

                ShowCountDown("2016/12/15 23:59:59","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");

                ShowCountDown("2016/12/29 23:59:59","#demo02 .day","#demo02 .hour","#demo02 .minute","#demo02 .second");

                ShowCountDown("2016/12/30 23:59:59","#demo03 .day","#demo03 .hour","#demo03 .minute","#demo03 .second");

            }, interval);

        </script>

 

    </body>

 

</html>

#6





<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

    	

        <div class="box" >

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar" id="demo01">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar" id="demo02">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar2">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar" id="demo03">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar3">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

        var interval = 1000; 

			function ShowCountDown(year,month,day,hour,minute,second,divname){ 

				var now = new Date();//服务器当前时间

				var endDate = new Date(year,month-1,day,hour,minute,second); 

				var leftTime = endDate.getTime() - now.getTime(); 

				var leftsecond = parseInt(leftTime/1000); 

				if (leftsecond >= 0){

					var day1 = Math.floor(leftsecond/(60*60*24)); 

					var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

					var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

					var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

					var showtimebox = document.getElementById(divname);

					showtimebox.innerHTML = "提示距离"+year+"年"+month+"月"+day+"日还有："+day1+"天"+hour+"小时"+minute+"分"+second+"秒";		

					$("#demo01").css("display","block");

					$(".liveingbar").css("display","none");

					$("#demo02").css("display","block");

					$(".liveingbar2").css("display","none");

					$("#demo03").css("display","block");

					$(".liveingbar3").css("display","none");		

				}else{

					$("#demo01").css("display","none");

					$(".liveingbar").css("display","block");

					$("#demo02").css("display","none");

					$(".liveingbar2").css("display","block");

					$("#demo03").css("display","none");

					$(".liveingbar3").css("display","block");		

				}

			} 

            window.setInterval(function() {

                ShowCountDown(2016, 12, 27, 07, 0, 0, 'demo01');

				ShowCountDown(2017, 12, 28, 07, 0, 0, 'demo02');

				ShowCountDown(2017, 12, 29, 07, 0, 0, 'demo03');

            }, interval);

        </script>

 

    </body>

</html>




水平有限，你根据这个来改改吧。

倒计时时间要程序输出时间，谨记~

#7

引用 6 楼 webyellow 的回复: 




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

    	

        <div class="box" >

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar" id="demo01">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar" id="demo02">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar2">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar" id="demo03">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar3">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

        var interval = 1000; 

			function ShowCountDown(year,month,day,hour,minute,second,divname){ 

				var now = new Date();//服务器当前时间

				var endDate = new Date(year,month-1,day,hour,minute,second); 

				var leftTime = endDate.getTime() - now.getTime(); 

				var leftsecond = parseInt(leftTime/1000); 

				if (leftsecond >= 0){

					var day1 = Math.floor(leftsecond/(60*60*24)); 

					var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

					var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

					var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

					var showtimebox = document.getElementById(divname);

					showtimebox.innerHTML = "提示距离"+year+"年"+month+"月"+day+"日还有："+day1+"天"+hour+"小时"+minute+"分"+second+"秒";		

					$("#demo01").css("display","block");

					$(".liveingbar").css("display","none");

					$("#demo02").css("display","block");

					$(".liveingbar2").css("display","none");

					$("#demo03").css("display","block");

					$(".liveingbar3").css("display","none");		

				}else{

					$("#demo01").css("display","none");

					$(".liveingbar").css("display","block");

					$("#demo02").css("display","none");

					$(".liveingbar2").css("display","block");

					$("#demo03").css("display","none");

					$(".liveingbar3").css("display","block");		

				}

			} 

            window.setInterval(function() {

                ShowCountDown(2016, 12, 27, 07, 0, 0, 'demo01');

				ShowCountDown(2017, 12, 28, 07, 0, 0, 'demo02');

				ShowCountDown(2017, 12, 29, 07, 0, 0, 'demo03');

            }, interval);

        </script>

 

    </body>

</html>




水平有限，你根据这个来改改吧。

倒计时时间要程序输出时间，谨记~


感冒，脑袋跟手指不协调了。

当前时间要用服务器时间。
这个不用一直请求服务器时间，
是取一次服务器时间和本机时间差。
之后再倒计时。

当然你的页面是不能有缓存的。（例如PHP打印出的时间，要次次打印，不能有缓存。）
或者你让PHP给你做个时间的接口，每次访问请求个时间戳。

#8

引用 6 楼 webyellow 的回复: 




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

    	

        <div class="box" >

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar" id="demo01">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar" id="demo02">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar2">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar" id="demo03">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar3">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

        var interval = 1000; 

			function ShowCountDown(year,month,day,hour,minute,second,divname){ 

				var now = new Date();//服务器当前时间

				var endDate = new Date(year,month-1,day,hour,minute,second); 

				var leftTime = endDate.getTime() - now.getTime(); 

				var leftsecond = parseInt(leftTime/1000); 

				if (leftsecond >= 0){

					var day1 = Math.floor(leftsecond/(60*60*24)); 

					var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

					var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

					var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

					var showtimebox = document.getElementById(divname);

					showtimebox.innerHTML = "提示距离"+year+"年"+month+"月"+day+"日还有："+day1+"天"+hour+"小时"+minute+"分"+second+"秒";		

					$("#demo01").css("display","block");

					$(".liveingbar").css("display","none");

					$("#demo02").css("display","block");

					$(".liveingbar2").css("display","none");

					$("#demo03").css("display","block");

					$(".liveingbar3").css("display","none");		

				}else{

					$("#demo01").css("display","none");

					$(".liveingbar").css("display","block");

					$("#demo02").css("display","none");

					$(".liveingbar2").css("display","block");

					$("#demo03").css("display","none");

					$(".liveingbar3").css("display","block");		

				}

			} 

            window.setInterval(function() {

                ShowCountDown(2016, 12, 27, 07, 0, 0, 'demo01');

				ShowCountDown(2017, 12, 28, 07, 0, 0, 'demo02');

				ShowCountDown(2017, 12, 29, 07, 0, 0, 'demo03');

            }, interval);

        </script>

 

    </body>

</html>




水平有限，你根据这个来改改吧。

倒计时时间要程序输出时间，谨记~


虽然程序还是有点问题，就是把其中一个日期改为过去的一个日期，并不能调出那个【马上抢购】，不过还是要谢谢你！

#9

嗯，仔细想想这个只能倒计时一个。

http://www.oschina.net/code/snippet_1171134_33956

根据这个修改下。

#1

这个肯定要后台控制了，不到时间请求也无效。不然人家修改页面代码，提前请求怎么办？
你要做的就是做个计时器。
var date=new Date(2016-12-25 10:00)
var beginTime=date.getTime();

然后获取现在的时间，计时器，大于beginTime就抛出链接地址。

#2

引用 1 楼 qq_29594393 的回复:
这个肯定要后台控制了，不到时间请求也无效。不然人家修改页面代码，提前请求怎么办？
你要做的就是做个计时器。
var date=new Date(2016-12-25 10:00)
var beginTime=date.getTime();

然后获取现在的时间，计时器，大于beginTime就抛出链接地址。


其实我们系统很烂，但是可以设置抢购时间，也可以让商品在那个点上线，但是就是前端没有这个时间接口调用，其实他改页面代码，让时间提前也没有用，因为商品都还没有上线，也买不下来，上级领导要的是时间到抛出链接，然后商品它会自动上线，这样就可以了。不知道大神是否有方法解决？

#3




var interval = 1000; 

function ShowCountDown(year,month,day,hour,minute,second,divname){//倒计时

	var now = new Date();//服务器当前时间

	var endDate = new Date(year,month-1,day,hour,minute,second); 

	var leftTime = endDate.getTime() - now.getTime(); 

	var leftsecond = parseInt(leftTime/1000); 

	if (leftsecond >= 0){

		var day1 = Math.floor(leftsecond/(60*60*24)); 

		var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

		var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

		var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

		var showtimebox = document.getElementById(divname);

		showtimebox.innerHTML = "<span>"+day1+"</span>天<span>"+hour+"</span>小时<span>"+minute+"</span>分<span>"+second+"</span>秒";		

		$(".lasttimebar").css("display","block");

	}else{

		$(".lasttimebar").css("display","none");

		$(".liveingbar").css("display","block");		

	}

} 

window.setInterval(function(){ShowCountDown(2016,08,06,07,0,0,'timebar');}, interval);



之前做奥运用的一个，你修改下自己用吧。

#4

1、每隔1秒通过ajax调用服务器反对时间的方法，获得服务器系统实现
2、判断的当时间在你预期的三个时间范围后，用js动态设置对应a的href

#5

引用 3 楼 webyellow 的回复: 



var interval = 1000; 

function ShowCountDown(year,month,day,hour,minute,second,divname){//倒计时

	var now = new Date();//服务器当前时间

	var endDate = new Date(year,month-1,day,hour,minute,second); 

	var leftTime = endDate.getTime() - now.getTime(); 

	var leftsecond = parseInt(leftTime/1000); 

	if (leftsecond >= 0){

		var day1 = Math.floor(leftsecond/(60*60*24)); 

		var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

		var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

		var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

		var showtimebox = document.getElementById(divname);

		showtimebox.innerHTML = "<span>"+day1+"</span>天<span>"+hour+"</span>小时<span>"+minute+"</span>分<span>"+second+"</span>秒";		

		$(".lasttimebar").css("display","block");

	}else{

		$(".lasttimebar").css("display","none");

		$(".liveingbar").css("display","block");		

	}

} 

window.setInterval(function(){ShowCountDown(2016,08,06,07,0,0,'timebar');}, interval);



之前做奥运用的一个，你修改下自己用吧。


兄台，你再帮我看下我设定的时间，倒计时停止，并把倒计时这个前端隐藏（lasttimebar的display由block变成none，并显示立即购买的按钮，即liveingbar的display由none变成block，可是我写了以下代码，却实现不了，大神帮我看下要怎么改？

下面是我的代码： 


<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

        <div class="box" id="demo01">

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box" id="demo02">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box" id="demo03">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

            var interval = 1000;

 

            function ShowCountDown(time,dayElem,hourElem,minuteElem,secondElem) { //倒计时

                var nowDate = new Date().getTime(); //服务器当前时间

                var endDate = new Date(time).getTime();

                var syTime = endDate - nowDate;

                var sySecond = parseInt(syTime / 1000);

                if(sySecond > 0) {

                    sySecond -= 1;

                    var day = Math.floor((sySecond / 3600) / 24);

                    var hour = Math.floor((sySecond / 3600) % 24);

                    var minute = Math.floor((sySecond / 60) % 60);

                    var second = Math.floor(sySecond % 60);

                    dayElem && $(dayElem).text(day);//计算天

                    $(hourElem).text(hour<10?"0"+hour:hour);//计算小时

                    $(minuteElem).text(minute<10?"0"+minute:minute);//计算分

                    $(secondElem).text(second<10?"0"+second:second);// 计算秒

                    $(".lasttimebar").css("display","block");

                    $(".liveingbar").css("display", "none");

                } else {

                    $(".lasttimebar").css("display", "none");

                    $(".liveingbar").css("display", "block");

                }

            }

            window.setInterval(function() {

                //ShowCountDown(2016, 12, 27, 07, 0, 0, 'timebar1');

                //ShowCountDown(2016, 12, 29, 07, 0, 0, 'timebar2');

                //ShowCountDown(2016, 12, 16, 07, 0, 0, 'timebar3');

                ShowCountDown("2016/12/15 23:59:59","#demo01 .day","#demo01 .hour","#demo01 .minute","#demo01 .second");

                ShowCountDown("2016/12/29 23:59:59","#demo02 .day","#demo02 .hour","#demo02 .minute","#demo02 .second");

                ShowCountDown("2016/12/30 23:59:59","#demo03 .day","#demo03 .hour","#demo03 .minute","#demo03 .second");

            }, interval);

        </script>

 

    </body>

 

</html>

#6





<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

    	

        <div class="box" >

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar" id="demo01">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar" id="demo02">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar2">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar" id="demo03">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar3">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

        var interval = 1000; 

			function ShowCountDown(year,month,day,hour,minute,second,divname){ 

				var now = new Date();//服务器当前时间

				var endDate = new Date(year,month-1,day,hour,minute,second); 

				var leftTime = endDate.getTime() - now.getTime(); 

				var leftsecond = parseInt(leftTime/1000); 

				if (leftsecond >= 0){

					var day1 = Math.floor(leftsecond/(60*60*24)); 

					var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

					var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

					var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

					var showtimebox = document.getElementById(divname);

					showtimebox.innerHTML = "提示距离"+year+"年"+month+"月"+day+"日还有："+day1+"天"+hour+"小时"+minute+"分"+second+"秒";		

					$("#demo01").css("display","block");

					$(".liveingbar").css("display","none");

					$("#demo02").css("display","block");

					$(".liveingbar2").css("display","none");

					$("#demo03").css("display","block");

					$(".liveingbar3").css("display","none");		

				}else{

					$("#demo01").css("display","none");

					$(".liveingbar").css("display","block");

					$("#demo02").css("display","none");

					$(".liveingbar2").css("display","block");

					$("#demo03").css("display","none");

					$(".liveingbar3").css("display","block");		

				}

			} 

            window.setInterval(function() {

                ShowCountDown(2016, 12, 27, 07, 0, 0, 'demo01');

				ShowCountDown(2017, 12, 28, 07, 0, 0, 'demo02');

				ShowCountDown(2017, 12, 29, 07, 0, 0, 'demo03');

            }, interval);

        </script>

 

    </body>

</html>




水平有限，你根据这个来改改吧。

倒计时时间要程序输出时间，谨记~

#7

引用 6 楼 webyellow 的回复: 




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

    	

        <div class="box" >

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar" id="demo01">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar" id="demo02">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar2">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar" id="demo03">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar3">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

        var interval = 1000; 

			function ShowCountDown(year,month,day,hour,minute,second,divname){ 

				var now = new Date();//服务器当前时间

				var endDate = new Date(year,month-1,day,hour,minute,second); 

				var leftTime = endDate.getTime() - now.getTime(); 

				var leftsecond = parseInt(leftTime/1000); 

				if (leftsecond >= 0){

					var day1 = Math.floor(leftsecond/(60*60*24)); 

					var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

					var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

					var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

					var showtimebox = document.getElementById(divname);

					showtimebox.innerHTML = "提示距离"+year+"年"+month+"月"+day+"日还有："+day1+"天"+hour+"小时"+minute+"分"+second+"秒";		

					$("#demo01").css("display","block");

					$(".liveingbar").css("display","none");

					$("#demo02").css("display","block");

					$(".liveingbar2").css("display","none");

					$("#demo03").css("display","block");

					$(".liveingbar3").css("display","none");		

				}else{

					$("#demo01").css("display","none");

					$(".liveingbar").css("display","block");

					$("#demo02").css("display","none");

					$(".liveingbar2").css("display","block");

					$("#demo03").css("display","none");

					$(".liveingbar3").css("display","block");		

				}

			} 

            window.setInterval(function() {

                ShowCountDown(2016, 12, 27, 07, 0, 0, 'demo01');

				ShowCountDown(2017, 12, 28, 07, 0, 0, 'demo02');

				ShowCountDown(2017, 12, 29, 07, 0, 0, 'demo03');

            }, interval);

        </script>

 

    </body>

</html>




水平有限，你根据这个来改改吧。

倒计时时间要程序输出时间，谨记~


感冒，脑袋跟手指不协调了。

当前时间要用服务器时间。
这个不用一直请求服务器时间，
是取一次服务器时间和本机时间差。
之后再倒计时。

当然你的页面是不能有缓存的。（例如PHP打印出的时间，要次次打印，不能有缓存。）
或者你让PHP给你做个时间的接口，每次访问请求个时间戳。

#8

引用 6 楼 webyellow 的回复: 




<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="http://www.fliportsupplies.com/javascript/jquery.js"></script>

    </head>

    <body>

    	

        <div class="box" >

            <div class="ble">产品A</div>

            <div class="bre">

              <div class="lasttimebar" id="demo01">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar">

                    马上抢购               

                </div>               

            </div>           

        </div>

        <div class="box">

            <div class="ble">产品B</div>

            <div class="bre">

              <div class="lasttimebar" id="demo02">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar2">

                    马上抢购               

                </div>               

            </div>                   

        </div>

        <div class="box">

            <div class="ble">产品C</div>

            <div class="bre">

              <div class="lasttimebar" id="demo03">

                <span class="day">-</span>天<span class="hour">-</span>时<span class="minute">-</span>分<span class="second">-</span>秒 

             </div>

                <div class="liveingbar3">

                    马上抢购               

                </div>               

            </div>       

        </div>

        <script type="text/javascript">

        var interval = 1000; 

			function ShowCountDown(year,month,day,hour,minute,second,divname){ 

				var now = new Date();//服务器当前时间

				var endDate = new Date(year,month-1,day,hour,minute,second); 

				var leftTime = endDate.getTime() - now.getTime(); 

				var leftsecond = parseInt(leftTime/1000); 

				if (leftsecond >= 0){

					var day1 = Math.floor(leftsecond/(60*60*24)); 

					var hour = Math.floor((leftsecond-day1*24*60*60)/3600); 

					var minute = Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); 

					var second = Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); 

					var showtimebox = document.getElementById(divname);

					showtimebox.innerHTML = "提示距离"+year+"年"+month+"月"+day+"日还有："+day1+"天"+hour+"小时"+minute+"分"+second+"秒";		

					$("#demo01").css("display","block");

					$(".liveingbar").css("display","none");

					$("#demo02").css("display","block");

					$(".liveingbar2").css("display","none");

					$("#demo03").css("display","block");

					$(".liveingbar3").css("display","none");		

				}else{

					$("#demo01").css("display","none");

					$(".liveingbar").css("display","block");

					$("#demo02").css("display","none");

					$(".liveingbar2").css("display","block");

					$("#demo03").css("display","none");

					$(".liveingbar3").css("display","block");		

				}

			} 

            window.setInterval(function() {

                ShowCountDown(2016, 12, 27, 07, 0, 0, 'demo01');

				ShowCountDown(2017, 12, 28, 07, 0, 0, 'demo02');

				ShowCountDown(2017, 12, 29, 07, 0, 0, 'demo03');

            }, interval);

        </script>

 

    </body>

</html>




水平有限，你根据这个来改改吧。

倒计时时间要程序输出时间，谨记~


虽然程序还是有点问题，就是把其中一个日期改为过去的一个日期，并不能调出那个【马上抢购】，不过还是要谢谢你！

#9

嗯，仔细想想这个只能倒计时一个。

http://www.oschina.net/code/snippet_1171134_33956

根据这个修改下。
标签：

相关文章