发表于： 2019-03-24 20:01:10
1 580
js任务一总结：
官网脑图：
自己脑图：
任务总结：
1 为什么类选择器 不行？
function myFunction(){
x=document.getElementById("box");
x.style.background="yellow";
}
答：要将getElementById换成getElementsByClassName
2当div 都设置为id为bo时 为什么 点击时只有第一个div变？
<div class="box" id="bo"></div>
<div class="box" id="bo"></div>
id是唯一的 不可以一样
3for（a==b||b==c||a==c）{ }
意思是：a=b或者b=c或者a=c,也就是只要在abc三个数字中有任意两个相同的数（如：3、3、2,1、8、1等）,这个判断式就成立. 则执行方块区的方法 一直到不成立为止（即三个数都不一样）
4var a = arr[one].style.background=color(); 为什么不加双引号？color（）
5 如何向数组添加数？
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度 arr.push(num);
6 错误写法：var rgb = "(" + r + "," + g + "," + b + ")";
这样写当然不会变成rgb 注意 前面的rgb只是变量的名称 起不了rgb的作用
因为color：rgb(22, 33, 33); 如果后面不加rgb 则color：(22, 33, 33); 就不知道是什么了
7var myVar=setInterval(function(){start()},1000); 放在函数start外面会怎样？
会导致自动运行 即不能通过按钮来控制开始
在里面的这种写法：
function start(){
myVar=setInterval(function(){start()},1000);
colors();
}会导致 变化越来越快 不是按1秒变化一次 为什么呢？
而且写在里面 结束按钮不会起作用 为什么呢？
答：当放在里面时并且是上述写法时 会导致计时器累计（即让反复调用函数start（）产生堆积） 正确写法：setInterval(function(){colors()},1000);
9return结束的是整个函数 （哪怕return位于条件或循环语句之内 如果是break则只会结束这个条件或者循环语句）（看js-test demo）
10 如何清空数组？（因为每次都要产生三个不同的数,如果不清空 那么一次产生3个 二次就会有6个 三次就9个 ..依次累计）
答： 在点击函数最后加上arr=[ ] 来清空之前产生的三个数
11计时事件： 现在我要实现的效果是 先变色 然后颜色又重新变成原来的颜色 最后将数组arr【】清零
方法一： 分别写二个setInterval
myVar = setInterval(function(){
colors()
},1000);
var my = setInterval(function(){
for(var i=0;i<arr.length;i++){
x[arr[i]].style.background ="orange";
}
// 下面这行是用于清空arr数组
arr = [];
},1000);
该方法会 导致二个 setInterval 同时进行
为何在一个函数内设置了二个 setInterval 它还是同步进行？ 而不是先进行第一个 再进行第二个？
方法二：写一个setInterval再内套一个setInterval
myVar = setInterval(function(){
colors()
var my = setInterval(function(){
for(var i=0;i<arr.length;i++){
x[arr[i]].style.background ="orange";
}
// 下面这行是用于清空arr数组
arr = [];
},1000);
},3000);
该方法会导致 颜色会复原 但是颜色却不会变了（只是闪了一下）
方法三：写一个setInterval再内套一个setTimeout
myVar = setInterval(function(){
colors()
var my = setTimeout(function(){
for(var i=0;i<arr.length;i++){
x[arr[i]].style.background ="orange";
}
// 下面这行是用于清空arr数组
arr = [];
},500);
},1000);
该方法实现了效果 setTimeout是用于推迟多久之后运行的意思
12如何让开始闪按钮 禁用？ 为什么要设置禁用？在哪里设置禁用？
1）
<button class="button-one" style="height:50px;" onclick="start();" id="close">开始闪</button>
document.getElementById("close").disabled = true;
2）因为当第一次点击开始闪按钮 setInterval会一次计时 当第二次点击开始闪setInterval会二次计时（即累计之前的一次计时） 所以当每次点击开始闪按钮之后 方块颜色就会越变越快 这样是因为我们同时触发了多个setInterval的事件 所以要设置当点击一次开始闪按钮之后 ，再设置禁用该按钮 当然还有一个方法在每次开始点击的时候就要清除这个定时器：那就是在点击开始闪按钮的方法start（）先设置 clearInterval(myVar) //关闭自动闪(即清除定时器) 注意该设置必须位于该方法的 myVar = setInterval(function () {...} 之前 （因为当位于它之后 会导致 myVar = setInterval(function () 一运行 就会被clearInterval(myVar) //关闭自动闪(即清除定时器) 会导致不会变色）
3）必须要在方法start（）内设置 禁用 （即将document.getElementById("close").disabled = true;
放在该方法内） 而不是在html的button 标签内就 禁用（否则怎么让它闪 我只是要让它在启动开始闪按钮之后，不可以再按开始闪按钮 而不是一开始就禁止使用开始闪按钮）
在标签内禁用方法：<button class="button-one" style="height:50px;" onclick="start();" id="close" disabled >开始闪</button>
13
函数不调用是不会运行的 但是循环或者条件语句如果是直接写在 js内 是会直接运行的
例：
html:
<body>
<p id="pid"></p>
<script src="../随机从1-10中产生2个不同的数/test.js"></script>
js:
var pid = document.getElementById('pid');
var num = new Array();
function di(){
for (var i = 0; i < 3; i++) {
var number = Math.floor(Math.random() * 9);
if (num.indexOf(number) < 0) {
num.push(number);
} else {
i--;
}
}
}
pid.innerHTML = num;
该函数di()是不会自动运行的 因为没有被调用
但是循环或者条件语句如果是直接写在 js内 是会直接运行的：
html:
<body>
<p id="pid"></p>
<script src="../随机从1-10中产生2个不同的数/test.js"></script>
js:
var pid = document.getElementById('pid');
var num = new Array();
for (var i = 0; i < 3; i++) {
var number = Math.floor(Math.random() * 9);
if (num.indexOf(number) < 0) {
num.push(number);
} else {
i--;
}
}
pid.innerHTML = num;
返回列表
评论