javascript - 向类内的段落标签显示随机选择的值
问题描述
我有 5 个带有类名框的框和一个具有 12 个名为项目的值的数组,我随机选择它而不使用rvalue()
函数重复。
我想将随机选择的标签值显示到标签内
的框<p>
我应该如何最好地做到这一点?
这是我的代码:
var array2=[];
rvalue();
var items = [
{ 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 item;
function rvalue()
{
ptags = document.querySelectorAll('[name="values"]');
for (var index = 0; index <3; index++)
{
randomIndex = Math.floor(Math.random() * array2.length);
item = array2.splice(randomIndex, 1);
ptags[index].textContent = item.label;
ptags[index].dataset.itemIndex = randomIndex;
}
}
body {
overflow: hidden;
}
.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}
.box {
width: calc(15.4% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
background-color:#0F6;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center
}
#container {
white-space:nowrap;
text-align:center;
border:px solid #CC0000;
margin:2px;
margin-right:2px;
}
.box p {
font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;
color: #005ce6;
text-align: center;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
body{
background-size: 100vw 100vh;
}
<div id="container">
<div class="box" id="10"><p name="values"></p></div>
<div class="box" id="11"><p name="values"></p></div>
<div class="box" id="12"><p name="values"></p></div>
<div class="box" id="13"><p name="values"></p></div>
<div class="box" id="14"><p name="values"></p></div>
</div>
解决方案
array2.splice(randomIndex, 1);
返回包含 1 个对象的数组,因此您的代码中的项目是对象数组,使用 item[0]
var array2=[];
var items = [
{ 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 item;
function rvalue()
{
ptags = document.querySelectorAll('.box');
for (var index = 0; index <3; index++)
{
randomIndex = Math.floor(Math.random() * array2.length);
item = array2.splice(randomIndex, 1);
ptags[index].children[0].textContent = item[0].label;
// ptags[index].dataset.itemIndex = randomIndex;
}
}
rvalue()
body {
overflow: hidden;
}
.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}
.box {
width: calc(15.4% - 4px);
display: inline-block;
border-radius: 5px;
border: 2px solid #333;
border: #000 border-color: #e6e600;
margin: -2px;
background-color:#0F6;
}
.box {
height: 15vh;
display: inline-flex;
align-items: center;
justify-content: center
}
#container {
white-space:nowrap;
text-align:center;
border:px solid #CC0000;
margin:2px;
margin-right:2px;
}
.box p {
font-size: calc(2vw + 10px);
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;
color: #005ce6;
text-align: center;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
body{
background-size: 100vw 100vh;
}
<div id="container">
<div class="box" id="10"><p name="values"></p></div>
<div class="box" id="11"><p name="values"></p></div>
<div class="box" id="12"><p name="values"></p></div>
<div class="box" id="13"><p name="values"></p></div>
<div class="box" id="14"><p name="values"></p></div>
</div>
推荐阅读
- intellij-idea - PhpStorm“到处搜索”中缺少“章节”
- pine-script - 如何以指定价格制作 pine 脚本测试
- javascript - ChartJS 电子邮件 HTTP 请求 API
- java - java - 如何避免在java中的异步系统中并行处理重复项
- powershell - 如果列中的文本与特定路径或文件名匹配,则删除整行 CSV
- spfx - 如何覆盖 Kendo React 样式?
- spring - 带有 Jakarta Bean 验证框架的 Spring 应用程序
- node.js - 有没有办法解决 EPERM: operation not allowed, copyfile
- typescript - 如何使用来自@reduxjs/toolkit 的 WritableDraft 键入辅助函数参数?
- amazon-web-services - 如何恢复因任何病毒而丢失的 AWS .pem 文件和 putty 密钥