• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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" style="height:100px;width:400px;background:yellow;" onchange="change()" id="range">
    <input type="text" id="show">

    显示效果如下:

     

    这样我们来写一个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改变幅度

    调色器看起来不错的,回头要弄个看看,现在先去睡觉。
    上一篇:让IE下支持Html5的placeholder属性的插件
    下一篇:基于html5 canvas实现漫天飞雪效果实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5中的input新属性range使用记录 html5,中的,input,新属性,新,