Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use html5 range to display numbers". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to display numbers with html5 range".

Html5 implements the type= "range" attribute of the slider function

1.html5 adds a label about the slider, which actually extends the input tag, and the value of the type attribute is range.

two。 It is interesting to make an example of an animation of the slider, which can be used to control the slide and stop of the slider through the start and end buttons, similar to the automatic playback and pause of the video, while displaying the value of the slider from time to time.

3. The specific code is as follows

Digital incremental component

The current value is: 0

Play

Stop it

/ / define an identifier to determine whether the user clicks the start button or the pause button

Var choose=true

/ / this function is used to display the current value of the slider

Function print () {

/ / obtain information

Var value=parseFloat ($("# slider"). Val ()

/ / display the information

$("# print") Text (value)

}

/ / this function is responsible for modifying the value of value

Function changeVal () {

/ / implemented using pure js

/ / use jquery to implement

Var value=parseFloat ($("# slider"). Val ()

/ / display information

Print ()

/ / modify the value of the slider

If (value==1000 | | choose==false) {

Return

} else {

$("# slider") Val (value+1)

}

}

/ / this function is responsible for the start button

Function start () {

Choose=true

SetInterval ("changeVal ()", 10)

}

/ / this function is responsible for pausing the button

Function stop () {

Choose=false

}

Thank you for your reading, the above is the content of "how to display numbers with html5 range". After the study of this article, I believe you have a deeper understanding of how to use html5 range to display numbers, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.