马黑黑 发表于 2022-2-5 16:47

HTML5滑块控件

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

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

<input type="range">

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

<p><br></p><p>&lt;input type="range" /&gt;</p><p><br></p>

<p>就酱！</p><p><br></p>

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

<div style="display:flex;width:200px;">
    <input id="myRg" type="range"/>
    <div id="pcent" style="width:40px;">50%</div>
</div>

<script language="javascript">
var myRg = document.getElementById('myRg');
var pCent = document.getElementById('pcent')
myRg.onmouseup = function(){
        pCent.innerHTML = myRg.value + "%";
}
</script>

<p>先酱。</p>

红影 发表于 2022-2-5 18:53

看着那么神奇的滑块，代码竟然那么简单{:4_173:}

红影 发表于 2022-2-5 18:55

myRg.value + "%"就可以显示百分比，太神奇了{:4_187:}

马黑黑 发表于 2022-2-5 19:19

本帖最后由 马黑黑 于 2022-2-5 19:21 编辑

红影 发表于 2022-2-5 18:55
myRg.value + "%"就可以显示百分比，太神奇了
range 类型的 input 的 value 值是从0开始到100，所以这个显示的实现不是问题

马黑黑 发表于 2022-2-5 19:25

红影 发表于 2022-2-5 18:53
看着那么神奇的滑块，代码竟然那么简单
就一句短短的。不过要通过JS的协助才能有效工作。HTML5大量的交互都需要借助JS，比如它有一个画布标签，离开了JS它就不会发生作用

红影 发表于 2022-2-5 20:10

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

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

红影 发表于 2022-2-5 20:11

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

现在看到JS两字还是有点胆怯{:4_173:}

马黑黑 发表于 2022-2-5 20:18

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

可它确实太厉害了吧

马黑黑 发表于 2022-2-5 20:18

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

加载成功就可以

红影 发表于 2022-2-5 20:50

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

是的，非常厉害{:4_173:}

红影 发表于 2022-2-5 20:50

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

好神奇啊{:4_199:}

马黑黑 发表于 2022-2-5 20:52

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

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

马黑黑 发表于 2022-2-5 20:53

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

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

红影 发表于 2022-2-6 14:30

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

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

红影 发表于 2022-2-6 14:32

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

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

马黑黑 发表于 2022-2-6 20:46

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

全是代码在运行着

马黑黑 发表于 2022-2-6 20:47

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

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

红影 发表于 2022-2-6 22:19

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

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

红影 发表于 2022-2-6 22:20

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

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

马黑黑 发表于 2022-2-6 22:21

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

你用的Windows，手机的安卓，还有可能苹果的Mac，以及冰箱的控制芯片，都运行着一行一行的代码
页: [1] 2 3
查看完整版本: HTML5滑块控件