[上海|结业弟子]JS-赵朋|2019年11月24日的日报-技能树.IT修真院

发表于： 2019-11-24 22:47:42

1 1117

今日完成:

改变颜色(输出到html页面,之前js的结果在html页面中体现不出来)

向html页面输出内容

简述:

可以通过HTML DOM (文档对象模型)

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

通过 JavaScript，需要操作 HTML 元素。

有三种方法来做这件事：

通过 id 找到 HTML 元素

通过标签名找到 HTML 元素

通过类名找到 HTML 元素

ps:之前已有总结

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

如需改变 HTML 元素的样式

语法：document.getElementById(id).style.property(属性名)=新样式(具体属性值)

ex:

<p id="p1">Hello World!</p>

<p id="p2">Hello World!</p>

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.color="red";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script>

<p>以上段落通过脚本修改。</p>

显示:

总结:相同属性后一个覆盖前一个

-----------------------------------------------------------

使用事件

HTML DOM 允许我们通过触发事件来执行代码。

ex:以下事件

元素被点击。

页面加载完成。

输入框被修改。

... ...

点我!</button>

显示:点击前左,点击后右

-----------------------------------------------------------------------------------

改变 HTML 输出流

document.write() 可用于直接向 HTML 输出流写内容。

改变 HTML 内容

语法：

document.getElementById(id).innerHTML=新的 HTML

ex:1

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="新文本!";

</script>

显示:

描述:Hello World!11转变为新文本!

ex:2

var element=document.getElementById("header");

element.innerHTML="新标题";

</script>

显示:

总结:以上是相同效果的两种表现形式

讲解：

上面的 HTML 文档含有 id="header" 的 <h1> 元素

使用 HTML DOM 来获得 id="header" 的元素

JavaScript 更改此元素的内容 (innerHTML)

-------------------------------------------------------------------------------------

改变 HTML 属性

改变 HTML 元素的属性

语法：document.getElementById(id).attribute=新属性值

ex:(改变了<img> 元素的 src 属性)

document.getElementById("image").src="landscape.jpg";

</script>

<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

显示:

更改,andscape.jpg,使其不能显示

显示:

描述:因为已经被html dom抓取,且产生改变的操作,只是找不到改变的图片,就是图片错误

改变document.getElementById("image").src使语法错误,效果与没有这个语句相同,即:不做任何改变

总结:上图就是smiley.gif,原本的图片

----------------------------------------------------------------------------

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

ex:在点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：onclick=JavaScript

-----------------------------------------------------------------------------------------------------------------

继续任务

目的,为随机绑定的九宫格,添加随机颜色

思路:设置九个不同颜色的数组,随机抽取,给出一组随机颜色,

然后利用html dom抓取随机九宫格元素,更改颜色为随机颜色

//同样的方法抽选随机颜色

function boxcolor(){

var color =["red","blue","yellow","green","orange","black","violet","aqua","pink"];

var newcolor=[];

var a=3;

for (var b=0;b<a;b++)

{

var ran = Math.round(Math.random() * (color.length - 1));

newcolor.push(color[ran]);

color.splice(ran,1);

}

console.log(newcolor);

return newcolor;

}

boxcolor();

var bg0=boxcolor()[0];

var bg1=boxcolor()[1];

var bg2=boxcolor()[2];

console.log(bg0);

var cl0 = document.getElementsByClassName('box1')[numbox()[0]];

var cl1= document.getElementsByClassName('box1')[numbox()[1]];

var cl2= document.getElementsByClassName('box1')[numbox()[2]];

cl0.style.background=bg0;

cl1.style.background=bg1;

cl2.style.background=bg2;

遇到问题:

如图显示:

问题描述:有时候显示,只有两个九宫格被选中,有时候,改变后的颜色相同

原因:代码

var bg0=boxcolor()[0];//抽取的是第一个数组三个数中序号为0的数,并为它声明一个变量

var bg1=boxcolor()[1];//抽取的是第二个数组三个数中序号为1的数...

var bg2=boxcolor()[2];//抽取的是第三个数组三个数中序号为2的数...

相当于连续声明了3次颜色,随意颜色第一组,随机颜色第二组,随机颜色第三组,

序号绑定的是随机颜色第一组的0号颜色,二组的1号颜色....

这就有可能出现如:2组序号2的颜色,与3组序号3的随机颜色相同,显示如右图

同理:绑定九宫格,也有可能,两组绑定的序号相同,进而表现出只绑定了两个九宫格,

其实是两个绑定了同一个九宫格,颜色显示为后一个覆盖前一个.

解决:

为这个函数声明一个变量,用变量代表一个函数

思考:为什么声明一个变量,就不是声明一个函数了?

代码对比:错误的

var cl0= document.getElementsByClassName('box1')[numbox()[0]];//这样写每一个numbox(),都相当于声明了一次函数

var cl1= document.getElementsByClassName('box1')[numbox()[1]];//这是第二次声明函数,输出数组序号为1的随机数

var cl2= document.getElementsByClassName('box1')[numbox()[2]];//这是第三次声明函数,输出数组序号为2的随机数,这样就有可能选出得随机数重复

正确的:

var bb=numbox();//就多了声明变量这一步,下方用变量名代替函数名

var cl0= document.getElementsByClassName('box1')[bb[0]];

var cl1= document.getElementsByClassName('box1')[bb[1]];

var cl2= document.getElementsByClassName('box1')[bb[2]];

混淆的点:声明一个变量=函数,调用变量不就还是又声明了一次函数吗?

思考结果:声明一个变量等于函数,仅仅就代表声明(调用)了一次函数,就是需要明白仅仅二字,

声明的这个变量如任务代码中aa,就仅仅代表它所等于的声明的函数和它的值,

再具体一点:

var aa=boxcolor()

aa;//两个变量aa代表声明了两次函数,但不会有两组函数数组

aa;//后者aa代表的函数,会覆盖前者

如果想要用变量声明两次函数,或者变成错误的的那种效果:

var aa=boxcolor()//声明一个变量,调用函数boxcolor()

var bb=boxcolor()//声明另一个变量,又调用函数boxcolor()

var cl0= document.getElementsByClassName('box1')[aa[0]];//这就是原来数组中的错误效果

var cl1= document.getElementsByClassName('box1')[bb[1]];//aa中的序号0的数字,有可能和bb中的序号1相等

即:它只代表等于的那一个值(或者说函数)

----------------------------------------------------------------------

function numbox() {

... ...

console.log(newnum);//与下方var bb = numbox();呼应

return newnum;

}

var bb = numbox(); //1.目标数组;2.能在控制台显示,因为数组内console.log(newnum);

bb;//1.这个在控制台不显示;2.它仅仅只代表目标输出的数组(特指),混淆点实践

console.log(bb);//在控制台显示,且与目标输出一致,混淆点实践

console.log(numbox());//1.相当于在代码中直接添加再numbox(),控制台显示什么?2.问题:为什么一次显示两个?答:函数体内部的return newnum;同样也作用与这个代码

//numbox()不用console也可以显示在控制台,加了,相当于console.log(1),控制台又显示一遍

对比:

对比

总结:

1.左侧一二层两个相同,var bb = numbox();和console.log(bb);

2.验证变量bb只代表声明一次函数

3.左侧三四层两个相同,因为函数体中console.log(newnum);

直接写numbox();代表第三层层,外部又加了console.log又多了一层,相当于console.log(1)控制台显示1,

所以多了第四层,且与第三层相同,验证右边如图,去掉console.log

4.三四层相同,理解上,相当于console.log(console.log(1))

三次层都是1,但是,一个是函数体内,一个是函数体外部,直接写是错的

ex:

优化后的代码:

var aa = boxcolor(); //aa代表生名一个函数,仅仅代表声明的这个函数,这里函数输出带有3个字符串的数组

var bg0 = aa[0]; //这个数组中序号为0的字符串

var bg1 = aa[1]; //...

var bg2 = aa[2]; //...

var bb = numbox();//因为函数体内有console,所以声明 var bb = numbox();会在和控制台直接显示,因为numbox();

var cl0 = document.getElementsByClassName('box1')[bb[0]];

var cl1 = document.getElementsByClassName('box1')[bb[1]];

var cl2 = document.getElementsByClassName('box1')[bb[2]];

cl0.style.background = bg0;

cl1.style.background = bg1;

cl2.style.background = bg2;

console.log(bb[0]);

console.log(document.getElementsByClassName('box1')[bb[0]])

html页面显示,和控制台显示:

遇到问题:

直接添加颜色(改变样式),如红色需要引号""

cl0.style.background = "red";

同理,直接直接添加引号调用bg0:

cl0.style.background = "bg0";

结果无效无效

原因:

console.log("red");;控制台输出:

不带引号

-------

console.log("bg0");

控制台显示:

因为加了引号成了变量名字符串,没有引用里面包含的属性,

所以无效

所以去掉引号

console.log(bg0);

显示内部包含的颜色:

-----------------------------------------------------------------------------------------------------------------------------

遇到问题:因为九选一不符合要求,所以改用其他方法,随机颜色

解决:随机rgb颜色

思路:rgb的格式rgb(r,g,b)

问题拆分,先解决括号内的数字问题,xx都是256中的数字,

所以,先256随机三次,(ps:以下代码也可以用for语句循环3次,但是下面这种更直观)

var r = Math.floor(Math.random() * 256);//含义为0~256中随机选一个数字

var g = Math.floor(Math.random() * 256);//分别为r,g,b随机选择数字

var b = Math.floor(Math.random() * 256);//然后把它们组合在一起

遇到问题:

怎么把这三个随机数字,组合在一起

思路:得到三个数字需要干什么,根据rgb颜色的表现形式,要让控制台显示(r,g,b),

往这上面去想,所以写出代码:

var color="("+r+","+g+","+b+")";//引号""内代表字符串,加号(+)连接字符串

整体:

//RGB随机颜色

function rgb(){

var r = Math.floor(Math.random() * 256);//含义为0~256中随机选一个数字

var g = Math.floor(Math.random() * 256);//分别为r,g,b随机选择数字

var b = Math.floor(Math.random() * 256);//然后把它们组合在一起

var color=r+","+g+","+b;//引号""内代表字符串,加号(+)连接字符串,通过这种操作组合在一起

return color;

}

console.log(rgb());//验证思路是否正确

console.log(rgb());//二次声明,是另一组rgb颜色

console.log(rgb());//...

控制台显示:

思路正确

然后为随机绑定的九宫格设置颜色

cl0.style.background = "rgb(rgb())";

cl1.style.background = "rgb(rgb())";

cl2.style.background = "rgb(rgb())";

显示无效

遇到问题:

上述代码为何无效

1.可能是rgb类名造成的混乱,更改,还是无效

cl0.style.background = "rgb(col())";

验证:

1.设置一个rgb颜色

cl0.style.background = "rgb(10,10,10)";

显示:

用console看控制台中的差距

无效.

原因:

cl0.style.background = "rgb(col())";

这三个本身"rgb(col())"加了引号,改变属性,整体就是一个字符串col()也是一个字符串的一部分,不再代表函数,所以无效

解决方法:

方法一,让函数一开始就代表整个rgb颜色(rgb颜色就是一个字符串)

function col() {

var r = Math.floor(Math.random() * 256); //含义为0~256中随机选一个数字

var g = Math.floor(Math.random() * 256); //分别为r,g,b随机选择数字

var b = Math.floor(Math.random() * 256); //然后把它们组合在一起

var color = "rgb"+"("+r + "," + g + "," + b+")"; //引号""内代表字符串,加号(+)连接字符串

return color;

}

... ...

cl0.style.background = col();

cl1.style.background = col();

cl2.style.background = col();

console.log(col());//让函数col()代表整个rgb颜色,rgb颜色就是一个字符串

显示:控制台显示函数col()

方法二

想要让原来的方法生效,必须最终也要让控制台显示rgb颜色

因为:

console.log(rgbcol());//控制台显示:Uncaught ReferenceError: rgbcol is not defined

原因是rgb未定义,所以,为rgb定义,给它引号成为字符串,但是不能包裹函数col,

代码:

... ...

var color = "("+r + "," + g + "," + b+")"; //引号""内代表字符串,加号(+)连接字符串

}

... ...

cl0.style.background ="rgb"+col();

cl1.style.background ="rgb"+col();

cl2.style.background ="rgb"+col();

显示:

同样有效

错的原因:

1.为函数加引号,使函数名变成了字符串,使函数失效

2.没有给rgb加引号,所以控制台显示这个字符串未定义

-------------------------------------------------------------------------------------------------------

16进制颜色

类似rgb的做法,首先看看十六进制的格式: #000000~#FFFFFF

可以拆分为两个部分:井号键(#)可以加引号定义字符串和一个随机的六位数(与之前随机的差别,一定要是6位数)

用到的新的属性toString(16)

在这里的目的是把数字转换成16进制(即:大于9的变成字母)

代码如下:

function col() { //随机生成十六进制颜色

//1.本来着这里是设置循环语句的,循环6次,把结果push到一个空数组中,

//2.但是,数组中的数值都是逗号隔开的,想要用,还是要数组[0]+数组[1]...的加起来,多此一举,那还不如直接函数+函数...优化代码

//3.本来这样做的目的,是把6次循环的值,直接集合成一个字符串,然后'#'+字符串,结果做不到直接集合成一个字符串,变成1,2的那种,不如直接函数拼接字符串

var num = Math.floor(Math.random() * 16).toString(16); //生成0~16内的随机数;高于9由toString(16),转成16进制的字母

return num;

}

col()

console.log(col());

console.log(col());

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;

for(var a=0; a<100;a++){

var x=console.log(a,"#" + col() + col() + col() + col() + col() + col());

}

显示:

遇到问题:同上

收获:

1.关于var,和函数算是分的比较清晰了

2.关于引号的实际设置应用

3.console.log的用法

明日计划:

把js任务一做完

返回列表

【任务1】 [上海|结业弟子]JS-赵朋 | 2019年11月24日 的日报 中品

评论

分享到

【任务1】 [上海|结业弟子]JS-赵朋 | 2019年11月24日的日报中品