output的使用

如果现在让你做一个滑动的效果然后在右侧显示滑动停止以后的数值那么很多人会选择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 可以去把代码拿过去看一下结果。。。。。。