发表于： 2017-02-18 20:47:37
1 1239
2-17
<div> 发现越过九宫格从bigbox开始
没有清除.box中float:left的影响，用clear:both清除
最初打算用伪类 p:hover实现效果，但是发现仅有content与p部分发生变化，没有实现整个按钮的变化
用onclick=function()，实现 div和p的变色
用onmouseover=function(), 实现 cursor-style的变化
用onmouseout=function(), 实现指针移开后div和p的变色
最初的打算用getElementsById, 设置id为box1-9再随机1~9获取DOM，发现这个方法割裂了box与box之间的共性完全可以用getElementsByClassName 实现
getElementsByClassName返回的是一个数组，要指定下标的，跟getElementsByTagName一样
当有多个相同classname时，[i]即表示对指定的（i+1）进行操作
随机获取0-8时用
但是感觉并不高效，在检查重复方面看看能否有改进
同样，在随机颜色时也并没有排除颜色两两相同的可能(虽然机率非常低)
2-18
在调用随机颜色函数时发现始终没有反应
检查后发现，设置的变量在函数内，并不是全局变量，函数运行结束就消失，无法return出来
同时，return出的变量类型为string，在改变DOM CSS时，并不用再加””
让函数始终执行setTimeout(function,ms) 放在函数首，类似迭代的思想
延迟ms----function---延迟ms----function……
在内部增添一个使变色的格子复原的函数，同时设置setTimeout
延迟1—变色----延迟2----复原---延迟1----变色----延迟2----复原
让函数停止执行用clearTimeout
注意一定要设置全局变量
var blink;
function changebox() {
blink = setTimeout(changebox, 1000);
----}
function stopchange() {
clearTimeout(blink);
}
最后是效果图，以及在成果展示中请将javascript的加载类型从onload 改为no wrap-in <head>
返回列表
评论