IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

为什么我的经常会只出现两次，一次盒子的变色

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

js
var smallBox = document.getElementsByName("box");
var x;//定义定时的变量。
var startDiv;//定义开始按钮所在地盒子有在的变量

function color () {
    var a,b,c;//定义三个自变量来储存三个颜色值
    var arr = [a,b,c];
    for (var i = 0;i < arr.length;i++){
        arr[i] = Math.floor(Math.random() * 256).toString(16);
    }
    var newColor = "#" + arr[1] + arr[2] + arr[0];
    return newColor;
}

function reset() {//重新设置颜色
    for (var j = 0;j < 9;j++) {
        smallBox[j].style.backgroundColor = "yellow";
    }
}

function a () {//在1~9中随机取三个数
    var arr1 = [];
    var arr = [0,1,2,3,4,5,6,7,8];
    for (var x = 0;x < 3;x++) {
        var index = ~~(Math.random() * arr.length);
        arr1.push(arr[index]);
        arr.splice(index,1);
    }
    return arr1;
}

function staticState () {
    reset();
    var umber = a();
    for (var i = 0;i < umber.length;i++) {
        smallBox[umber[i]].style.backgroundColor = color();
    }
}

function start () {
    startDiv = document.getElementById("start");
    startDiv.style.background = "yellow";
    clearInterval(x);
    x = setInterval("staticState()",1000);
}

function stop () {
    reset();
    clearInterval(x);
    startDiv.style.background = "";//重置开始键的背景
}

放在页面的js复制到js文件就不生效了

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

/* 获取所有div */
var timer2 = null;
var myNodelist = document.querySelectorAll("div");
var btn = document.querySelectorAll("button");
/* 随机颜色的函数 */
function color() {
    return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6)
}
/* 变色函数 */
function Time() {
    var randomArray = []; //声明一个数组
    for (var i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.background = "orange";
    } // 重置每个div的颜色为
    for (var i = 0; i < 3; i++) {
        var randomLoc = Math.floor(Math.random() * (myNodelist.length));
        if (randomArray.indexOf(randomLoc) < 0) {
            randomArray.push(randomLoc);
        } else {
            i--;
        }
    } //  给数组取三个不重复的数字
    myNodelist[randomArray[0]].style.background = color();
    myNodelist[randomArray[1]].style.background = color();
    myNodelist[randomArray[2]].style.background = color();

}

function start() {
    if (start.className == "") {
        start.className = "orange"
        clearInterval(timer2);
        timer2 = setInterval("Time()", 1000);
    }
}

function stop() {
    clearInterval(timer2);
    start.className = "";
    for (var i = 0; i < myNodelist.length; i++) {
        myNodelist[i].style.background = "orange";
    }

}

面向对象

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
		integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<style type="text/css">

	</style>
</head>

<body>
	<p title="qqqWWWSS">this a test</p>
	<script>
		var paras = document.getElementsByTagName("p");
		for (var i = 0; i < paras.length; i++) {
			var title_test = paras[0].getAttribute("title");
			if (title_test != null) {
				alert(title_test);
			}
		}
	</script>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"
		integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
		crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
		integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
		crossorigin="anonymous"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
		integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
		crossorigin="anonymous"></script>
</body>

</html>
<!-- test vs code git git git -->

如何将随机获取的三个数与小格子链接起来？

0

1

操作DOM

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var box=document.getElementsByClassName("box")//获取九宫格DOM

//获取三个随机数
function boxnum() {
    var box = [0, 1, 2, 3, 4, 5, 6, 7, 8];//定义box数组
    var newbox = [];//定义新数组
    var runnam = 3;
    for (k = 0; k < runnam; k++) {
        var ran = Math.round(Math.random() * (box.length - 1));//获取1-8内的随机数并取整
        newbox.push(box[ran]);//将获取的数放入新数组
        box.splice(ran, 1);//删除原数组里的随机数
    }
    console.log(newbox);
    return newbox;
}

typeof 疑问

0

1

变量 js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var name;
name = 'jin';
console.log(typeof name);
name=1;
console.log(typeof name);

如何写一个for循环

1

控制流程语句

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

for(  )

要怎么设置才能让九宫格变色后恢复原样？

0

1

操作DOM

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   clearInterval(startButton);

    startButton = setInterval("changeColor()", 1000);

    document.getElementsByTagName("button")[0].disabled=true;

for的作用、用处

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
var ranNum = 5;
for (var i = 0; i < ranNum; i++) {
var ran = Math.floor(Math.random() * arr.length);

九宫格颜色不能正常显示

1

操作DOM 表达式和运算符变量

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

var t;

function start() {
    var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
    for (i = 0; i < 3; i++) {
        var a = Math.floor(Math.random() * arr.length);
        var b = Math.floor(Math.random() * arr.length);
        var c = Math.floor(Math.random() * arr.length);
        if (a !== b && a !== c && b !== c) {
            break;
        }
    }

    var square = document.getElementsByClassName("square");
    for (j = 0; j < square.length; j++) {
        square[j].style.background = "orange";
    }

    function color() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb( ' + r + ',' + g + ',' + b + ')";
    }

    square[a].style.background=color();
    square[b].style.background=color();
    square[c].style.background=color();


    t = setTimeout("start()", 500);

}



function stop() {
    console.log(t)
    clearInterval(t);
    var square = document.getElementsByClassName("square");
    for (h = 0; h <square.length; h++) {
        square[h].style.background = "orange";
    }

}

用JavaScript修改CSS属性有哪几种方法；

0

1

js基础

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<body>
    <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>
    <div class="box"></div>

    <button onclick="go()" id="start">开始闪</button>
    <button onclick="end()">结束闪</button>
    <script src="task1 .js"></script>
</body>

loading