Un exemple de tutoriel d'utilisation de H5 pour créer une démo de compte à rebours-Tutoriel H5-php.cn

Un exemple de tutoriel d'utilisation de H5 pour créer une démo de compte à rebours

零下一度

Libérer： 2017-05-05 15:44:54

original

3814 Les gens l'ont consulté

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 :

Un exemple de tutoriel d'utilisation de H5 pour créer une démo de compte à rebours

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,

, é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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Un exemple de tutoriel d'utilisation de H5 pour créer une démo de compte à rebours

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 :