发表于: 2017-01-20 22:57:19

2 1214


今天完成的事情:

    1. 用input写了range滑动条,并设置了其样式;

    2. 完成了readOnly功能的优化,并设了只能输入数字;

    3. 将滑动条和上面的人数input中数字联系起来,一起变化;

明天计划的事情:

    完成任务2,开始做任务3,学学JQuery;

遇到的问题:

    1. JS基础还是太弱,需要继续学习,觉得自己写的太繁杂,功能实现的不好,也很依赖于搜索功能,不知道怎么去写好,比如滑动条和人数的值统一就用了两个功能相同的函数互相决定对方的value值;

    2. 还没理清把4个数字的和总人数统一起来的方法,考虑先设置总人数为4个数字的和,在改变总人数时,设4个数字为随机数,通过参数关系完成设置;

收获:

    1. input range的样式设置:

            要改变input range中的滑块样式,可以用如下方法,经过试验发现,用class名设置input样式后,对滑块thumb设置大小和背景色无效,改为用input[type=range]直接设置后成功;

input[type=range] {
 -webkit-appearance: none;
 width:90%;
 margin-left: 5%;
 vertical-align: top;
 outline: 0;
 background: none;
}

input[type=range]::-webkit-slider-thumb {
 -webkit-appearance: none;
 margin-top: -15px;
 height: 36px;
 width: 62px;
 border: 3px solid #fcc671;
 border-radius: 8px;
 cursor: pointer;
 background: #fff;
}

    2. oninput和onkeyup是HTML DOM中很好用的一部分,与JavaScript结合使用可以实现很多功能。



返回列表 返回列表
评论

    分享到