目录
这几天正好没事,所以研究了一下h5前端。
h5是一个标签语言,里面各种各样的标签相当于ios里面各种各样的控件,其实思维逻辑是跟ios差不多的,都是把控件创建出来,然后进行布局。不扯了,下面甩个demo:
首页 web前端 H5教程 利用H5制作一个倒计时demo的实例教程

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

May 05, 2017 pm 03:44 PM

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

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

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

倒计时.gif

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

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

<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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1663
14
CakePHP 教程
1420
52
Laravel 教程
1315
25
PHP教程
1266
29
C# 教程
1239
24
demo是什么意思 demo是什么意思 Feb 12, 2024 pm 09:12 PM

demo这个词对于喜欢唱歌的小伙伴已经不在陌生了,但是有很多没有接触到的用户好奇了demo是什么意思呢?现在就来看一下小编带来的demo的含义介绍吧。demo是什么意思答案:录音样带。1、demo读音英['deməʊ]、美['demoʊ]2、demo是"demonstration"的缩写,一般指歌曲正式录制前试听的初步效果;3、demo用作名词是录音样带和试样唱片的意思,用动词是试用(尤指软件)、演示和示范;

Python中的SVM实例 Python中的SVM实例 Jun 11, 2023 pm 08:42 PM

Python中的支持向量机(SupportVectorMachine,SVM)是一个强大的有监督学习算法,可以用来解决分类和回归问题。SVM在处理高维度数据和非线性问题的时候表现出色,被广泛地应用于数据挖掘、图像分类、文本分类、生物信息学等领域。在本文中,我们将介绍在Python中使用SVM进行分类的实例。我们将使用scikit-learn库中的SVM模

h5是指什么 h5是指什么 Aug 02, 2023 pm 01:52 PM

H5是指HTML5,是HTML的最新版本,H5是一个功能强大的标记语言,为开发者提供了更多的选择和创造空间,它的出现推动了Web技术的发展,使得网页的交互和效果更加出色,随着H5技术的逐渐成熟和普及,相信它将会在互联网的世界中发挥越来越重要的作用。

如何区分H5,WEB前端,大前端,WEB全栈? 如何区分H5,WEB前端,大前端,WEB全栈? Aug 03, 2022 pm 04:00 PM

本文带你快速区分H5、WEB前端、大前端、WEB全栈,希望对需要的朋友有所帮助!

VUE3入门实例:制作一个简单的视频播放器 VUE3入门实例:制作一个简单的视频播放器 Jun 15, 2023 pm 09:42 PM

随着新一代前端框架的不断涌现,VUE3作为一个快速、灵活、易上手的前端框架备受热爱。接下来,我们就来一起学习VUE3的基础知识,制作一个简单的视频播放器。一、安装VUE3首先,我们需要在本地安装VUE3。打开命令行工具,执行以下命令:npminstallvue@next接着,新建一个HTML文件,引入VUE3:&lt;!doctypehtml&gt;

学习Golang指针转换的最佳实践示例 学习Golang指针转换的最佳实践示例 Feb 24, 2024 pm 03:51 PM

Golang是一门功能强大且高效的编程语言,可以用于开发各种应用程序和服务。在Golang中,指针是一种非常重要的概念,它可以帮助我们更灵活和高效地操作数据。指针转换是指在不同类型之间进行指针操作的过程,本文将通过具体的实例来学习Golang中指针转换的最佳实践。1.基本概念在Golang中,每个变量都有一个地址,地址就是变量在内存中的位置。

PHP 简单网络爬虫开发实例 PHP 简单网络爬虫开发实例 Jun 13, 2023 pm 06:54 PM

随着互联网的迅速发展,数据已成为了当今信息时代最为重要的资源之一。而网络爬虫作为一种自动化获取和处理网络数据的技术,正越来越受到人们的关注和应用。本文将介绍如何使用PHP开发一个简单的网络爬虫,并实现自动化获取网络数据的功能。一、网络爬虫概述网络爬虫是一种自动化获取和处理网络资源的技术,其主要工作过程是模拟浏览器行为,自动访问指定的URL地址并提取所

Python中的VAE算法实例 Python中的VAE算法实例 Jun 11, 2023 pm 07:58 PM

VAE是一种生成模型,全称是VariationalAutoencoder,中文译作变分自编码器。它是一种无监督的学习算法,可以用来生成新的数据,比如图像、音频、文本等。与普通的自编码器相比,VAE更加灵活和强大,能够生成更加复杂和真实的数据。Python是目前使用最广泛的编程语言之一,也是深度学习的主要工具之一。在Python中,有许多优秀的机器学习和深度

See all articles