console
const words = '正功丙艾石戊灭甲电四生代白乐发皮对付主玉申由未巧去甘世古节本可左右队为切片比厅丹巨水文乌专扎讥勾斤支仅凶冈反内仍孔犬乏瓦区欠劝凤仇订计幻历夭介仁忆币允仆戈仑氏屯匀仓韦厄仄亢壬户讣阞贝书公认分艺火中手王六止从太长牛互车少不云井办什斗邓天匹引爪无今心木巴元月尤丰勿风父见午气以日丑五夫牙友开毛化升尺方双于亏工士土兀十了厂几力人上会和三提一优大口义史鸟马丈亿饭寸折扣'
let wordsArray = words.split('');
function handleGetWord() {
const index = Math.floor(Math.random() * (wordsArray.length))
document.getElementById('wordId').innerHTML = wordsArray[index]
wordsArray.splice(index, 1);
}
handleGetWord();
document.getElementById('wordId').onclick = function () {
if (wordsArray.length === 0) {
alert('所有文字用完了,重新开始')
wordsArray = words.split('');
}
handleGetWord();
}
document.getElementById('refresh').onclick = function () {
wordsArray = words.split('');
handleGetWord();
}
<div class="content">
<span id="refresh">下一轮</span>
<div id="wordId"></div>
</div>
body,
html {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
#refresh {
font-size: 2rem;
}
#wordId {
flex: 1;
align-items: center;
text-align: center;
font-size: 12rem;
display: flex;
justify-content: center;
flex-direction: column;
}