How to use range of html5 to display numbers
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!
