[武汉|]JS-|2019年05月13日的日报-技能树.IT修真院

发表于： 2019-05-13 15:22:02

3 949

今天完成的事情：
做js任务1

明天计划的事情：
完善任务1
探究各种深度思考
很多还是不太清楚，深入了解学习

遇到的问题：
来剖析一下js代码。

// 定义全局变量
var div = document.getElementsByTagName("div");
var btn = document.getElementsByTagName("button");

div是九宫格的九个色块，控制他们的颜色变化，以及选取随机数，定时等等。
btn是下面的两个按钮，绑定各种事件。
学到一个新的选取doom点方法 document.getElementsByTagName("")，这里是tag选取法，也就是标签，而html是标签语言，也就是可以直接选取到html的各种标签。

1，颜色随机

// 随机颜色
function color(){
// 局部变量
var r,g,b;
// 使用css标签 rgb来确定颜色
// 使用随机数
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
// 将随机的颜色 返回给 函数
return 'rgb(' + r + ',' + g + ',' + b + ')';
|}

这里颜色用的rgb标签，等于是用到的随机数。

2，获取三个随机数
https://blog.csdn.net/OBKoro1/article/details/69245725
http://blog.sina.com.cn/s/blog_70a3539f0102uwsw.html

//randomArray(Array , number ,bool);

//Array 随机获取的原始数组

//number 获取的个数

//bool 是否可以重复

//作者：liws

根据

写的代码如下

function num() {
var randomArray = [];
for (var i = 0; i < div.length; i++) {
div[i].style.background = "#ffa500";
}
// 没被选到的div 的颜色都是 ffa500 
for (var i = 0; i < 3; i++) {
var randomdiv = Math.floor(Math.random() * (div.length));
if (randomArray.indexOf(randomdiv)<0){
randomArray.push(randomdiv);
}else {
i -- ;
}
}

div[randomArray[0]].style.background = color();
// 调用上个函数的color结果
div[randomArray[1]].style.background = color();
div[randomArray[2]].style.background = color();
}

indexOf()排除相同的随机数
首先需要知道的是indexOf()这个方法是什么，及其作用。

w3c定义和用法indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

push()将不重复随机数添加到数组
push()定义和用法：
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

所以这段代码的思路就是从9个div选三个出来，然后添加到数组的前列，使之成为i = 0;i = 1; i = 2;然后调换颜色。

3，定时器
http://www.w3school.com.cn/jsref/met_win_setinterval.asp

btn[0].onclick = function () {
if (btn[0].className == "") {
num();
// 调用上面  num  函数的结果
btn[0].className = "orange"
// btn被点了之后替换类名 orange
// 这里css设置了orange的颜色  等于用js写个checked效果

var dingshiqi;
clearInterval(dingshiqi);
dingshiqi = setInterval("num()", 1000);
// 设置定时器
}
}

btn[1].onclick = function () {
clearInterval(dingshiqi);
btn[0].className = "";
for (var i = 0; i < oli.length; i++) {
div[i].style.background = "#ffa500";
}
}

这样开始闪有用，停止闪点不动。

收获：
选取随机数这里看师兄的日报，本来想学习洗牌算法，然而有点看不懂，最后使用了选取随机数组这个方法，毕竟看得懂..

返回列表

【任务14】 [武汉|]JS- | 2019年05月13日 的日报 中品

评论

分享到

【任务14】 [武汉|]JS- | 2019年05月13日的日报中品