利用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的实例教程的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

html5实现眼睛移动效果的示例

html5规定在拖动被拖动数据时是否进行复制移动或链接的属性dropzone

h5应用缓存-manifest的具体介绍

h5页面如何调用百度地图获取当前位置(代码)

什么是html5?html5使用详解

利用html5 从视频中捕获静止图像实例代码

html5 canvas绘制爱心的方法示例

了解什么是html5

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

html5大文件上传技术分享

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




打赏

取消

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

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

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

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

评论

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