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


当前第2页 返回上一页

和<p>,在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('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)

    </script>

    </body>

    </html>

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

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

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

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

以上就是利用H5制作一个倒计时demo的实例教程的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

h5怎么解决移动端滑动卡顿的问题

html5动画中关于等待加载动画的实例分享

html5百叶窗效果的示例代码_html5教程技巧

使用html5捕捉音频与视频信息概述及实例

html5打开手机扫码功能及优缺点_html5教程技巧

html5中的autofocus(自动聚焦)属性介绍

html5中返回音视频的当前媒体控制器的属性controller

什么是h5页面

使用h5实现输入框提示语和 正常文本框提示语的方法

深入理解html5中的position

更多相关阅读请进入《h5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...