如何在每次刷新时随机(给定(打乱字符串？每次刷新，我都想显示一个不同的"author"，如果你想要，你可以忽略'quote'或'order1'
这就是我所拥有的：
(很抱歉，我开始学习JS基础知识，这是我想要完成的一页的结果(
我是一个初学者，所以请解释解决方案，并对我的轻松
请根据jsfiddle或创建类似的
const quotes = [
{
quote: 'QRimg1.jpg', //or https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text1
author: 'text1',
order1: 'Order ID: #1'
},
{
quote: 'QRimg2.jpg', //or https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text2
author: 'text2',
order1: 'Order ID: #2'
},
]
const quoteBtn = document.getElementById('quote-btn');
const quote = document.querySelector('.quote');
const author = document.querySelector('.author');
const order1 = document.querySelector('.order1');
function qrCode() {
let random = Math.floor(Math.random() * quotes.length);
quote.getElementsByTagName("IMG")[0].src = quotes[random].quote;
author.innerHTML = quotes[random].author;
order1.innerHTML = quotes[random].order1;
}#box1{
margin-top:70px;
margin-left:35px;
width:430px;
}
.tablink {
background-color: #555;
color: black;
font-weight: 500;
float: left;
border: solid 1px black;
margin-top:0px;
outline: none;
cursor: pointer;
padding: 8px 8px;
font-size: 15px;
width:100%;
}
/* Style the tab content */
.tabcontent {
border:solid black 2px;
color: black;
display: none;
padding:100px;
text-align: center;
height:380px;
}
.container_box{
margin: 20px;
margin-top:50px;
width:455px;
height:400px;
}
.quote img{
width: 160px;
height: 160px;
margin-top:-85px;
display: block;
margin-left: 13px;
margin-right: auto;
margin-bottom:10px;
z-index:100;
}
.order1{
font-size:18px;
color:black;
font-weight:800;
left:50px;
position:absolute;
margin-top:-35px;
z-index:50;
}
*{
box-sizing:border-box;
}
.container{
width:50%;
}
.author{
font-size:15px;
color:black;
font-weight:400;
border:1px solid black;
border-radius:3px;
background-color: #f0f0f0;
width: 352px;
height:22px;
padding-top:2px;
}
.author{
position:absolute;
left:72px;
top:320px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id= "box1">
<div class="tablink" onclick="someFunction('orange', this, '#FF9900')" id="defaultOpen">Some text</div>
<div class="order1">ID: #0</div>
<div id="orange" class="tabcontent">
<div class="container_box">
<span class="quote"><img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text0"></span>
</div>
<div class="author">text0</div>
</div>
</div>
<script>
//colorchange for topbar
function someFunction(otherName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(otherName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script type="text/javascript">
window.onload = qrCode;
</script>
</body>
</html>p.s很抱歉没有放置'javascript'标记，由于某种原因，它显示了一个错误，
请不要关闭我的问题，如果您希望，您可以编辑/添加标记
这是一个错误的qrCode函数调用，
const quotes = [
{
quote: 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text1', //or
author: 'text1',
order1: 'Order ID: #1'
},
{
quote: 'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text2', //or
author: 'text2',
order1: 'Order ID: #2'
},
]
const quoteBtn = document.getElementById('quote-btn');
const quote = document.querySelector('.quote');
const author = document.querySelector('.author');
const order1 = document.querySelector('.order1');
function qrCode() {
let random = Math.floor(Math.random() * quotes.length);
quote.getElementsByTagName("IMG")[0].src = quotes[random].quote;
author.innerHTML = quotes[random].author;
order1.innerHTML = quotes[random].order1;
}
qrCode();#box1{
margin-top:70px;
margin-left:35px;
width:430px;
}
.tablink {
background-color: #555;
color: black;
font-weight: 500;
float: left;
border: solid 1px black;
margin-top:0px;
outline: none;
cursor: pointer;
padding: 8px 8px;
font-size: 15px;
width:100%;
}
/* Style the tab content */
.tabcontent {
border:solid black 2px;
color: black;
display: none;
padding:100px;
text-align: center;
height:380px;
}
.container_box{
margin: 20px;
margin-top:50px;
width:455px;
height:400px;
}
.quote img{
width: 160px;
height: 160px;
margin-top:-85px;
display: block;
margin-left: 13px;
margin-right: auto;
margin-bottom:10px;
z-index:100;
}
.order1{
font-size:18px;
color:black;
font-weight:800;
left:50px;
position:absolute;
margin-top:-35px;
z-index:50;
}
*{
box-sizing:border-box;
}
.container{
width:50%;
}
.author{
font-size:15px;
color:black;
font-weight:400;
border:1px solid black;
border-radius:3px;
background-color: #f0f0f0;
width: 352px;
height:22px;
padding-top:2px;
}
.author{
position:absolute;
left:72px;
top:320px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id= "box1">
<div class="tablink" onclick="someFunction('orange', this, '#FF9900')" id="defaultOpen">Some text</div>
<div class="order1">ID: #0</div>
<div id="orange" class="tabcontent">
<div class="container_box">
<span class="quote"><img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=text0"></span>
</div>
<div class="author">text0</div>
</div>
</div>
<script type="text/javascript">
//colorchange for topbar
function someFunction(otherName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(otherName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>