recherche

Maison  >  Article  >  développement back-end  >  Explication détaillée de la façon d'implémenter la fonction de compte à rebours en temps réel en PHP

Explication détaillée de la façon d'implémenter la fonction de compte à rebours en temps réel en PHP

墨辰丷
墨辰丷original
2018-05-25 11:55:422914parcourir

Cet article présente principalement la méthode d'implémentation de la fonction de compte à rebours en temps réel PHP et analyse les étapes spécifiques et les compétences opérationnelles associées de PHP combinées avec l'opération d'horodatage du JS frontal pour implémenter la fonction de compte à rebours sur la base d'exemples spécifiques. ceux qui en ont besoin peuvent s'y référer

L'exemple de cet article décrit comment implémenter la fonction de compte à rebours en temps réel en PHP. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ces derniers jours, l'entreprise va disposer d'une fonction d'achat à durée limitée. Cela nécessite un compte à rebours et un compte à rebours en temps réel.

Exigences :

1) Un compte à rebours en temps réel des heures, minutes et secondes doit être affiché
2) La modification de la date et de l'heure côté client permettra n'affecte pas l'affichage normal du compte à rebours (c'est-à-dire en fonction de l'heure du serveur)

En fait, cela a les mêmes exigences que la fonction de limite de temps de nombreux systèmes d'examen et autres

. Idées de solutions :

1) Vous ne pouvez pas toujours utiliser ajax à chaque fois. Obtenez l'heure du serveur toutes les secondes.

Le compte à rebours en temps réel doit donc être implémenté avec javascript . C'est très simple. Il y a beaucoup d'exemples sur Internet.

2) Le problème est maintenant de résoudre le problème de la modification de la date et de l'heure côté client.La solution est de calculer la différence de temps entre l'heure du client et l'heure du serveur.

De cette façon, vous n'avez besoin d'exécuter php qu'une seule fois. Le temps du compte à rebours en temps réel est le même. car L'heure du serveur est synchronisée.

Théoriquement, elle est synchronisée, mais lors des tests réels, il y aura une erreur de 1 seconde (la raison spécifique est liée à la vitesse du réseau. Plus la vitesse du réseau est rapide, plus l'erreur est petite), mais cela n'affectera certainement pas nos exigences ci-dessus

Exemple :

Code :

<.>

<?php
//php的时间是以秒算。js的时间以毫秒算
date_default_timezone_set("Asia/Hong_Kong");//地区
//配置每天的活动时间段
$starttimestr = "09:00:00";
$endtimestr = "18:30:00";
$starttime = strtotime($starttimestr);
$endtime = strtotime($endtimestr);
$nowtime = time();
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP实时倒计时!</title>
<script language="JavaScript">
<!-- //
var EndTime=<?=$endtime*1000?>;
var NowTime = new Date();
//计算出服务器和客户端的时间差。
var dTime = <?=$nowtime*1000?>-NowTime.getTime();
function GetRTime(){
var NowTime = new Date();
var nMS = EndTime - NowTime.getTime()-dTime;
var nH=Math.floor(nMS/(1000*60*60)) % 24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
document.getElementById("RemainH").innerHTML=nH;
document.getElementById("RemainM").innerHTML=nM;
document.getElementById("RemainS").innerHTML=nS;
if(nMS>5*59*1000&&nMS<=5*60*1000)
{
alert("还有最后五分钟！");
}
setTimeout("GetRTime()",1000);
}
window.onload=GetRTime;
// -->
</script>
</head>
<body>
<h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1>
</body>
</html>

Exemple 2 :

Modification de certains des bugs ci-dessus

Code : 

<?php
//php的时间是以秒算。js的时间以毫秒算
date_default_timezone_set("Asia/Hong_Kong");//地区
//配置每天的活动时间段
$starttimestr = "09:00:00";
$endtimestr = "18:30:00";
$starttime = strtotime($starttimestr);
$endtime = strtotime($endtimestr);
$nowtime = time();
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP实时倒计时!</title>
<script language="JavaScript">
<!-- //
var EndTime=<?=$endtime*1000?>;
var NowTime = new Date();
//计算出服务器和客户端的时间差。
var dTime = NowTime.getTime()-<?=$nowtime*1000?>;
var runtimes = 0;
function GetRTime(){
var NowTime = new Date();
var dTimeNew = NowTime.getTime()-<?=$nowtime*1000?>;
var dTimesM = Math.abs(Math.floor((dTimeNew-runtimes*1000-dTime)/1000));//客户端时间和服务器当前时间的差
if (dTimesM>1) {//如果用户修改了客户端时间，就重新load本页
window.location.reload();
}
var nMS = EndTime - NowTime.getTime()+dTime;
var nH=Math.floor(nMS/(1000*60*60)) % 24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
document.getElementById("RemainH").innerHTML=nH;
document.getElementById("RemainM").innerHTML=nM;
document.getElementById("RemainS").innerHTML=nS;
if(nMS>5*59*1000&&nMS<=5*60*1000)
{
alert("还有最后五分钟！");
}
runtimes++;
setTimeout("GetRTime()",1000);
}
window.onload=GetRTime;
// -->
</script>
</head>
<body>
<h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1>
</body>
</html>

Exemple 3 :

L'idée est différente et beaucoup plus simple.

Code : 

<?php
//php的时间是以秒算。js的时间以毫秒算
date_default_timezone_set("Asia/Hong_Kong");//地区
//配置每天的活动时间段
$starttimestr = "09:00:00";
$endtimestr = "13:50:00";
$starttime = strtotime($starttimestr);
$endtime = strtotime($endtimestr);
$nowtime = time();
if ($nowtime<$starttime){
die("活动还没开始,活动时间是：{$starttimestr}至{$endtimestr}");
}
$lefttime = $endtime-$nowtime; //实际剩下的时间（秒）
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP实时倒计时!</title>
<script language="JavaScript">
<!-- //
var runtimes = 0;
function GetRTime(){
var nMS = <?=$lefttime?>*1000-runtimes*1000;
var nH=Math.floor(nMS/(1000*60*60))%24;
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
document.getElementById("RemainH").innerHTML=nH;
document.getElementById("RemainM").innerHTML=nM;
document.getElementById("RemainS").innerHTML=nS;
if(nMS>5*59*1000&&nMS<=5*60*1000)
{
alert("还有最后五分钟！");
}
runtimes++;
setTimeout("GetRTime()",1000);
}
window.onload=GetRTime;
// -->
</script>
</head>
<body>
<h1><strong id="RemainH">XX</strong>:<strong id="RemainM">XX</strong>:<strong id="RemainS">XX</strong></h1>
</body>
</html>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.


Recommandations associées :

Code d'implémentation jQuery pour les fonctions

Compte à rebours et SMS Compte à rebours

js implémente un

compte à rebours exemple de partage d'effet d'animation via l'objet Date

jQuery implémente l'envoi de messages texte

Compte à reboursFonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la façon d'intercepter la première position non nulle dans une chaîne en utilisant PHPArticle suivant：Explication détaillée de la façon d'intercepter la première position non nulle dans une chaîne en utilisant PHP

Articles Liés

Voir plus