今天完成的事情

完成js 任务1

开始css 任务14

明天计划的事情

完成css 任务14.15

遇到的问题

# 以下代码遇到如图所示报错

document.getElementsByClassName("box").style.backgroundColor="orange";

解决办法：documents.getElementByClassName returns an array. You should access the element you want to style by using the brackets notation "[index]".

#可以重复点击“开始闪”按钮，产生多个循环，疯狂闪烁

解决办法：改变颜色时，设置按钮disable = true 即可，停止闪烁时设置为 false

document.all.start.disabled = true;

document.all.start.disabled = false;

#宽度超出

解决办法：调试发现，盒子宽度包括你内边距，设置如下代码解决。

*,
 *::before,
 *::after {
   box-sizing: border-box;
 }

#父元素高度不能自适应子元素，

问题原因在于，父元素浮动定位，脱离文档流，父元素没有给固定高度，子元素设的高度自适应 ，但是父云素也没有被子元素的高度撑开。当前的html文档会当作元素不存在一样，高度当然也就撑不开。

解决办法：

1.设置子元素float属性；这样，子元素也是脱离当前文档流，子元素和父元素一起脱离，并且子元素仍在父元素内，父元素内容不空了，所以高度会适应子元素高度。

.carouselImg {
float: left;
max-width: 100%;
height: auto;
margin: 0;
}

2.不要浮动，元素使用display:inline-block;

3 .使用after伪对象清除浮动 ；

# 按钮位置错位

解决办法： 按钮采用绝对定位，放错位置，父元素为body，放到轮播图盒子中即可。

#图片错位

解决办法：设置 max-width：100% height：auto

收获：

#JavaScript splice() 方法

arrayObject.splice(index,howmany,item1,.....,itemX)

返回值 被删除的项目

#带停止按钮的无限循环计时器

    let t ;                                                                                                                       function timer() {                                                                                                     changeColor();                                                                                                         t = setTimeout("timer()",1000)                                                                                       }                                                                                                                         function stopTimer() {                                                                                               clean();                                                                                                               clearTimeout(t);                                                                                                    document.all.start.disabled = false;                                                                                     }

#通过ID获取元素

function getId(id)   {                                                                                                       return document.getElementById(id);                                                                            }

#根据类名获取元素

function getClass(className)  {                                                                                              return document.getElementsByClassName(className);                                                                 }

#for循环语句

function clean() {                                                                                                                 let boxs = document.getElementsByClassName("box");                                                                     for (let i = 0;i<9;i++) {                                                                                                boxs[i].style.backgroundColor="orange";                                                                              }                                                                                                                    // boxs[0].style.backgroundColor="orange";
// boxs[1].style.backgroundColor="orange";                               }

#利用数组生成随机整数

let numberArray=["1","2","3","4","5","6","7","8","9"];                                                                        number1 = numberArray.splice(parseInt(Math.random() * numberArray.length),1);                                         number2 = numberArray.splice(parseInt(Math.random() * numberArray.length),1);                                         number3 = numberArray.splice(parseInt(Math.random() * numberArray.length),1);