一、今天完成的事：

1.了解游戏流程,完成滑块和input输入框数据绑定问题；

2.完成对输入框内容判断的问题；

二、明天的计划：

1.继续JS任务2

三、遇到的问题：

1.滑块和input数据一直无法绑定，查看发现没有设置oninput属性导致的，查看该属性用法，重写更改代码后正常；、

2.对输入框进行数据有效性验证的时候，发现无法规避所有异常数据，请教师兄后发现需要用正则表达式来判断；

四、收获：

1、学习了oninput的用法：

定义和用法

oninput 事件在用户输入时触发。

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

可以在input中添加oninput属性，然后通过js函数来操作数据，滑块和输入框绑定代码如下：

css代码：

<input type="" value="8" class="input1" id="number"oninput="num()" onchange="selectNum()">
<span class="number-tip">&nbsp;&nbsp;玩家数量为：4-18</span>
<input type="range" min="4" max="18" value="8" class="input2" step="1" id="range" oninput="range1()">

js代码：

var range = document.getElementById("range");
var number = document.getElementById("number");
// 先将两个input的dom节点获取，再通过函数进行数据互换
console.log(range);
console.log(number);
// oninput 事件在元素值发生变化时立即触发，然后通过互换两个input的值，实现互相绑定
function num() {
    range.value = number.value;
}
function range1() {
    number.value = range.value;
}

2.用正则表达式来判断输入框内容：主要为了避免8进制和16进制数据

function selectNum() {
    // number.value是字符串，用.search的正则表达式的方法对输入数据进行判断，可以规避输入内容为小数，非数字，非十进制数据的情况
    if (number.value.search(/^([4-9])$|^(1[0-8])$/)) {
        alert("请输入正确的数值：4-18");
        document.getElementById("number").value = 8;
        num();
    }
}