今天完成的事情：

1.先写好了静态界面。然后再调试js。

明天计划的事情：

1.继续推进任务。

遇到的问题及收获：

1.关于动态设置杀手和水民的人数。即调整滑块、加减号按钮、输入框时，杀手和水民的人数能动态按照一定规则分布。浏览坑乎所得。

<div class="box-player-people">
    <div class="box-color-1"></div>
    <p>杀&nbsp;&nbsp;&nbsp;&nbsp;手&nbsp;&nbsp;<span id="killer">0</span>&nbsp;&nbsp;人</p>
</div>
<div class="box-player-people">
    <div class="box-color-2"></div>
    <p>水&nbsp;&nbsp;&nbsp;&nbsp;民&nbsp;&nbsp;<span id="waterPeople">0</span>&nbsp;&nbsp;人</p>
</div>

将人数数字单独提出来。

var killer = document.getElementById("killer");
var waterPeople = document.getElementById("waterPeople");

用id获取到人数。

function equalNumber() {
    if (inputNumber.value >= 4 && inputNumber.value <= 18) {
        rangeNumber.value = inputNumber.value;
        killer.innerHTML = Math.floor(inputNumber.value / 3);
        waterPeople.innerHTML = Math.ceil(inputNumber.value * 2 / 3);
    } else {
        alert("请输入正确的人数(4~18)");
        inputNumber.value = 4;
    }
}

然后使用innerHTML命令，innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。可以将内容改成想要的。

即，此处用了

Math.floor(inputNumber.value / 3)

意思是将输入框的值除以3，floor向下取整。将此值赋予人数。得到的效果：

2.页面跳转的方法。

·在原来的窗体中直接跳转用
　　window.location.href="你所要跳转的页面";

·在新窗体中打开页面用：
　　window.open('你所要跳转的页面');

比如：

<button class="box-back" type="button" onclick="back()"></button>

我在返回按钮设置了onclick

在js里定义函数

function back() {
    window.location.href = ("../js-2-1/js-2-1.html");
}

这样它就可以在原窗体中跳转到另一个html界面。

明天把数组乱序搞好，自动分配杀手和水民的身份给参赛人员。