如果现在让你做一个滑动的效果 然后在右侧显示滑动停止以后的数值 那么很多人会选择input 和output 来使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>output</title> </head> <body> <form id="testform"> 请选择一个数值<input type="range" min=0 max=100 step=2 value=10 id="input1"></input> <output id="output1">10</output> </form> <script type="text/javascript"> window.onload=function () { var Input=document.getElementById("input1"); var Output=document.getElementById("output1"); Input.onchange=function () { Output.value=Input.value; } } </script> </body> </html>
为什么不用span之类的行内元素呢？ 因为output他的语义救赎输出 还有比他更合适的语义化标签嘛 。。。。
简单的demo 可以去把代码拿过去看一下结果。。。。。。