[西安|结业弟子]JS-刘思安|2020年04月17日的日报-技能树.IT修真院

发表于： 2020-04-17 22:44:51

1 1377

今日完成

今日因为事假，在外通过闲余时间通过手机进行编码学习，学习内容较少

学习数组相关小知识

通过遍历数组为输出的字符串的每个数组元素后追加分隔符

通过遍历数组结合if条件语句筛选出数组中数值>10的数组元素并输出到新数组中

学习如何翻转数组调整数组元素的顺序

慢慢摸索js相关知识的运用

构思流程，不知道是否正确

后面实践出真知

// 获取dom中代表九宫格的所有节点
// 获取所有节点其中之一
// 获取随机十六进制颜色
// 将十六进制赋值给获取的节点
// 重复三遍

    <div id="box1" class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <button onclick="start()">开始闪</button>

// id是唯一的  不需要索引   Element
function start() {
  document.getElementById("box1").style.backgroundColor = "red";
 }

// 类名不唯一 需要索引指定  Element's'
var x = document.getElementsByClassName("box");
// .length数组中数组元素的数目
console.log(x.length);//输出为9 9个class为box的dom节点
console.log(x[0]);
输出
/* 如需修改所有类名为box的dom属性值 
需使用for循环语句遍历数组进行逐一修改
 */
for (var i = 0; i < x.length; i++){
    x[i].style.backgroundColor = "red";
}
 

循序渐进 随机改变其中一个div的颜色为red
// 衡取获得0~9的随机整数
var x = document.getElementsByClassName("box");
var y = Math.floor(Math.random()*10);
console.log(y);
x[y].style.backgroundColor = "red";