发表于: 2017-07-26 21:55:04
1 892
今天完成的事情:
1.解决任务1的bug,即多次点击开始"开始闪"按钮后会出现一直闪烁的现象。
2.任务2完成一部分,把参数设置页面写出来了
明天计划的事情:
1.解决<input type="range">的监听问题
2.消化滑块组件,整成自己的组件库,以后在遇到就直接拖出来用了
3.争取完成任务2
遇到的问题:
今天的问题主要出在此处,具体来说是:
(1)改变第一个表单的12,滑块不会跟着滑动
(2)滑动滑块,第一个表单内的数字"12"不会跟着改变
两者之间不知道如何联系起来,目前用js获取第二个表单的值,并赋值给第一个表单的value,但是并不能实现动态监听。
收获:
1.利用clearInterval()不仅可以清除setInterval()循环调用的函数,还可以放在setInterval()前面,以防止多次触发函数。
如下:
var int;
funtion beginning(){
clearInterval(int);
int=setInterval(shining,1000);
}
2.如何利用css改变滑块组件的样式
具体包括滑块轨道,滑块,滑动轨迹的样式
(1)清除webkit内核下的默认样式
(2)设置轨道样式
input[type=range]::-webkit-slider-runable-track{}/*用于webkit内核的浏览器*/
input[type=range]::-moz-range-track{}/*用于火狐浏览器*/
(3)滑块样式
input[type=range]::-webkit-slider-thumb{}/*用于webkit内核的浏览器*/
input[type=range]::-moz-range-thumb{}/*用于火狐浏览器*/
滑块样式可以利用appearance:none;将默认 样式清除,然后再自己加上想要的背景图作为样式。
评论