An example tutorial of using H5 to create a countdown demo-H5 Tutorial-php.cn

An example tutorial of using H5 to create a countdown demo

零下一度

Release： 2017-05-05 15:44:54

Original

3888 people have browsed it

I happened to have nothing to do these days, so I studied the h5 front end.

h5 is a tag language. The various tags in it are equivalent to the various controls in ios. In fact, the thinking logic is similar to ios. The controls are created and then laid out. Without further ado, here’s a demo:

An example tutorial of using H5 to create a countdown demo

Countdown.gif

Let’s briefly talk about the idea: This is a countdown loading picture 's small demo, the implementation idea is very simple, that is, first create two controls,

and

, write the layout in css, and then add it in javascript Get these two tags and talk about document here. document can get any tag based on the tag name, class name, etc., which is equivalent to becoming a global variable.
The code is directly dumped below:

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

Copy after login

I feel that js is a (super) weakly typed language, compared to oc is even weaker. Var can receive variables of any type, which is equivalent to type derivation. Compared with swift, it is simply too weak and has no stand at all. Haha, just kidding, but this saves us a lot. matter.

We welcome the advice of experts here. If there is anyone who likes it, please give us a follow, thank you,

[Related recommendations]

1. Free h5 online Video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of An example tutorial of using H5 to create a countdown demo. For more information, please follow other related articles on the PHP Chinese website!