HTML5滑块控件

马黑黑

几乎所有的编程语言都有滑块控件。HTML相对可怜，直到HTML5的出现，滑块控件才可以堂而皇之地出现在web世界里，但依然不被重视，当年横行霸道的IE9还不支持此控件。

H5滑块控件毕竟是新产物，不同内核的浏览器呈现它的样式不一样，但基本都很漂亮，标准也会慢慢趋同。试看你的浏览器如何渲染这个滑块：

上面的滑块用什么代码实现？说起来大家可能不信，但可以试试：

<input type="range" />

就酱！

没错，滑块依托的是 input 标签，type 属性为 range 即可。它有 value 值，取值范围在 0~100 之间（含0和100）。这意味着啥？看看下面的效果,试着拨动一下滑块：

50%

先酱。

红影

看着那么神奇的滑块，代码竟然那么简单

红影

myRg.value + "%"就可以显示百分比，太神奇了

马黑黑

红影 发表于 2022-2-5 18:55
myRg.value + "%"就可以显示百分比，太神奇了

range 类型的 input 的 value 值是从0开始到100，所以这个显示的实现不是问题

马黑黑

红影 发表于 2022-2-5 18:53
看着那么神奇的滑块，代码竟然那么简单

就一句短短的。不过要通过JS的协助才能有效工作。HTML5大量的交互都需要借助JS，比如它有一个画布标签，离开了JS它就不会发生作用

红影

马黑黑 发表于 2022-2-5 19:19
range 类型的 input 的 value 值是从0开始到100，所以这个显示的实现不是问题

不管乐曲长短，它都能自动判断的么？

红影

马黑黑 发表于 2022-2-5 19:25
就一句短短的。不过要通过JS的协助才能有效工作。HTML5大量的交互都需要借助JS，比如它有一个画布标签， ...

现在看到JS两字还是有点胆怯

马黑黑

红影 发表于 2022-2-5 20:11
现在看到JS两字还是有点胆怯

可它确实太厉害了吧

马黑黑

红影 发表于 2022-2-5 20:10
不管乐曲长短，它都能自动判断的么？

加载成功就可以

红影

马黑黑 发表于 2022-2-5 20:18
可它确实太厉害了吧

是的，非常厉害

红影

马黑黑 发表于 2022-2-5 20:18
加载成功就可以

好神奇啊

马黑黑

红影 发表于 2022-2-5 20:50
好神奇啊

要不然，网易云音乐就做不出那样的播放器了

马黑黑

红影 发表于 2022-2-5 20:50
是的，非常厉害

JS只是一个很弱的语言而已

红影

马黑黑 发表于 2022-2-5 20:52
要不然，网易云音乐就做不出那样的播放器了

原来所有网络上的展示都是被代码控制的。

红影

马黑黑 发表于 2022-2-5 20:53
JS只是一个很弱的语言而已

哇，这么厉害的语言居然还是很弱的，想不到。

马黑黑

红影 发表于 2022-2-6 14:30
原来所有网络上的展示都是被代码控制的。

全是代码在运行着

马黑黑

红影 发表于 2022-2-6 14:32
哇，这么厉害的语言居然还是很弱的，想不到。

脚本语言，不能编译，只能插入web页使用

红影

马黑黑 发表于 2022-2-6 20:46
全是代码在运行着

之前不知道啊，习惯了输入文字命令得到结果，其实这些过程本来就是代码做出的界面。

红影

马黑黑 发表于 2022-2-6 20:47
脚本语言，不能编译，只能插入web页使用

哦，知道了，你是想让它连自身都可以是被编辑的。嗯，这对于我来说属于不可想象。

马黑黑

红影 发表于 2022-2-6 22:19
之前不知道啊，习惯了输入文字命令得到结果，其实这些过程本来就是代码做出的界面。

你用的Windows，手机的安卓，还有可能苹果的Mac，以及冰箱的控制芯片，都运行着一行一行的代码