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

1 1687


一.今日完成的事情

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

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

首先获取盒子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);//设置定时器

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


返回列表 返回列表
评论

    分享到