发表于: 2020-09-08 19:19:39

1 1254



今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)

知识点:js改变css属性  解决:将随机出来的颜色值分别添加到3个格子的样式上

是什么?动态操作改变静态展示 

为什么?css是衣服,js换衣服

怎么用?

资料1

第一种:使用 cssText 全属性

*.style.cssText = "width: 666px; color: red";

第二种:使用 setProperty(属性名,属性值) 方法

*.style.setProperty("width", "666px");

第三种:直接使用单属性

*.style.width="666px";

资料2 obj 

1,使用obj.className来修改样式表的类名。

2,使用obj.style.cssTest来修改嵌入式的css。

3,使用obj.className来修改样式表的类名。

4,使用更改外联的css文件,从而更改元素的css


解决改变css产生的问题

1 在哪用js改的?

2.js改css框架思路 dom怎么改的  思路:获取随机数 给随机数赋予颜色 

3.dom框架解读 

 units[a.slice()[]].style.backgroundColor = randomlyColor();

3.1 单属性 style.backgroundColor 

4.怎么获取到随机数?

var units = document.getElementsByClassName("grid");

操作dom 变量赋值 单位 =文件 获取所有指定类名的元素  单位变量unints 赋值于所有grid类名元素

5.怎么重置颜色?

units[a.slice(0,3)[0]].

 for(var i = 0; i < units.length;i++){ 自动递增方法  

units[i].style.backgroundColor = "#ff8c00 i值等于默认值橙色 

索引值概念 :(索引值为 0 的 class="example")。


思路1

6.随机抽取3个数

units[a.slice(0,3)[0]] 

6.1unints是9个重置颜色的div,橙色,a数组被打乱的,抽取3个随机值,索引值0 ,赋予颜色, 0,3 是整体抽取3个随机值 

6.2unints是9个重置颜色的div,橙色,a数组被打乱的1个值,.slice抽取一次值,抽取3个随机值,索引值0 ,赋予颜色,


尝试1

在加一次随机值,看看颜色是否变多, 结论:变多了 猜想应该正确 在整体上加4,索引值对应增加

units[a.slice(0,3)[0]].style.backgroundColor = randomlyColor();

橙色所有div,a数组,获取片段,提取8个值当中 前3个随机值,形成一个新数组,【0】

抽取其中0,0代表数组下标第一个值


背景资料

引用资料1

https://www.cnblogs.com/xiangru0921/p/6514225.html

引用资料2 索引值

<div class="example">第一 Div 元素 class="example"。</div>

<div class="example">第二个 Div 元素 class="example"。</div>

<p>点击按钮修改第一个 Div 元素的文本信息(索引值为 0 的 class="example")。</p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>

<script>

function myFunction() {

    var x = document.getElementsByClassName("example");

    x[1].innerHTML = "Hello World!";

}

</script>


引用资料3

 .slice函数意思?

是什么? 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

为什么?应该是为了打乱诞生取值诞生的,

怎么用?

语法

string.slice(start,end) string线 

必须. 要抽取的片断的起始下标。第一个字符位置为 0 开头

可选。 紧接着要截取的片段结尾的下标 结尾

例子1

<p id="demo">单击按钮显示截取部分.</p>

<button onclick="myFunction()">点我</button>

<script>

function myFunction(){

var str="Hello world!"; 

var n=str.slice(0,1);

document.getElementById("demo").innerHTML=n;

}

</script>

重要提示

a.slice(0,3) 取了a数组的前3个形成新的数组 然后 [0]你知道干嘛的了吧

抽取别的数组后,在抽取一次的特性


其他推想

for这一句是重置颜色  上面的才是随机收取

1.第一句是获取全部对象,第二句是重置颜色,第三步是获取随机颜色、

2.根据注释意思 重置颜色,随机抽数,赋予颜色 


明天计划的事情:(一定要写非常细致的内容)

1.看看定时器怎么封存功能,怎点击产生功能


遇到的问题:(遇到什么困难,怎么解决的)

1.不知道还要在截取一次才能有新数组

2.不知道新数组还得再抽一次 


收获:(通过今天的学习,学到了什么知识)

1.js单属性改变css  *.style.width="666px";

2.学习获取所有类,并且改变颜色

3.学习从老数组截断,成为新数组,在抽取一次的句型结构  

slice




返回列表 返回列表
评论

    分享到