发表于： 2019-11-21 23:55:21
1 1082
今日完成
思考了,一上午,考虑怎么和分别和九个格子绑定,没有迈出脚步,不知道如何下手,
没有思路看了一会视频,又过了一点js概念上的知识,讲的挺细致,但是不能很快对任务一有帮助,暂时搁置,每天分开看把;
可以补足一些js理解上的忙点和认知
思考了一下,是不是思考错误,顺序错了,
应该,先搞随机数字,九个随意选择三个,能随机输出3个数字,
再考虑,九宫格怎么和这三个数字绑定
暂时的思路:
1.先搞清楚怎么9个数字中随机选3个出来
2.同理,9种颜色随机选3个出来
3.按照输出的顺序,给数字配上的颜色
4.以数字为中转(id),为九宫格,其中三个改变颜色
5.想要的效果:每次刷新页面,九宫格都有随机的3个改变成随机的颜色
6.先把以上搞定再考虑其他
随机选择用到循环语句for,length,math
for循环,中length的用法
(for循环中,三个语句之间用分号隔开)
用在中间判断语句,用在数组中,在数组名后添加
语法;
语句二,定义循环,循环语句名<数组名.length;
含义:数组名.length=这个数组名之内值的个数
也就是说这个数组内有多少个值,for{}内的代码就循环多少次
ex:
<script>
cars=["BMW","Volvo","Saab","Ford"];//声明一个数组,用[]包裹,字符串必须加引号,变量值之间用逗号隔开,数字不必加引号,加了默认为文本(字符串)
for (var i=0,l=cars.length; i<l; i++){//可以在语句一中初始化任意多个值
document.write(cars[i] + "<br>");
}
</script>
显示:
BMW
Volvo
Saab
Ford
变种:
语句一可选,提前声明(写在for外)
ex:(效果同上述例子一样)
var i=0;
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (; i<cars.length; i++){
document.write(cars[i] + "<br>");
}
语句三,可以写在执行代码内
var i=0;
<script>
cars=["BMW","Volvo","Saab","Ford"];
for (; i<cars.length; ){
document.write(cars[i] + "<br>");
i++;
}
以上三个例子效果相同
从中间开始输出
var i=2,len=cars.length;
for (; i<len; i++){
document.write(cars[i] + "<br>");
}
显示:
Saab
Ford
JavaScript Math（算数） 对象
Math（算数）对象的作用是：执行常见的算数任务。
Math 对象
Math（算数）对象的作用是：执行普通的算数任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
使用Math的属性/方法的语法：
var x=Math.PI;
var y=Math.sqrt(16);
注意： Math对象无需在使用这个对象之前对它进行定义。
----------------------------------------------------------------------------
算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值：
不理解先过,任务一只需要它的算数方法
-----------------------------------------------------------------------------
算数方法
除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。
任务一需要的内容(随机数)
Math 对象的 round 方法对一个数进行四舍五入
ex:
document.write(Math.round(4.7));
显示:5
--------------------------------------------------------------------------------
Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：
ex:
document.write(Math.random());
显示:0.6375026136818132 //这是一串随机小数
----------------------------------------------------------------------------------------
使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数：
ex:
document.write(Math.floor(Math.random()*11));
显示:2 //floor(x),对x进行下舍入(就是去除小数,保留整数,类似四舍五入round(x),类似的还有ceil(x),对x进行上舍入,)
随机从0~8的数组中抽取3个数字,分为两步,1.随机抽取数字,2.保证抽取到的数字不重复.
现在会的两种方法两种方法
html代码:
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</div>
js代码:
第一种:
第一步:
声明一个函数,
function num(){//声明一个函数num
var newnum =Math.floor(Math.random()*9)//Math.random()是0~1之间的随机小数,*9乘以9,Math.random()出来的小数,
//就相当于0~9之间的随机数,因为数组从零开始,0~8,就是9个数字,所以根据实际需求,需要用floor()向下舍入取整,而不是round()
//四舍五入,有一定几率变成9,超出数组上限,使函数失效
document.getElementsByClassName('box1')[newnum] //DOM通过类名绑定,在绑定("box1")的时候,相同类名自动默认为数组,哪怕只有一个,
//调用也要加上[0]数组名;[newnum]输出的就是0~8之间的随机整数,包含0和8
console.log( document.getElementsByClassName('box1')[newnum])//console.log,写入浏览器控制台,调试用
}
num()//直接输出随机绑定3个九宫格的格子
num()
num()
但是,这样做,因为随机输出,数组的数值,有可能重复,所以绑定的九宫格也有可能重复
这就有了第二步,输出之前再增加一步,让随机的三个九宫格不重复
运用判定语句if...else
var x= num()//分别为随机函数声明变量x,y,z
var y= num()
var z= num()
if(x!=y&&x!=z&&y!=z)//意义为x,y,z相互不等于
{
}else if(x==y){//三次判定,相等就重新执行函数代码,直到相互不等于,输出
}else if(x==z){
}else if(y==z){
}
第二种方法:
function numbox(){
var num = [0, 1, 2, 3, 4, 5, 6, 7, 8]; //声明一个叫做num的数组,数字从0到8,数组必须从0开始,声明数字不需要引号
var newnum = []; //声明一个新的空的数组,用于接收判断语句后的3个随机数
var a = 3; //一个阀值,循环语句循环一次,随机取一个数字,任务要求3个,所以循环三次,名称任意,无含义,就是为了调用
for (var b = 0; b < a; b++) //括号内就是循环机制,一定条件下,{}中的代码运行几次,随意命名无含义,
//起始前b=0,b<a循环条件,b++代码执行后,意思为加一,值传入语句一,b=1再次判定,是否执行{}中的代码,直到b>=a,不再执行
{
var ran = Math.round(Math.random() * (blocks.length - 1));//这个用四舍五入round()取整,就需要blocks.length - 1,也就是乘以8,
//最大整数为8,取整从0~8中选取
//第二步,保证数组输出的值不重复
newnum.push(num[ran]);//选取随机值对应的num数组中的数值,抓取到newnum空数组中
num.splice(ran, 1);//splice删除数组num的数值,括号中两个两个值,前面是索引值,后面是删除的个数,包含自身,从0开始计算
//ex:随机的是ran随机的是2,索引值也是2,就是从num第三个值(2)开始删除,后面的数值1是删除一个,如果是2,就删除第三(2)和第四(3)个数值
}
return newnum;//输出的值,返回到newnum数组中,一共3次,数组中就包含三个随机数
}
document.getElementsByClassName('box1')[newblock[0]]//输出
document.getElementsByClassName('box1')[newblock[1]]
document.getElementsByClassName('box1')[newblock[2]]
遇到问题:
1.数组应用的括号搞清,用的[]
2.dom类绑定,之后,默认同名类,是数组,哪怕仅仅只有一个,调用也要加[0]
收获:
同上
明日计划:
继续js任务一,争取搞定
返回列表
评论