JS倒计时问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS倒计时问题相关的知识，希望对你有一定的参考价值。

<script language="javascript">
var wait = <%=lingqutime%>; //设置秒数(单位秒)
var secs = 0;
for(var i=1;i<=wait;i++)

window.setTimeout("sTimer("+i+")",i*1000);

function sTimer(num)

if(num==wait)

document.getElementById("BtnOk").value=" 点击领取 ";
document.getElementById("BtnOk").disabled=false;

else

secs=wait-num;
document.getElementById("BtnOk").value="("+secs+")秒后开放领取";


//-->
</script>

当我这个 lingqutime的值大于10000之后就感觉打开页面很卡，请问有别的方法实现这个效果吗。

我要达到的目的就是 控制一个按钮，在指定时间之后才可以点。不然就在按钮上显示几秒后可以按。这个指定时间有可能是1万也有可能是10万。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="DAYU">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="DAYU">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<?=date_default_timezone_set("Asia/Shanghai");?><!-- 这里会输出1先不管 -->
<?php
//3天后的时间
$d =strtotime('+3 days');
$threeday=date('Y-m-d H:i:s',$d);
?>
<script language="javascript">
function countdown(endtime, today)

//today = new Date();
//var testDate = new Date();
//today = new Date();
//target_time=new Date(endtime);
testDate = new Date();
today = testDate.format("yyyy-MM-dd hh:mm:ss");
target_time=endtime;
//alert(target_time);
//timeold=(target_time.getTime()-today.getTime());
//alert(target_time);
//alert(today);return;
//--------------------------------
timeold =DateDiff(target_time, today);
//alert(DateDiff(target_time, today));
//------------------------------
sectimeold=timeold/1000;
secondsold=Math.floor(sectimeold);//走到这里好像就有问题了
msPerDay=24*60*60*1000;
e_daysold=timeold/msPerDay;
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor(e_minsold);
e_seconds=(e_minsold-minsold)*60;
seconds=Math.floor(e_seconds);
e_millisecond=(e_seconds-seconds)*1000;
millisecond=Math.floor(e_millisecond);
millisecond10=Math.floor(millisecond);

the_element = document.getElementById('counttime');
the_element.innerHTML="仅剩<br> "+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";

window.setTimeout("countdown('" + endtime + "', today)", 100);

</script>

<BODY>
<table><tr><td width="175"><SPAN id="counttime" style="FONT-WEIGHT: bold; COLOR: #000000; FONT-FAMILY:Arial"></SPAN>
<script language="javascript">
/**
* 时间对象的格式化;
*/
Date.prototype.format = function(format)
/*
* eg:format="yyyy-MM-dd hh:mm:ss";
*/
var o =
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second
"q+" : Math.floor((this.getMonth()+3)/3), //quarter
"S" : this.getMilliseconds() //millisecond


if(/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));


for(var k in o)
if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));


return format;


//比较2个时间的差值
function DateDiff(dmEndDate, dmStartDate)

dmEndDate = dmEndDate.replace(/-/g, "/");
dmEndDate = new Date(dmEndDate)
dmStartDate = dmStartDate.replace(/-/g, "/");
dmStartDate = new Date(dmStartDate)
var time = dmEndDate.getTime() - dmStartDate.getTime();
var iDays = parseInt(time / (1000 * 60 * 60 * 24));
return iDays

//*****************************************
// var endtime = "<?=date('Y-m-d H:i:s',time());?>";
//var testDate = new Date();
//var today = testDate.format("yyyy年MM月dd日hh小时mm分ss秒");
//var today = testDate.format("yyyy-MM-dd hh:mm:ss");
//var endtime = '6-2-2013 17:35:00';

//var endtime = "<?=date('Y-m-d H:i:s',time());?>";
var endtime = "<?=$threeday;?>";
//alert(endtime);
//var today = new Date();
var testDate = new Date();
var today = testDate.format("yyyy-MM-dd hh:mm:ss");
// alert(today)
//countdown("<?=date('Y-m-d H:i:s',time());?>", today);
countdown("<?=$threeday;?>", today);
</script></td></tr></table>
</BODY>
</HTML>
</body>
</html>
</body>
</html>
-------------------------------------------------------
页面保存为PHP文件去执行.
仅剩
0天0小时0分0秒//这个结果不对,应该是2天几分几秒才对 参考技术A <script language="javascript">
var wait = <%=lingqutime%>; //设置秒数(单位秒)
var i = 0;
var iid = 0;

iid = setInterval("sTimer()",1000);

function sTimer()

var r=wait-i;
if(r==0)

clearInterval(iid);
document.getElementById("BtnOk").value=" 点击领取 ";
document.getElementById("BtnOk").disabled=false;

else

document.getElementById("BtnOk").value="("+r+")秒后开放领取";
i++;


//-->本回答被提问者采纳

Laravel (+ Vue.js) 广播 - 如何设置倒计时然后发送广播消息？

【中文标题】Laravel (+ Vue.js) 广播 - 如何设置倒计时然后发送广播消息？【英文标题】：Laravel (+ Vue.js) Broadcast - How to set up a countdown and then send a broadcast message? 【发布时间】：2021-05-20 19:47:51 【问题描述】：

我想用 Laravel 的广播系统创建一个多人测验（我使用 Vue.js，因此页面不需要刷新）。为此，我需要设置一个系统来在倒计时结束时停止提问（服务器将向玩家发送广播消息）。但是我不知道如何正确地做到这一点并获得最佳性能。 我想使用排队作业：当一个问题开始时，会创建一个作业并延迟 20 秒排队。当作业执行时（20 秒后），会向玩家发送一条广播消息，指示问题已过期。

这是最好的方法还是有其他更好的方法？

提前感谢您的回答

【问题讨论】：

嘿伙计，你明白了吗？ 【参考方案1】：

队列可能不是最好的，因为当队列填满时，您最终可能会发送延迟响应。您最好在客户端（在 Vue 中）跟踪时间，并在服务器上验证响应。

当一个问题开始时，存储开始时间。在客户端运行倒计时，并在计时器结束时显示通知。当请求发送到服务器时，查看 20s 是否已过期。

您可以使用 Websockets 来帮助所有玩家保持同步。

【讨论】：

以上是关于JS倒计时问题的主要内容，如果未能解决你的问题，请参考以下文章

手机休眠，js倒计时停止

js实现拍简单倒计时功能

JS如何实现倒计时功能，如何防止刷新。

JS 倒计时实现代码(时、分，秒)

这段倒计时js，打开页面时就自动倒计时。怎么改成单击后开始计时？

js实现多个倒计时并行 js拼团倒计时