生活随笔
收集整理的這篇文章主要介紹了
原生实现随机点名
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
原生實現(xiàn)隨機點名
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><title
>Document
</title
><style
>#name_box li
{margin
: 10px
;padding
: 10px
;border
: 1px solid white
;border
-radius
: 10px
;}.active
{background
-color
: white
;color
: black
;transform
: scale(1.3);transition
: transform
0.3s
;}</style
>
</head
><body style
="background-color: black; color: white;"><div style
="display: flex; flex-flow: column; align-items: center;"><div
>總?cè)藬?shù)：
<span id
="total">?</span
> 人，抽取：
<input type
="text" id
="size"> 位
</div
><div
><button id
="btn" type
="button" style
="height: 50px; font-size: 20px; margin-top: 10px;">點擊隨機抽取
? 位
</button
></div
><div
><ul id
="name_box" style
="list-style: none; margin: 0; padding: 0; display: flex; flex-flow: row wrap;"></ul
></div
></div
><script
>(() => {const btn
= document
.querySelector('#btn')const name_box
= document
.querySelector('#name_box')const sizeInput
= document
.querySelector('#size')const total
= document
.querySelector('#total')console
.log();let size
= sizeInput
.value
? parseInt(sizeInput
.value
) : 1;btn
.innerHTML
= `點擊隨機抽取 ${size} 位`const students
= ['張三','李四','王五','阿福','旺財','小米','小紅','白白','小天','趙六','曉晴','吳浩','阿勇','王武','江山','天下','阮天','萌萌','芒果','卿苑','青檸','青鳶','蘋芃','小妮','子依','點點','賢賢','軟甜','溫柔','御姐','蘿莉','嘻嘻','瞅瞅','精靈','魯班','小智','月月','軟軟','冉冉','小琪','佳瑞','丫頭',]const studentIndexs
= students
.map( function(elm
,i
) {return i
;});total
.innerHTML
= students
.length
;students
.sort(() => 0.5 - Math
.random());students
.forEach(v
=> {const li
= document
.createElement('li')li
.innerHTML
= vname_box
.appendChild(li
)})let intervalId
= null;btn
.addEventListener('click', () => {let yi
= [...name_box
.children
]; console
.log(yi
)if (intervalId
) {btn
.innerHTML
= `點擊隨機抽取 ${size} 位`clearInterval(intervalId
)intervalId
= null}else {btn
.innerHTML
= '確定選擇'intervalId
= setInterval(() => {yi
.forEach(li
=> {li
.classList
.remove('active')})const selectStudentIndexs
= studentIndexs
.sort(() => 0.5 - Math
.random()).slice(0, size
)selectStudentIndexs
.forEach(v
=> {name_box
.children
[v
].classList
.add('active')})}, 20);}})sizeInput
.addEventListener('blur', (e
) => {size
= parseInt(e
.target
.value
)btn
.innerHTML
= `點擊隨機抽取 ${size} 位`})})();</script
>
</body
></html
>
總結(jié)
以上是生活随笔為你收集整理的原生实现随机点名的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
