发表于： 2019-12-02 18:05:43
1 1299
今日完成:
ps:
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
如果,value默认值是1.1,数字间隔(step)是1,那么合法值就是2.1,3.1,4.1....
默认情况下，粒度为1，表示该值始终是整数。可以更改step属性以控制粒度。
ex:
需要一个介于5到10之间的值（精确到两位小数位），则应将值设置step为0.01
<input type="range" min="5" max="10" step="0.01">
如果要接受任何值而不管其扩展到小数点后多少位，可以any为该step属性指定一个值：
<input type="range" min="0" max="3.14" step="any">
可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。
------------------------------------------------------------------------------------------------------------------
遇到问题:
怎么更改进度条样式
ps:在解决问题时,找到一个总结更简练的表格
常用（部分）属性如下：
属性 描述
max 设置或返回滑块控件的最大值
min 设置或返回滑块控件的最小值
step 设置或返回每次拖动滑块控件时的递增量
value 设置或返回滑块控件的 value 属性值
defaultValue 设置或返回滑块控件的默认值
autofocus 设置或返回滑块控件在页面加载后是否应自动获取焦点
遇到问题:标红的两个属性有什么关系?
描述:设置value="#",浏览器刷新显示的初始默认值就是#的数值,那么defaultValue有什么作用?
ps:<input type="range" max="18" min="4" step="1" defaultvalue="12" />
用defaultValue代替value 后没有任何效果,那么它的默认值体现在哪里?(其中v大小写都是没用的)
如何美化滑动条？
方法:直接通过css完成样式改造
步骤:
去除系统默认的样式；
给滑动轨道(track)添加样式；
给滑块(thumb)添加样式；
根据滑块所在位置填充进度条；
遇到问题:
修改样式没有覆盖原本的样式
描述:滑动轨道生效,但是内部有默认原本的滑动轨道,按钮样式生效一部分,就是阴影之类的生效,但是按钮本身还是默认值样式
解决:
//消除进度条默认样式
input[type=range] {
appearance: none;
width: 300px;
border-radius: 10px; //这个属性设置使填充进度条时的图形为圆角
}
appearance前面加-webkit-appearance: none;
原因:基于 webkit 的浏览器?不是很理解,可能时必须限定吧,那么如果是其他内核的浏览器,可能webkit就要换已成其他浏览器的名称,改了半天才发现的,不是太理解
解决:待解决
遇到问题:
代码:
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;//消除滑块样式
height: 25px;
width: 25px;
....
这是滑块的代码
为什么要连续消除两次样式?
input[type=range] {
-webkit-appearance: none;
与
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;//消除滑块样式
必须共存,否则滑块默认样式无法修改,但从直接表现看,前者应该只是消除了滑动轨道的默认样式
待解决
遇到问题:
滑动滑块时出现蓝色边框
原因:原始的控件获取到焦点时，会显示包裹整个控件的边框，
解决:消除边框
代码:
//原始的控件获取到焦点时，会显示包裹整个控件的边框，消除边框
input[type=range]:focus {
outline: none;
}
显示:
遇到问题:
进度条怎么填充颜色
解决方法1:
input[type=range]::-webkit-fill-lower {...}
input[type=range]::-webkit-fill-upper {...}
失效
解决:待定
看了一些方法,看不懂,原因:一些基础知识的欠缺
直接在
//消除进度条样式
input[type=range] {...
//滑动轨道样式
input[type=range]::-webkit-slider-runnable-track{...
中设置background: linear-gradient(@p-2,@bg-2);
都显示整个进度条颜色
input[type=range]::-webkit-slider-thumb {
只显示滑动块的颜色
暂时先跳过
//------------------------------------------------------------------------------------------------------------------------
关于联动的想法:
1.把input type=range(进度条)的value的值,与下方input type=sumber的value的值链接起来,
输入多少都在进度条上表现出来,进度条也可以控制输入框内数字的多少
2.进度条,左右两边,设置点击事件,与输入框链接起来,每点击一次,输入框内的的value的值就+1或者减1
3.设置图片杀手平民,旁边添加空标签,
引出输入框的value的值(总人数),分别绑定空标签,杀手为输入框value值除以4的下舍入值,平民为value的值减去杀手的人数
1.
var player=document.getElementById("player");//声明一个变量,绑定输入框
var slider=document.getElementById("slider");//声明一个变量,绑定进度条呢
// slider.value=player.value//传值,两个只有一个设置初始value值,这里player设置初始值8
player.value=slider.value//传值,两个只有一个设置初始value值,这里slider.value设置初始值8
//当设置初始值变量,在前方时,值就传递不给另一方,那么另一方显示的就是默认值
//如,player value=8;player.value=slider.value,即8=slider.value,传递不过去,原因不理解,显示slider.value值为默认值11,
//而slider.value=8,这种写法却可以传递过去
console.log(slider.value);
ex:显示
player设置初始值,没有传递过去,且被slider的默认值给覆盖
相当于重新给player输入框value重新赋值
结论:谁在=号的后方谁赋值,=的前方是被赋值的目标,所以,写在=后面的value要有设定好的初始值
原因:未知,一般声明变量赋值var x=xxx,也许就是浏览器默认的识别顺序,值写=后方,被赋值对象写=前方
遇到问题:
这中传值,是一次性的,只能传递初始刷新时的默认值,不能时时传值
解决: 滑动条设置oniput 或者onchange值 (监听事件)
遇到问题:
进度条部分花了太多时间,还没有完成,主要是滑动过得部分填充颜色,未滑动的部分是白色
收获:同上
明日计划:先做后面的,回过头来再修改
返回列表
评论