一垦江、項(xiàng)目介紹
- 實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)出現(xiàn)不同人的名字嗓化，二次點(diǎn)擊停止在某個(gè)人名字之上棠涮，三次點(diǎn)擊繼續(xù)隨機(jī)出現(xiàn)
二、項(xiàng)目邏輯
- 隨機(jī)
- 區(qū)分單次二次多次點(diǎn)擊
- 是停止還是繼續(xù)隨機(jī)
三刺覆、項(xiàng)目實(shí)現(xiàn) — 代碼
style
<style>
#oname{width: 300px;height: 100px;border: 1px solid black;border-radius: 50px;display: block;margin: 100px auto;text-align: center;line-height: 150px;font-size: 32px;outline:none;}
#btn{width: 300px;height: 100px;border:none;border: 1px solid black;border-radius: 50px;display: block;margin: 200px auto;text-align: center;line-height: 100px;outline:none;font-size: 32px;}
</style>
body
<body>
<input type="text" id="oname" readonly>
<input type="button" value="隨機(jī)點(diǎn)名" id="btn">
</body>
js
var oname = document.getElementById('oname');
var btn = document.body.children[1];
var ns = ['張三','張怡','張呈雙','家蒴','張智軒','智杰','澤城','張?jiān)珴?,'嵓張國(guó)漾','張家朔','張國(guó)楊','李四','億斌','張澍'];```
var t;
var onoff = 0; // 0是開(kāi)
oname.value = '張三'; //設(shè)定一開(kāi)始名字框內(nèi)的內(nèi)容
btn.onclick = function () {
if(onoff == 0){
t = setInterval(function(){
var i = Math.round(Math.random()*(ns.length-1));
oname.value = (ns[i]);
oname.style.background = randomColor();
},100);
onoff = 1;
}else{
clearInterval(t);
onoff = 0;
}
}
