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 可以去把代码拿过去看一下结果。。。。。。

posted @ 2015-08-24 14:42  请低下头  阅读(588)  评论(0)  编辑  收藏  举报