网页设计

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

时间:2025-03-18 15:43:55 网页设计 我要投稿
  • 相关推荐

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改变幅度

【html5中的input新属性range使用记录】相关文章:

CSS中position属性的使用详解07-25

CSS3中的opacity属性使用教程06-20

CSS中的Box Model盒属性的使用实例09-05

正确使用HTML中title属性的一些建议10-09

正确使用HTMLtitle属性的建议08-27

html5的canvas方法使用09-29

PHP中php://input和$-POST的区别08-26

HTML5新特性介绍06-28

HTML5中你如何使用CSS建立不可选的文字11-03