发表于: 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
评论