An example tutorial of using H5 to create a countdown demo
I happened to have nothing to do these days, so I studied the h5 front end.
h5 is a tag language. The various tags in it are equivalent to the various controls in ios. In fact, the thinking logic is similar to ios. The controls are created and then laid out. Without further ado, here’s a demo:
Countdown.gif
Let’s briefly talk about the idea: This is a countdown loading picture 's small demo, the implementation idea is very simple, that is, first create two controls,
and
, write the layout in css, and then add it in javascript Get these two tags and talk about document here. document can get any tag based on the tag name, class name, etc., which is equivalent to becoming a global variable.
The code is directly dumped below:
<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>
<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>I feel that js is a (super) weakly typed language, compared to oc is even weaker. Var can receive variables of any type, which is equivalent to type derivation. Compared with swift, it is simply too weak and has no stand at all. Haha, just kidding, but this saves us a lot. matter.
We welcome the advice of experts here. If there is anyone who likes it, please give us a follow, thank you,
[Related recommendations]
1. Free h5 online Video tutorial
3. php.cn original html5 video tutorial
The above is the detailed content of An example tutorial of using H5 to create a countdown demo. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1389
52
What does demo mean?
Feb 12, 2024 pm 09:12 PM
The word demo is no longer unfamiliar to friends who like to sing, but many users who have never been exposed to it are curious about what demo means. Now let’s take a look at the meaning of the demo brought by the editor. What does demo mean? Answer: Demo tape. 1. The pronunciation of demo is ['deməʊ] in English and ['demoʊ] in America. 2. Demo is the abbreviation of "demonstration", which generally refers to the preliminary effect of listening to a song before it is officially recorded. 3. Demo is used as a noun to refer to sample tapes and sample records. The meaning of verb is trial (especially software), demonstration and demonstration;
SVM examples in Python
Jun 11, 2023 pm 08:42 PM
Support Vector Machine (SVM) in Python is a powerful supervised learning algorithm that can be used to solve classification and regression problems. SVM performs well when dealing with high-dimensional data and non-linear problems, and is widely used in data mining, image classification, text classification, bioinformatics and other fields. In this article, we will introduce an example of using SVM for classification in Python. We will use the SVM model from the scikit-learn library
What does h5 mean?
Aug 02, 2023 pm 01:52 PM
H5 refers to HTML5, the latest version of HTML. H5 is a powerful markup language that provides developers with more choices and creative space. Its emergence promotes the development of Web technology, making the interaction and effect of web pages more Excellent, as H5 technology gradually matures and becomes popular, I believe it will play an increasingly important role in the Internet world.
How to distinguish between H5, WEB front-end, big front-end, and WEB full stack?
Aug 03, 2022 pm 04:00 PM
This article will help you quickly distinguish between H5, WEB front-end, large front-end, and WEB full stack. I hope it will be helpful to friends in need!
How to use demo of python random library
May 05, 2023 pm 08:13 PM
Simple use of pythonrandom library demo When we need to generate random numbers or randomly select elements from a sequence, we can use Python's built-in random library. The following is an annotated example that demonstrates how to use the random library: #Import random library importrandom #Generate a random decimal between 0 and 1 random_float=random.random()print(random_float)#Generate a random decimal within the specified range Random integer (including endpoints) random_int=random.randint(1,10)print(random_int)#
Learn best practice examples of pointer conversion in Golang
Feb 24, 2024 pm 03:51 PM
Golang is a powerful and efficient programming language that can be used to develop various applications and services. In Golang, pointers are a very important concept, which can help us operate data more flexibly and efficiently. Pointer conversion refers to the process of pointer operations between different types. This article will use specific examples to learn the best practices of pointer conversion in Golang. 1. Basic concepts In Golang, each variable has an address, and the address is the location of the variable in memory.
VUE3 Getting Started Example: Making a Simple Video Player
Jun 15, 2023 pm 09:42 PM
As the new generation of front-end frameworks continues to emerge, VUE3 is loved as a fast, flexible, and easy-to-use front-end framework. Next, let's learn the basics of VUE3 and make a simple video player. 1. Install VUE3 First, we need to install VUE3 locally. Open the command line tool and execute the following command: npminstallvue@next Then, create a new HTML file and introduce VUE3: <!doctypehtml>
How to use position in h5
Dec 26, 2023 pm 01:39 PM
In H5, you can use the position attribute to control the positioning of elements through CSS: 1. Relative positioning, the syntax is "style="position: relative;"; 2. Absolute positioning, the syntax is "style="position: absolute;" "; 3. Fixed positioning, the syntax is "style="position: fixed;" and so on.
