Javascript 将随机选择的值显示到类内的段落标记
我有5个类名为box的盒子和一个有12个命名项的数组,我使用Javascript 将随机选择的值显示到类内的段落标记,javascript,html,css,Javascript,Html,Css,我有5个类名为box的盒子和一个有12个命名项的数组,我使用rvalue()函数随机选择它,不重复 我想在框中显示随机选择的标签值 在标记内 我应该如何最好地做到这一点 这是我的密码: var array2=[]; 右值(); var项目=[ {label:'1',url:'1.png'}, {label:'2',url:'2.png'}, {label:'3',url:'3.png'}, {label:'4',url:'4.png'}, {label:'5',url:'5.png'}, {l
rvalue()
函数随机选择它,不重复
我想在框中显示随机选择的标签值
在
标记内
我应该如何最好地做到这一点
这是我的密码:
var array2=[];
右值();
var项目=[
{label:'1',url:'1.png'},
{label:'2',url:'2.png'},
{label:'3',url:'3.png'},
{label:'4',url:'4.png'},
{label:'5',url:'5.png'},
{label:'6',url:'6.png'},
{label:'7',url:'7.png'},
{label:'8',url:'8.png'},
{label:'9',url:'9.png'},
{label:'10',url:'10.png'},
{label:'11',url:'11.png'},
{label:'12',url:'12.png'}];
array2=items.slice();
var项目;
函数rvalue()
{
ptags=document.querySelectorAll('[name=“values”]');
对于(var指数=0;指数问题
您应该在定义了array2
之后调用rvalue
函数
注意:行项=array2.splice(randomIndex,1);
返回一个包含对象{label:…,url:…}
的数组。这是由于
要获取标签
属性,可以执行以下操作:项[0]。标签
var array2=[];
可变项目=[{
标签:“1”,
url:'1.png'
},
{
标签:‘2’,
url:'2.png'
},
{
标签:"3",,
url:'3.png'
},
{
标签:‘4’,
url:'4.png'
},
{
标签:‘5’,
url:'5.png'
},
{
标签:‘6’,
url:'6.png'
},
{
标签:‘7’,
url:'7.png'
},
{
标签:"8",,
url:'8.png'
},
{
标签:"9",,
url:'9.png'
},
{
标签:"10",,
url:'10.png'
},
{
标签:"11",,
url:'11.png'
},
{
标签:‘12’,
url:'12.png'
}
];
array2=items.slice();
右值();
var项目;
函数rvalue(){
ptags=document.querySelectorAll('[name=“values”]');
对于(var指数=0;指数<3;指数++){
var randomIndex=Math.floor(Math.random()*array2.length);
项目=阵列2.拼接(随机索引,1);
控制台日志(项目);
ptags[index].textContent=item[0]。标签;
ptags[index].dataset.itemIndex=randomIndex;
}
}
正文{
溢出:隐藏;
}
.标题{
左缘:20%;
保证金权利:20%;
利润上限:-2%;
}
.盒子{
宽度:计算(15.4%-4px);
显示:内联块;
边界半径:5px;
边框:2倍实心#333;
边框:#000边框颜色:#E600;
保证金:-2px;
背景色:#0F6;
}
.盒子{
高度:15vh;
显示:内联flex;
对齐项目:居中;
调整内容:中心
}
#容器{
空白:nowrap;
文本对齐:居中;
边框:px实心#CC0000;
保证金:2倍;
右边距:2px;
}
.方框p{
字体大小:calc(2vw+10px);
}
p{
字体:“Courier New”,Courier,monospace;
字体大小:30px;
颜色:#005ce6;
文本对齐:居中;
}
.文本{
填充:20px;
利润率:7像素;
边缘顶部:10px;
颜色:白色;
字体大小:粗体;
文本对齐:居中;
}
身体{
背景尺寸:100vw 100vh;
}
返回了包含1个对象的数组,因此代码中的项是对象使用项[0]的数组
var array2=[];
var项目=[
{label:'1',url:'1.png'},
{label:'2',url:'2.png'},
{label:'3',url:'3.png'},
{label:'4',url:'4.png'},
{label:'5',url:'5.png'},
{label:'6',url:'6.png'},
{label:'7',url:'7.png'},
{label:'8',url:'8.png'},
{label:'9',url:'9.png'},
{label:'10',url:'10.png'},
{label:'11',url:'11.png'},
{label:'12',url:'12.png'}];
array2=items.slice();
var项目;
函数rvalue()
{
ptags=document.queryselectoral('.box');
对于(var index=0;index,现在我明白了
array2.splice(randomIndex, 1);