Maison > Article > interface Web > Un exemple de tutoriel d'utilisation de H5 pour créer une démo de compte à rebours
Un exemple de tutoriel d'utilisation de H5 pour créer une démo de compte à rebours
- 零下一度original
- 2017-05-05 15:44:543804parcourir
Il se trouve que je n'avais rien à faire ces jours-ci, alors j'ai étudié l'avant du h5.
h5 est un langage de balises. Les différentes balises qu'il contient sont équivalentes aux différents contrôles d'iOS. En fait, la logique de pensée est similaire à celle d'iOS. Les contrôles sont créés puis disposés. Sans plus tarder, voici une démo :
Countdown.gif
Expliquez simplement l'idée : Ceci est un compte à rebours chargeant image , l'idée d'implémentation est très simple, c'est-à-dire créer d'abord deux contrôles,
et e388a4556c0f65e1904146cc1a846bee, écrire la mise en page en css, puis l'ajouter en javascript Récupérez ces deux balises et parlez de document ici. Le document peut obtenir n'importe quelle balise en fonction du nom de la balise, du nom de la classe, etc., ce qui équivaut à devenir une variable globale
Videz directement le code ci-dessous :
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.image{
margin: 10px;
width: 200px;
height: 200px;
display: none;
}
.time{
margin: 10px;
font-size: 200px;
color: red;
}
</style>
</head>
<body>
<p class="time">10</p>
<script>
//根据类名取到对应的标签
var image = document.getElementsByClassName('image')[0];
var time = document.getElementsByClassName('time')[0];
var timer= setInterval(function(){
time.innerHTML = time.innerHTML - 1;
if(time.innerHTML == 0){
clearInterval(timer);
time.style.display = 'none'
image.style.display = 'inline-block';
}
},1000)
</script>
</body>
</html>Je pense que js est un. (super) langage faiblement typé, plus faible que oc, var peut recevoir n'importe quel type de variable, ce qui équivaut à la dérivation de type, il est tout simplement trop faible et n'a pas de position propre Haha, je plaisante, mais ça. nous sauve pas mal de choses.
Nous apprécions les conseils des experts ici. Si quelqu'un l'aime, veuillez le suivre, merci,
[Recommandations associées]
1 H5 gratuit. Tutoriel vidéo en ligne
2. Manuel de la version complète HTML5
3.Tutoriel vidéo HTML5 original php.cn
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!