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

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

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

倒计时.gif

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

和

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

下面直接甩代码：

.image{

margin: 10px;

width: 200px;

height: 200px;

display: none;

}

.time{

margin: 10px;

font-size: 200px;

color: red;

}


10

//根据类名取到对应的标签

var image = document.getElementsByClassName('image')[0];

var time = document.getElementsByClassName('time')[0];

var timer= setInterval(function(){

time.innerHTML = time.innerHTML - 1;

if(time.innerHTML == 0){

clearInterval(timer);

time.style.display = 'none'

image.style.display = 'inline-block';

}

},1000)

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