首页 > web前端 > H5教程 > 利用H5制作一个倒计时demo的实例教程

利用H5制作一个倒计时demo的实例教程

零下一度
发布: 2017-05-05 15:44:54
原创
4085 人浏览过

这几天正好没事,所以研究了一下h5前端。

h5是一个标签语言,里面各种各样的标签相当于ios里面各种各样的控件,其实思维逻辑是跟ios差不多的,都是把控件创建出来,然后进行布局。不扯了,下面甩个demo:

利用H5制作一个倒计时demo的实例教程

倒计时.gif

简单说一下思路:这是一个倒计时加载图片的小demo,实现的思路很简单,就是先创建两个控件,

,在css里面把布局写一下,然后在javascript里面拿到这两个标签,这里说一下document 。document可以根据标签名 类 名字等拿到任意标签,相当于变成了全局变量,
下面直接甩代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

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

登录后复制

自我感觉js是一个(超级)弱类型的语言,比oc还要弱,var可以接收任意类型的变量,相当于类型推导,相比于swift,简直太弱了,根本就没有自己的立场,哈哈,开个玩笑,不过这样倒替我们省去不少事情。

在此欢迎大神指点,如果有喜欢的人,麻烦点个关注,谢啦,

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上是利用H5制作一个倒计时demo的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板