简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Créer un compte à rebours de minutes et de secondes avec JS

Créer un compte à rebours de minutes et de secondes avec JS

怪我咯
怪我咯original
2017-06-29 10:47:412439parcourir

Cet article présente principalement la méthode d'implémentation du compte à rebours JavaScript minutes et secondes, qui peut obtenir l'effet d'un compte à rebours en millisecondes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

article L'exemple décrit la méthode d'implémentation du compte à rebours JavaScript des minutes et des secondes. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Objectif de base

Concevoir un compte à rebours en JavaScript, une fois le temps écoulé, le bouton deviendra non cliquable

state

L'effet spécifique est comme indiqué ci-dessous Afin d'illustrer le problème, la table est ajustée pour sauter toutes les 50 millisecondes, c'est-à-dire toutes les

.

Lorsqu'il est réellement utilisé, SetInterval("clock.move()",50); in window.

onload=function(){...} peut être ajusté de 50 à 1000.

Le bouton peut toujours être cliqué avant la fin du temps imparti.

Une fois le temps écoulé, il est impossible de cliquer sur le bouton.

2. Processus de production

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=utf-8" />  
<title>time remaining</title>  
</head>  
<!--html部分很简单，需要被javascript控制的行内文本与提交按钮都被编上ID-->
<body>  
剩余时间：<span id="timer"></span>  
<input id="go" type="submit" value="go" />  
</body>  
</html>  
<script>  
/*主函数要使用的函数，进行声明*/  
var clock=new clock();  
/*指向计时器的指针*/  
var timer;  
window.onload=function(){  
    /*主函数就在每50秒调用1次clock函数中的move方法即可*/  
    timer=setInterval("clock.move()",50);  
    }  
function clock(){  
    /*s是clock()中的
变量
，非var那种全局变量，代表剩余秒数*/  
    this.s=140;  
    this.move=function(){  
        /*输出前先调用exchange函数进行秒到分秒的转换，因为exchange并非在主函数window.onload使用，因此不需要进行声明*/  
        
document
.getElementById("timer").innerHTML=exchange(this.s);  
        /*每被调用一次，剩余秒数就自减*/  
        this.s=this.s-1;  
        /*如果时间耗尽，那么，弹窗，使按钮不可用，停止不停调用clock函数中的move()*/  
        if(this.s<0){  
            alert("时间到");  
            document.getElementById("go").disabled=true;  
            clearTimeout(timer);  
            }  
        }  
    }  
function exchange(time){  
    /*javascript的除法是浮点除法，必须使用Math.floor取其
整数
部分*/  
        this.m=Math.floor(time/60);  
        /*存在取余运算*/  
        this.s=(time%60);  
        this.text=this.m+"分"+this.s+"秒";  
        /*传过来的形式参数time不要使用this，而其余在本函数使用的变量则必须使用this*/  
        return this.text;  
}  
</script>


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 des exemples de fonctions de minuterie JSArticle suivant：Explication détaillée des exemples de fonctions de minuterie JS

Articles Liés

Voir plus