发表于: 2017-06-28 23:26:39

2 880


前言:简单回顾一下来时的路。今天事情偏多,先简单做一集,看看效果。然后争取做一个2-4的综合讲解。

第一集 入门

一开始接触到这个任务会感觉很乱,会不知道该做什么。现在回过头来看,发现头绪全在官网的任务步骤里。 
阅读后我们可以发现这样的顺序,首先要点击左边的按钮,然后触发一个定时的函数,在这个函数里完成选择三个盒子,涂色等一系列步骤。

所以第一个问题,如何完成一次点击事件

需要点击,首先需要获取到点击到的元素,常称为html节点。获取节点的过程称为操作DOM,大体形式为 
document.getElementById(“”); 
常用有by Id,by ClassName两种,不常用有tagname 
id方法获取到的为对象,classname获取到的为数组。 
有了DOM节点,就可以写点击事件了。假设获取到的节点对象为btn,那么有: 
第一种,btn.onclick = function ( ) 
第二种,添加事件监听:btn.addEventListener(‘click’,function( ) ) 
第三种,首先声明一个函数demo ( ),然后在html里写onclick=”demo( )” 
实际上第一三种一样,但是第一二种有些许差别。绑定同一DOM节点的onclick多个事件,前面的会被后面的覆盖;绑定同一DOM节点的多个事件监听,会一次生效。 
接下来是定时或者延时器,这个自有自带的方法。 
setTimeout方法是定时程序,也就是在什么时间以后干什么。干完了就拉倒。 
setInterval方法则是表示间隔一定时间反复执行某操作。 
接下来我们具体想要实现的步骤:

随机取三个盒子

因为一共有九个盒子,那么这个问题就转换为从0~8里面取三个数。一次取三个数没有直接的办法,但我们知道math.random( )方法可以产生一个[0,1)的随机数,所以我们吧这个方法*9,那么就变成了[0,9),由于右边是开区间,取整之后正好是在0-8这九个数中中取一整数。如此循环三次,就从九个数中取了三个数出来。不过我们这样取一定会出现重复,而任务要求是要去三个不重复的数,所以要在这里加一条判断,如果三个数两两不等则继续运行,否则重新执行。至此实现随机取三个盒子

随机获取三个颜色

十六进制颜色由“#”和0~9,a~f十六个数字随机取六个数字组成的6位字符串,我们只要通过上面随机数的方法,分六次随机出露个数字,即可产生一个颜色。又因为此处并没有要求颜色要两两不等,所以生成即可。

将随机出来的颜色值分别添加到3个格子的样式上

这里涉及到简单的DOM操作 
dom.style.background,意为“节点的样式的背景颜色”,即可吧随机出的颜色赋给各个盒子。

一些细节

此任务到这里也就可以做出来了,但是仍有一些细节,比如在每次给小方块涂色之前吧颜色重新涂成橙色,再比如可以先声明一个变量为1,执行这个过程后将变量清零,然后进行判断,若变量为一才执行函数,这样即可避免定时器无限叠加。

任务一的一些总结。



返回列表 返回列表
评论

    分享到