网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 html5中的input新属性range使用记录
内容
    过了两天完全没有电脑，没有电视，手机又没有流量的生活，习惯了那样喧嚣的节奏，再回到那么清净的环境，不啻于一次洗涤，同时却有些惶恐，好像自己又什么都不会了，如果脱离了这个文明的社会，甚至可以说，我连基本的生存能力都没有，如果回到过去，我不知道能活多久。
    感慨归感慨，当前的工作要完成,记录一个html5中的input新属性，range。发现这个属性是在一个网站的调色器中，感觉确实比较形象化，好看，就记录下了：
    代码如下:
    <input type="range" min="0" max="255">
    <input type="text" id="show">
    显示效果如下：
    名单
    这里看到了type的两个属性 min和max，允许的最小范围和最大范围。同时我们还可以对这个range进行样式的设计
    代码如下:
    <input type="range" min="0" max="255" onchange="change()" id="range">
    <input type="text" id="show">
    显示效果如下：
    名单1
    这样我们来写一个js方法，来改变数值，调色器中就这么应用的：(至于这个移动钮样式如何改变了还不太明白)
    代码如下:
    <script type="text/javascript">
    function change(){
    var num=document.getElementById("range");
    var location=document.getElementById("show");
    location.value=num.value;
    }
    </script>
    这样就随着拖动位置的变化就改变了输入框中的值，放置三个的话就能生成颜色了嘛，这就是调色器的原理了
    这里还要注意的就是range的其他两个属性value默认值和step改变幅度
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 4:22:51