发表于： 2017-04-01 21:38:02
1 561
今天完成的事情：完成了任务2
明天计划的事情：做任务3
遇到的问题：任务2下面的滑动栏，我一直以为是写个滚动条的样式，写了好久都没有用！！嘉豪瞟了我一眼，告诉我了input range(滑块控件)这个东西。！！任务步骤里都没写，要不是嘉豪告诉我我都不知道要写到何时。接下来就是调滑块控件的样式了。先把它自带的那些样式都去掉
input[type=range] { //去掉样式
-webkit-appearance: none;
width: 70%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;}
input[type=range]:focus {outline: none;
}
然后给滑动的轨道上样式
input[type=range]::-webkit-slider-runnable-track {
height: 4px;
background: rgb(252,198,113);
}
input[type=range] {
height: 4px;
border-radius: 2px; /*将轨道设为圆角的*/
background: rgb(252,198,113);
}
然后把滑块换成我们切下来的图
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 39px;
width: 63px;
margin-top: -15px; /*使滑块超出轨道部分的偏移量相等*/
background-image: url("矩形-24-拷贝-2.png");
cursor: pointer;
}
现在就是我们需要的样式了。再加上加减号的图标。然后记得在HTML代码里，给input加上max和min的值，这样就是滑动条最大和最小的值
然后要让滑动条获取到value的值，这里有一个很简单的办法，写一个函数，函数是滑动条的value等于输入框的value的值，然后给滑块加上一个触发事件，来触发这个函数，这样就能做到获取了。但是之前一直是用onclick来触发，就是必须要鼠标点击再松开才能触发这个函数，嘉豪告诉我用oninput来实现鼠标点下去的时候就执行函数，这样划滑块的时候value的值也会开始变，同理给输入框也设置一个这个函数，输入框的value改变，滑块的位置也会移动。
两边的加减号的函数就很简单，但是有一个小坑，就是用加减号也要设置最大最下值，和value的保持一致。
function xiu(){
var getNum = parseInt(document.getElementById("sb").value);
var mm = parseInt(document.getElementById("input").value);
if(getNum<20){
document.getElementById("sb").value = getNum + 1;
}
else{
alert("不能再多了！")
}
if(mm <20){
document.getElementById("input").value = mm + 1;
}
else{
return false;
}
}
因为这个任务，三个地方要相连，输入框，滑动条，和加减号，所以获取ID的时候两个value都要获取，然后要改变两个value的值。
然后因为任务要求看键盘事件，所以我加了个键盘事件，又因为有滑动条的存在，所以只给输入框加键盘事件是不方便的。所以我加了个全局键盘事件。
<body onkeypress="if (event.keyCode == 13) pp();">
直接给body加这条代码，13是回城键，这样无论在页面的什么地方，按回车，都会触发函数。
收获：认识了Input Range 对象，还有键盘事件的用法，但是感觉我这个用法不是很流行，因为我看不懂高程上面的键盘事件，还有value的互相关联，和点击加减。还有return false，当条件触发的时候想不执行函数，也什么都不想弹出来的不想显示的时候，就用return false。因为这里如果输入框的值变成范围外，和点击加减按钮让值变成范围外，就会弹出两个弹框，所以把其中一个不设置弹框，设置成return false就可以了。
样式没认真写，崩了
返回列表
评论