今日完成：

昨天重做任务一，今天重做了任务二，顺便一提，上次很不理解的bug在放置两天没管后突然就消失了。。。。。。

任务名称：JS-TASK2

成果链接：https://lurenxie.github.io/jnshu/

任务耗时   2019.3.23-2019.3.24（2天） 

技能脑图：

官网脑图：

个人脑图：

记录点：

1、上次妄图自己写个滑动进度条，做了很多尝试，最后虽然勉勉强强完成了，有两个问题，一个是滑动不流畅在鼠标移出目标后就无法继续滑动，即使还没松开鼠标，这个可能是mousemove绑定目标的问题，还有个问题就是mouse事件无法在移动端上面使用，然后今天转头重新用input[type = range]重写了一下，一些普通的样式改变就不啰嗦了，这里为了高度还原设计图，实现在滑块两边用不同的颜色，采用了用background.img背景色替换background.color的办法。效果如下：

input[type = range] {
  width: 100%;
  height: 0.2rem;
  background: -webkit-linear-gradient(left, #fab344, #fab344) no-repeat, #ffe6be;//这里用了渐变色，然后结合background-size宽度百分比，在渐变里面用同一种颜色，不会渐变了
  background-size: 0 100%;

2、这个页面中有四处数据需要绑定在一起，分别是玩家配比，玩家人数，滑块位置以及滑块背景色位置，然后可以操作的点也有四个，分别是玩家人数input输入框，鼠标滑动滑动块以及滑动条左右两个加减按钮，这里为了实现封装的概念，将所有数据直接绑定到了一起，然后在四个操作点分别调用即可，如下：

//根据输入值同时改变玩家配比、玩家人数和滑块以及背景色位置
function changeAll(i) {
       //玩家人数input
    getInputText.value = i;
    //滑块位置
    getInputRange.value = i;
    //滑块背景位置
    var n = Number(((i-3.5)/15)*100).toFixed(0) + "%";
    getInputRange.style.backgroundSize = n + ' ' + '100%';
    //玩家配比
    var m = Math.floor(Number(i)/4);
    getSpanSum.innerText = Number(i);
    getSpanKill.innerText = m;
    getSpanPeo.innerText = Number(i) - m;
}

刚开始的时候没有将所有数据集合在一起，是分模块写的，这里遇到了一个bug，如下所示，这里是点击按钮，实现其他三个数据同时加一，首先获取当前玩家人数的value，然后将它+1后赋值给其他三个数据，然后这里当按钮按下后，滑块会移动，但是滑块背景并未随机变化，而是过了大概几秒后才发生变化，然后我把如下滑块背景位置的赋值i变成从滑块位置获取后，bug消失了，这个bug暂时没发现问题所在。

getBtnMin.addEventListener('click', function() {
   var i = getInputText.value;
   //玩家人数input
   getInputText.value = Number(i) + 1;
   //滑块位置
   getInputRange.value = Number(i) + 1;
   //滑块背景位置
   var n = Number(((i-3.5)/15)*100).toFixed(0) + "%";
   getInputRange.style.backgroundSize = n + ' ' + '100%';
});
   var i = getInputText.value;
   //玩家人数input
   getInputText.value = Number(i) + 1;
   //滑块位置
   getInputRange.value = Number(i) + 1;
   //滑块背景位置
   var m = getInputRange.value;
   var n = Number(((m-3.5)/15)*100).toFixed(0) + "%";
   getInputRange.style.backgroundSize = n + ' ' + '100%';

3、这个页面中还是采用获取节点，然后用addEventListener的方式来添加事件句柄，其中加入了if用来判断不超过4~18的这个范围。

//change人数输入框
getInputText.addEventListener('change', function() {
    var i = getInputText.value;
    if (i < 4 || i > 18) {
        alert("输入值必须为4~18之间数字");
        getInputText.value = 4;
        getInputRange.value = 4;
        getInputRange.style.backgroundSize = '0 100%';
        return(false);
    }
    changeAll(i);
});
//MouseMove滑块
getInputRange.addEventListener('mousemove', function() {
    var i = getInputRange.value;
    changeAll(i);
});
//click左减按钮
getBtnAdd.addEventListener('click', function() {
    var i = getInputText.value;
    if (i <= 4) {return;}
    changeAll(Number(i) - 1);
});
//click右加按钮
getBtnMin.addEventListener('click', function() {
    var i = getInputText.value;
    if (i >= 18) {return;}
    changeAll(Number(i) + 1);
});

总结：获取节点改变式样，添加事件句柄之类的操作比较熟悉了，但是获取的value值的数据类型，计算完后通过js赋值给元素节点的属性的数值的数据类型这些还是不太熟悉，只能先获取，然后用console.log打印出来才知道，这个还需要找点资料学习下。

明天计划：

明天先把剩下的关于小课堂的资料做完，然后开始任务三，开始学习jq并运用到任务三中去。