Maison >interface Web >js tutoriel >Explication détaillée des exemples d'utilisation de minuteries en JavaScript
Explication détaillée des exemples d'utilisation de minuteries en JavaScript
- 黄舟original
- 2017-11-18 14:11:541910parcourir
Dans notre article précédent, nous vous avons présenté les principes de Timer en JavaScript Je pense que beaucoup de gars comprennent mieux le fonctionnement de JavaScript timer, maintenant que. on connaît le principe, laissez-nous vous présenter l'utilisation des timers en JavaScript !
En javascript, il existe deux fonctions dédiées aux timers, à savoir :
1. Compte à rebours :
timename=setTimeout("function();",delaytime);2. Minuterie de boucle :
timename=setInterval("function();",delaytime);Le premier paramètre "fonction()" est l'action à effectuer lorsque la minuterie est déclenchée, qui peut être une fonction, ou il peut s'agir de plusieurs fonctions. , séparés par ";". Par exemple, si vous souhaitez afficher deux fenêtres d'avertissement, vous pouvez remplacer "function();" par "alert('Première fenêtre d'avertissement !'); alert('Deuxième fenêtre d'avertissement !');"; Le deuxième paramètre "delaytime" est le temps d'intervalle en millisecondes, c'est-à-dire que remplir "5000" signifie 5 secondes.
Le compte à rebours déclenche un événement après l'heure spécifiée, tandis que le minuteur en boucle déclenche l'événement à plusieurs reprises lorsque l'intervalle arrive. La différence entre les deux est que le premier ne fonctionne qu'une seule fois, tandis que le second fonctionne en continu.
Par exemple, après avoir ouvert une page et souhaité passer automatiquement à une autre page toutes les quelques secondes, vous devez utiliser le compte à rebours "setTimeout("function();",delaytime)", et si vous souhaitez définir une phrase pour qu'elle apparaisse un mot à la fois,
nécessite l'utilisation du minuteur de boucle "setInterval("function();",delaytime)".
document.activeElement.id. Utilisez if pour déterminer si document.activeElement.id et l'ID du formulaire sont identiques. Par exemple : if ("mid" == document.activeElement.id) {alert();}, "mid" est l'ID correspondant au formulaire.
est utilisé pour spécifier un programme à exécuter après une période de temps spécifique.
setTimeout("function", time) définit un objet timeout
expression. setInterval("function",time) définit un objet timeout
SetInterval est automatiquement répété et setTimeout ne sera pas répété.
clearTimeout(object) efface l'objet setTimeout
clearInterval(object) efface l'objet setInterval
Juste deux exemples.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var str = "这个是测试用的范例文字";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<p id="word"></p><br/><br/>
</body>
</html>Le code est le suivant :
<!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=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //间隔时间5秒钟
var c=0;
function scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="定时检查第<b> "+c+" </b>次<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
}
document.getElementByIdx_x_x('word').innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<p id="word"></p><br/><br/>
</body>
</html>Le code est le suivant :
Exemple 4 : Saut dans le temps du compte à rebours<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function count() {
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
setTimeout("alert('十秒钟到！')",10000)
}
</script>
<body>
<p id="m"></p>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>
Le code est le suivant :
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ds04.jsp' starting page</title>
<span id="tiao">3</span>
<a href="javascript:countDown"> </a>秒后自动跳转……
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
<!--脚本开始-->
<script language="javascript" type="">
function countDown(secs){
tiao.innerText=secs;
if(--secs>0)
setTimeout("countDown("+secs+")",1000);
}
countDown(3);
</script>
<!--脚本结束-->
</head>Le code est le suivant :
Exemple 7 :<head>
<meta http-equiv="refresh" content="2;url='b.html'">
</head>Le code est le suivant :
Exemple 8 :<script language="javascript" type="text/javascript">
setTimeout("window.location.href='b.html'", 2000);
//下面两个都可以用
//setTimeout("javascript:location.href='b.html'", 2000);
//setTimeout("window.location='b.html'", 2000);
</script>Le code est le suivant :
<span id="totalSecond">2</span>
<script language="javascript" type="text/javascript">
var second = document.getElementByIdx_x('totalSecond').innerHTML;
if(isNaN(second)){
//……不是数字的处理方法
}else{
setInterval(function(){
document.getElementByIdx_x('totalSecond').innerHTML = --second;
if (second <= 0) {
window.location = 'b.html';
}
}, 1000);
}
</script>minuterie js (exécuter une fois, répéter l'exécution)Partager un morceau de code js , un petit exemple de minuterie js, divisé en horaires d'exécution une fois et en répétition d'exécution. Pour référence pour les débutants.
1. Le code du timer
qui est exécuté une seule fois est le suivant :
2. qui est exécuté à plusieurs reprises est le suivant :<script>
//定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
</script>Remarque : S'il y a deux méthodes sur une page, qui sont toutes deux exécutées après le chargement de la page, mais qui ne parviennent pas à l'être exécuté dans l'ordre, vous pouvez vous référer aux méthodes suivantes pour résoudre le problème : <script>
function hello(){
alert("hello");
}
//重复执行某个方法
var t1 = window.setInterval(hello,1000);
var t2 = window.setInterval("hello()",3000);
//去掉定时器的方法
window.clearInterval(t1);
</script>Vous pouvez ajouter une minuterie dans la méthode onload, définir une minuterie et la "retarder" pendant un certain temps avant de l'exécuter, ce qui peut être pris en compte pour distinguer l’ordre de chargement des pages et les méthodes d’exécution. Le code est le suivant :<!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 runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var YC = new Object();
function beginYC()
{
var secondsYC = document.getElementById("txtYCSeconds").value;
try
{
YC = setTimeout("alert('延迟"+secondsYC+"秒成功')",secondsYC*1000);
}
catch(e)
{
alert("请输入正确的秒数。");
}
}
function overYC()
{
clearTimeout(YC);
YC=null;
alert("终止延迟成功。");
}
/**************************↓↓↓↓定时器的使用↓↓↓↓********************************/
var timerDS = new Object();
var timerDDS = new Object();
function beginDS()
{
sn.innerHTML = "0";
timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
}
function goonDS()
{
timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
}
function overDS()
{
clearInterval(timerDS);
timerDS=null;
}
function delayDS()
{
overDS();
timerDDS = setTimeout("goonDS()",document.getElementById("txtDDSSeconds").value*1000);
}
function addOne()
{
if(sn.innerHTML=="10")
{
overDS();
alert("恭喜你，已成功达到10秒");
return;
}
sn.innerHTML=parseInt(sn.innerHTML,10)+1;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
延迟器的使用：</p>
<p>
<label id="Label2" title="延迟秒数："></label>
<input type="text" id="txtYCSeconds" value="3" />
<input type="button" id="btnBYC" onclick="javascript:beginYC()" value="开始延迟" />
<input type="button" id="btnOYC" onclick="javascript:overYC()" value="终止延迟" />
<input type="button" id="Button1" onclick="javascript:alert('good monrning');" value="普通弹窗" />
</p>
<br />
<p>
定时器的使用：</p>
<p>
<p id="sn">0</p>
<label id="Label1" title="定时间隔秒数："></label>
<input type="text" id="txtIntervalSeconds" value="1" />
<input type="button" id="btnBDS" onclick="javascript:beginDS()" value="启动定时" />
<input type="button" id="btnODS" onclick="javascript:overDS()" value="终止定时" />
<input type="button" id="btnGDS" onclick="javascript:goonDS()" value="继续定时" />
<label id="ds" title="延迟秒数："></label>
<input type="text" id="txtDDSSeconds" value="5" />
<input type="button" id="btnDDS" onclick="javascript:delayDS()" value="延迟定时" />
</p>
</form>
</body>
</html>Nous avons découvert JavaScript dans l'article précédent Basé sur le principe des timers, et sur la base de l'introduction à l'utilisation dans cet article, je pense que tout le monde peut maîtriser l'utilisation des timers en JavaScript. J'espère que cela vous sera utile dans votre travail !
Recommandations associées :
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript