Home > Article > Web Front-end > An example tutorial of using H5 to create a countdown demo

An example tutorial of using H5 to create a countdown demo

零下一度Original: 2017-05-05 15:44:543804browse

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:

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：An example tutorial on implementing a carousel (touch screen version) using H5Next article：An example tutorial on implementing a carousel (touch screen version) using H5

See more

An example tutorial of using H5 to create a countdown demo

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:

Related articles