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

This article mainly talks about "type=" range "attribute example code analysis" for slider function in html5. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "html5 for the slider function of type=" range "attribute example code analysis" it!

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

Playback stop / / defines 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 () {/ / get information var value = parseFloat ($("# slider"). Val ()); / / display the information $("# print") .text (value) } / / this function is responsible for modifying the value of value function changeVal () {/ / using pure js implementation / * var value= parseFloat (document.getElementById ("slider") .value); / / displaying information document.getElementById ("print") [xss_clean] = value; if (value==1000) {return;} else {document.getElementById ("slider"). Value= value+10 } * / / use jquery to implement var value= parseFloat ($("# slider"). Val ()); / / display information print (); / / modify the slider's value 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 } at this point, I believe you have a deeper understanding of the "type=" range attribute example code analysis of the slider function in html5. You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.