Maison >interface Web >Tutoriel H5 >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:543913parcourir

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>
![](http://upload-images.jianshu.io/upload_images/2011313-6952b2e445095ac6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <p class="time">10</p>
    <script>
    //根据类名取到对应的标签
    var image = document.getElementsByClassName(&#39;image&#39;)[0];
    var time = document.getElementsByClassName(&#39;time&#39;)[0];

    var timer= setInterval(function(){
    time.innerHTML = time.innerHTML - 1;
    if(time.innerHTML == 0){
        clearInterval(timer);
        time.style.display = &#39;none&#39;
        image.style.display = &#39;inline-block&#39;;
    }
},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!

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：Un exemple de tutoriel sur la mise en œuvre d'un carrousel (version écran tactile) à l'aide de H5Article suivant：Un exemple de tutoriel sur la mise en œuvre d'un carrousel (version écran tactile) à l'aide de H5

Articles Liés

Voir plus