input type=range标签用法实例代码
生活随笔
收集整理的這篇文章主要介紹了
input type=range标签用法实例代码
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在HTML5中，又新增許多新<input>控件類型，比較實(shí)用的一個(gè)就是<input type="range">，以滑竿的方式來調(diào)整value值，在這以前需要通過模擬才能夠?qū)崿F(xiàn)，下面就通過代碼實(shí)例介紹一下它的作用。
代碼如下:
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #demo{ ??width:50px; ??height:50px; ??background:red; } </style> <script type="text/javascript"> window.onload=function(){ ??var demo=document.getElementById("demo"); ??var range=document.getElementById("range"); ??range.onmousemove=function(){ ????demo.style.width=this.value+"px"; ??} } </script> </head> ???? <body> <div id="demo"></div> <input type="range" step="1" max="500" min="10" value="50" id="range"/> </body> </html> |
以上代碼可以平滑的拖動(dòng)空間按鈕來調(diào)整div的寬度，大家可以特別注意下此空間的幾個(gè)常用屬性，step用來規(guī)定，拖動(dòng)數(shù)據(jù)變動(dòng)的最小跨度，max規(guī)定最大值，min規(guī)定最小值。還有一個(gè)要特別注意的點(diǎn)是:實(shí)現(xiàn)此平滑拖動(dòng)效果最好用onmousemove事件，在各個(gè)瀏覽器表現(xiàn)都是一致的，使用onchange事件在最新的谷歌和火狐瀏覽器中并不是平滑的。
原文發(fā)布時(shí)間為：2017-3-7
本文作者：admin
本文來自云棲社區(qū)合作伙伴“螞蟻部落”，了解相關(guān)信息可以關(guān)注螞蟻部落
原文鏈接：<input type="range">標(biāo)簽用法實(shí)例代碼
總結(jié)
以上是生活随笔為你收集整理的input type=range标签用法实例代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2.HTML基本格式
- 下一篇： 静态页面公共部分的处理