发表于： 2019-11-25 21:40:33
1 1129
今日完成:
为16进制代码添加阻止颜色重复的代码
var color1 = "#" + col() + col() + col() + col() + col() + col();
var color2 = "#" + col() + col() + col() + col() + col() + col();
var color3 = "#" + col() + col() + col() + col() + col() + col();
if (color1===color2||color1===color3||color2===color3){
//防止颜色重复,判断语句,意思是如果有相同的颜色,就重新声明函数,覆盖原本颜色,直到没有重复的颜色
var color1 = "#" + col() + col() + col() + col() + col() + col();
var color2 = "#" + col() + col() + col() + col() + col() + col();
var color3 = "#" + col() + col() + col() + col() + col() + col();
//要写在,改变九宫格颜色之前,不然,九宫格出现重复颜色也无法改变
}
cl0.style.background = color1;
cl1.style.background = color2;
cl2.style.background = color3;
优化代码,选择颜色
function col() { //随机生成十六进制颜色
var ne = []
for (var a = 0; a < 6; a++) {
var num = Math.floor(Math.random() * 16).toString(16); //生成0~16内的随机数;高于9由toString(16),转成16进制的字母
ne.push(num);
}
var coo = "#" + ne[0] + ne[1] + ne[2] + ne[3] + ne[4] + ne[5];
return coo;
}
var color1 = col()
var color2 = col()
var color3 = col()
---------------------------------------------------------------------------------------
二次优化代码颜色
//整体的函数的作用,就是生成一个随机的16进制颜色
function col() { //随机生成十六进制颜色
var ne = [] //16进制的数字
for (var a = 0; a < 6; a++) {
var num = Math.floor(Math.random() * 16).toString(16); //生成0~16内的随机数;高于9由toString(16),转成16进制的字母
// ne.push(num);
ne += num; //自加,相当于ne=ne+num的简写
}
// var coo = "#" + ne[0] + ne[1] + ne[2] + ne[3] + ne[4] + ne[5];
var coo = "#" + ne; ////#加上进制的数字
return coo;
}
描述:让ne自加每一次,从num中得到得一个随机16进制的数字,这个操作重复6次,就得到16进制颜色,井号键#后面的六位数,
声明一个变量,让得到的6位数与#连城一个字符串,使整个函数输出的是一个完整的随机16进制颜色的字符串
----------------------------------------------------------------------------------------------------------------------------------------
下一步,计时器
JavaScript，在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。称之为计时事件
有两种形式
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。
区别:前者是一定时间执行一次(多次),后者是一定时间后执行一次(一次)
ps:setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法
语法:
window.setInterval("javascript function",milliseconds);
1.window.setInterval() 方法可以不使用 window 前缀，直接使用函数 setInterval()。
2.setInterval() 第一个参数是函数（function）。
3.第二个参数间隔的毫秒数(1000 毫秒是一秒。)
为函数添加计时器,
遇到问题:
计时器没有生效
代码：
setInterval(col(),1000);//控制台显示Uncaught SyntaxError: Unexpected identifier
原因：
1.根据console.log(col())和console.log(col)的结果,所以setInterval(col()
是错的,运行一个输出结果,自然是错的,控制台显示Uncaught SyntaxError: Unexpected identifier
解决:改为setInterval(col,1000)
运行整个函数体
2.但是这样还是不行
描述:颜色还是改变一次,就不变了,但计时器确实在运行
原因:虽然在运行,但是去不能改变函数外面第一次已经改变的九宫格的颜色
解决:把改变绑定颜色这一过程,重新封装成一个函数,把setInterval()的作用对象改成这个函数,
每过规定的时间,就重新运行一次函数改变颜色的过程
//封装改变绑定九宫颜色这一过程
function jishi() {
//为颜色声明变量
var color0 = col()
var color1 = col()
var color2 = col()
//防止颜色重复
if (color1 === color2 || color1 === color3 || color2 === color3) {
//判断语句,意思是如果有相同的颜色,就重新声明函数,覆盖原本颜色,直到没有重复的颜色
var color1 = col();
var color2 = col();
var color3 = col();
//要写在,改变九宫格颜色之前,不然,九宫格出现重复颜色也无法改变
}
//绑定九宫格的序号
var bb = numbox();
var cl0 = document.getElementsByClassName('box1')[bb[0]];
var cl1 = document.getElementsByClassName('box1')[bb[1]];
var cl2 = document.getElementsByClassName('box1')[bb[2]];
//给绑定的九宫格改变颜色
cl0.style.backgroundColor = color0;
cl1.style.backgroundColor = color1;
cl2.style.backgroundColor = color2;
}
setInterval(jishi, 1000);
3.开始闪烁,但还是有问题
描述:随着计时器的运行,原本赋予的颜色没有重置,就留在了原本的九宫格颜色上,下次运行,
又是另一部分九宫格改变颜色,不断叠加,最后变得五颜六色,与任务描述不符
显示:
解决:
思路:在1000毫秒运转之前,颜色重置成原本的颜色
用setTimeout改变一次,设置颜色为九宫格原本的颜色,然后时间延时995,意思为在1000毫秒改变颜色前,重置为原本的颜色
遇到问题:设置无效
原因:
1.直接添加的颜色,需要为颜色添加引号才识别
2.写在函数外面也是不识别的,所以写在函数的里里面
代码:
... ...
var cl2 = document.getElementsByClassName('box1')[bb[2]];
//给绑定的九宫格改变颜色
cl0.style.backgroundColor = color0;
cl1.style.backgroundColor = color1;
cl2.style.backgroundColor = color2;
setTimeout(function () {
cl0.style.backgroundColor = "burlywood";
cl1.style.backgroundColor = "burlywood";
cl2.style.backgroundColor = "burlywood";
}, 995);
}
setInterval(jishi, 1000);
成功
-----------------------------------------------------------------------
下一步,点击开始和点击结束
先设置两个按钮,根据例子设置点击事件
遇到问题:
描述:绑定到封装改变颜色的函数上面,发现无效,不需要点击,直接就开始直闪烁
解决:
用一个函数包裹住改变颜色的函数和计时器,然后点击这个函数,让改变颜色和计时器同时生效
成功
遇到问题:
计时器停止失效
原因:需要声明一个变量确定计时器的返回值
代码
//为按钮声明变量
var cl3 = document.getElementsByClassName('button')[0];
var cl4 = document.getElementsByClassName('button')[1];
var myvar;//声明一个全局变量
//点击开始,九宫格开始闪烁,按钮样式改变
function start() {
clearInterval(myvar);//每次点击前重置,原本的点击计时器效果,如果不清除,
//就是叠加,运行间隔时间会变短,改变颜色随着点击次数,不断加快
myvar = setInterval(jishi, 1000);//给全局变量赋值,用变量确定计时器返回值
cl3.style.backgroundColor = "burlywood";//改变点击时按钮的样式,下同
cl3.style.color = "white";
cl4.style.backgroundColor = "white";
cl4.style.color = "burlywood";
}
//点击结束,清除九宫格闪烁,按钮样式改变
function end() {
clearInterval(myvar);//调用全局变量,清除计时器函数运行
cl4.style.backgroundColor = "burlywood";
cl4.style.color = "white";
cl3.style.backgroundColor = "white";
cl3.style.color = "burlywood";
}
思考:为什么clearInterval(myvar);运行后不需要,重置九宫格?
原因:代码的作用是清除计时器运行,不是停止计时器运行
js-task1完成
遇到问题:
1.16进制颜色,循环6次,不知道怎么取每次的值,直接合成一个字符串
解决:
方法一:设置一个空数组,把每次的值push到空数组中,然后用数组的每个值加号连接组成字符串
方法二:设置空数组,空数组+=随机16进制的一个值,循环六次,直接得到一个字符串
2.计时器不生效,再次感受到一个函数col和col()之间的区别,计时器,用col,因为作用的使整个函数运算的过程
3.声明一个函数,不知道怎么去影响,另一个函数内部的值,关于作用域,声明一个全局变量,在一个函数内部赋值,
又在另一个函数内部,通过这个全局变量,来影响另一个函数,内部的值
收获:同上
明日计划:
1.总结js-1学到的知识点
2.开始js-2
返回列表
评论