[武汉|结业弟子]JS-晏军|2020年05月02日的日报-技能树.IT修真院

发表于： 2020-05-02 10:47:42

1 1688

一.今日完成的事情

今天才开始手任务一，发现需要掌握的东西真不少，

把知识点串联起来真不容易。

首先获取盒子DOM节点，创建变量a

var a=document.getElementsByTagName("div");

在给按钮添加点击事件

  <button type="button" onclick="_start()">开始</button>
    <button type="button" onclick="_stop()">停止</button>

在添加onclick中使用了定时器方法

setTimeout("function",time) 设置一个超时对象 setTimeout不会重复
setInterval("function",time) 设置一个超时对象 SetInterval为自动重复

我的用法是

var times=null;

function _start (){//开始按钮 
times=window.setInterval("start()",1000);//设置定时器

function _stop (){//停止按钮

 window.clearInterval(times);//清除定时器

之后学习一下Math对象的使用，根据任务的要求，由于Math对象

的随机属性random()返回的值是0~1之间，所以在random属性外

添加了floor属性取整。之后学习了Array数组的特殊遍历方法利用

for循环实现，根据任务要求随机取得盒子中的3个格子

创建一个长度为3的数组来获取随机数

var arr1=new Array(3);

利用for循环来遍历数组，创建一个变量来接收随机格子

for(var i=0;i<3;i++){
    var box = Math.floor(Math.random()*a.length);

要使得三个格子不重复这里做了判断if else语句

大概思路是：三个格子，首先固定获取一个随机格子索引为0排除与其他重复，

然后继续判断第二个与第三个是否相同，如果相同重新再遍历直

到不同才能获取随机格子。

for(var i=0;i<3;i++){//遍历数组
    var box = Math.floor(Math.random()*a.length);//获取随机格子
    if(i==0){//当索引为0时获取第一个格子
        arr1[i]=box;
    }
    else{
        for(var k=0;k<i;k++){//第二个格子与第三个比较
            if(box==arr1[k]){
                i--;//如果第二个和第三个相同则继续向下遍历
            }
            else{
                arr1[i]=box;
            }
        }
    }
}

再创建一个获取随机颜色的数组方法和获取随机格子的一样

var arr2=new Array(3);//创建数组接收随机颜色

创建一个容纳颜色的数组（全局变量）

var color=[];

把随机颜色给到随机格子

for(var i=0;i<arr1.length;i++){
    a[arr1[i]].style.backgroundColor=color[arr2[i]];//把随机颜色给随机格子
}

把整个过程用函数包装

function start()

把 start（）放到开始按钮计时器中

 times=window.setInterval("start()",1000);//设置定时器

二.后面将继续完善任务。

返回列表

【任务1】 [武汉|结业弟子]JS-晏军 | 2020年05月02日 的日报 中品

评论

分享到

【任务1】 [武汉|结业弟子]JS-晏军 | 2020年05月02日的日报中品