目录
css代码
.box {
width: 400px;
height: 400px;
background-color: #797979;
margin: 100px auto;
padding-top: 100px;
}
.text{
width: 200px;
height: 50px;
outline: none;
border: 5px solid #545454;
background-color: #797979;
border-radius: 10px;
font-size: 40px;
margin: 0 auto;
}
button {
color: white;
background-color: #a955fe;
outline: none;
border: none;
width: 60px;
height: 30px;
border-radius: 15px;
}
span {
display: inline-block;
width: 100px;
height: 50px;
border: 5px solid #f93200;
background-color: white;
font-size: 40px;
}
p {
text-align: center;
}
html代码
<div class="box">
<p class="text"></p>
<p>
<button>开始</button>
<button>停止</button>
</p>
<p>您的选择是:<span></span></p>
</div>
js代码
const text = document.querySelector('.text')
const btn = document.querySelectorAll('button')
const span = document.querySelector('span')
function Random(n, m) {
if (n > m) {
let temp = n
n = m
m = temp
}
return Math.floor(Math.random() * (m - n + 1)) + n
}
let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'h', 'i', 'l', 'j', 'k', 'm', 'l', 'n', 'q', 'r', 'u', 'y', 'o', 'p', 'x', 'z', 's', 'v', 't', 'w']
let timer
btn[0].addEventListener('click', function () {
timer = setInterval(function () {
let random =Random(0,arr.length-1)
text.innerHTML = arr[random]
}, 60)
})
btn[1].addEventListener('click', function () {
clearInterval(timer)
span.innerHTML=text.innerHTML
})