本期任务九宫格demo设计日报

一、项目需求解析

1.设计一个九宫格和开关控制按钮；

2.点击启动，九宫格中随机三个格子可显示随机色，频率每秒一次；

3.点击停止，九宫格恢复原背景色；

二、难点分析

1.九宫格随机三个格子、三背景色要排除相同项；

解决思路：设计三组独立的随机数，用if判断语句筛除相同数；

2.停止，背景实现复原；

解决思路：利用for循环实现全部背景色复原；或是设置变量存储记录最新随机数，根据随机数指定清除方格颜色；

3.定时器的清除；

解决思路：将定时器清除方法封装一个函数体内，每次点击即可清除上次定时器，再通过if语句判断启动和停止事件；

4.随机颜色设置

解决思路：可自定义数组存储多个背景色，通过随机数来随机取出数组背景色；或是使用RGB色值，直接用随机数拼接改变颜色；

三、设计方法

1.布局：使用ul>li布局实现九宫格结构图，使用button标签完成按钮布局；

2.获取dom元素，给按钮(start/stop)绑定onclick点击事件，通过向封装函数体传参来判断启动/停止事件；

3.声明一个空对象timer存储定时器；

4.声明一个函数，在函数体内预设背景色数组，设置清除定时器方法；设置定时器并存储在变量timer中，在定时器内设置三组独立的随机数，用if语句去重随机数；通过筛选出的随机数取出三个随机方格，并取出数组对应背景色附给方格；

5.每添加随机色后，使用for循环清除一次所有背景色；

6.用if条件语句判断启动或停止事件，启动执行定时器，停止用for循环清除背景色；

7.设置定时器每秒执行一次。

四、项目收获

1.熟悉了九宫格相关HTML/CSS的布局方法和已错点解决

2.掌握了定时器设置和清除方法，对for循环使用场景有了进一步认识；

3.了解了随机背景色的多种设置方式；

4.学习了github建仓，关联，推送和相关指令操作；

5.了解了一个小项目从初始需求到实现效果的全过程雏形（从项目需求分析，实现逻辑思考，预想代码实现方案；到实际代码编写，编写环节问题解决，目标效果测试/优化，任务完成提交。

五、待提升点

1.gitbub操作；

2.建站知识点学习；

3.前端开发相关英语词汇学习和积累；

4.编程工具VScode熟悉.