如何影响javascript上的所有类？

下面是我的HTML和CSS示例代码

body{
  font-family: Verdana, Geneva, sans-serif;
}

.box{
  width: 140px;
  height: 140px;
  background-color: red;
  display: none;
  position:relative;
  margin-left: auto;
  margin-right: auto;
}

.bold{
  font-weight: bold;
}
.table{
  border: 2px solid black;
  height: 150px;
  width: 150px;
}




</style>

正文{
字体系列：Verdana，日内瓦，无衬线；
}
.盒子{
宽度：140px；
高度：140像素；
背景色：红色；
显示：无；
位置：相对位置；
左边距：自动；
右边距：自动；
}
.bold{
字体大小：粗体；
}
.桌子{
边框：2件纯黑；
高度：150像素；
宽度：150px；
}

您的时间：0.000秒
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
var点击时间；var创建时间；var反应时间；
函数makeBox（）{
createdTime=Date.now（）；
var time=Math.random（）；
时间=5000*次；
var-box=document.getElementsByClassName（“box”）；
setTimeout（函数（）{
if（Math.random（）>0.5）{
对于（var i=0；i几乎没有语法错误，缺少
}
：


var-box=document.getElementsByClassName（“box”）；
setTimeout（函数（）{
if（Math.random（）>0.5）{
对于（变量i=0；i}//您是否已将css样式应用于box类？如果没有，则宽度和高度将为0，这就是您将看不到任何内容的原因

尝试在html的
中添加以下内容：

<style>
.box
{
    width:100px;
    height:100px;
}
</style>


.盒子
{
宽度：100px；
高度：100px；
}
您的脚本对我来说似乎很好

如果您只是确保为.box元素指定宽度和高度：

JSFiddle：


var-box=document.getElementsByClassName（“box”）；
var getRandomColor=函数（）{
返回'rgb（'+Math.floor（Math.random（）*255）+'，'+Math.floor（Math.random（）*255）+'，'+Math.floor（Math.random（）*255）+'）；
};
setTimeout（函数（）{
if（Math.random（）>0.5）{
对于（var i=0；i我想你把setTimout和Set Interval搞错了。看看这个

var-box=document.getElementsByClassName（“box”）；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
setInterval（函数（）{
控制台日志（“勾选”）；
if（Math.random（）>0.5）{
对于（变量i=0；i
所有框中的形状都应该是相同的吗？如果使用“新”查询选择器（）会更容易些。在查找元素之前是否确保加载了DOM？@Sebastian Nette:我不打算使用DOM，但它是必需的吗？ninja正在从document.getElementsByClassName（'box'）更改文档记录.querySelectorAll（'.box'）只需保存5个字符。除此之外，它如何“更容易”呢？
<style>
.box
{
    width:100px;
    height:100px;
}
</style>

  var box = document.getElementsByClassName("box");

 function getRandomColor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';
     for (var i = 0; i < 6; i++) {
         color += letters[Math.floor(Math.random() * 16)];
     }
     return color;
 }

 setInterval(function () {
     console.log("Tick");
     if (Math.random() > 0.5) {

         for (var i = 0; i < box.length; i++) {
             box[i].style.borderRadius = "100px";
         }

     } else {

         for (var i = 0; i < box.length; i++) {
             box[i].style.borderRadius = "0";
         }

         for (var i = 0; i < box.length; i++) {
             box[i].style.backgroundColor = getRandomColor();
         }

         for (var i = 0; i < box.length; i++) {
             box[i].style.display = "block";
         }


     }
 }, 1000);