今天完成的事情：

做任务2的html和css页面；学习input type，input type=number，input type = range的相关知识。

明天计划的事情：

做任务二，准备小课堂。

遇到的问题：

无。

收获：

input type=number：

属性max、min规定允许的最大值和最小值，step规定合法数字间隔。

移除HTML5 input在type="number"时的上下小箭头：

在chrome下：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

Firefox下：

input[type="number"]{-moz-appearance:textfield;}

第二种方案：

将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。

input type = range：

属性max、min规定允许的最大值和最小值，step规定合法数字间隔。

自定义系统默认样式的方法：

去除系统默认样式：

input[type=range] {
    -webkit-appearance: none;
    width: 300px;

    -webkit-appearance: none;

给滑动轨道(track)添加样式：

input[type=range]::-webkit-slider-runnable-track {
  margin: 15px 0;
  height: 6px;
  background: #fcc671;
}

给滑块(thumb)添加样式：

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;
}

只读属性：

textObject.readOnly=true|false

通过函数改变readOnly的值来更改input能够输入的状态。