原生js实现随机点名
2021/12/25 6:07:43
本文主要是介绍原生js实现随机点名,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
原生js实现随机点名
代码如下
点击查看代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>随机点名</title> <style> *{ margin: 0; padding: 0; } html,body,#position{ width: 100%; height: 100%; } .boxx{ width: 80%; height: 95%; border: solid 1px black; margin: auto; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; font-size: 24px; } .boxxx{ width: 100%; height: 80%; } .boxs{ margin: auto; } #box{ width: 100%; height: 100%; display: flex; justify-content: space-evenly; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid black; } #box li{ list-style-type: none; display: block; padding: 5px 0 5px 0; width: 18%; border: 1px black solid; text-align: center; } .dsds{ width: 100%; height: 20%; background-color: blanchedalmond; /* text-align: center; */ display: flex; justify-content: space-around; align-items: center; } .dsds1,.dsds2,.dsds3{ width: 32%; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center; } .dsds1{ background-color: aqua; font-size: 50px; } .dsds2{ background-color: lawngreen; } .dsds2 button{ display: inline-block; width: 50%; height: 100%; font-size: 40px; font-weight: 600; letter-spacing :20px; } .dsds3{ background-color: hotpink; font-weight: 600; font-size: 50px; } </style> </head> <body> <div id="position" > <div class="boxx"> <div class="boxxx"> <ul id="box"> </ul> </div> <div class="dsds"> <div class="dsds1"> 恭喜 </div> <div class="dsds2"> <button class="button1" onclick="nidd()">开始</button> <button class="button2">暂停</button> </div> <div class="dsds3"> 发财 </div> </div> </div> </div> </body> <script> // var x =document.getElementById('position') //获取容器 var y=document.getElementById('box') //获取按钮 var starts=document.querySelector('.button1') var stops=document.querySelector('.button2') //获取选中文字填充区域 var showw1=document.querySelector('.dsds1') var showw3=document.querySelector('.dsds3') //要显示的姓名数组 var ddd=["你好","ddd","ggg","hhh","jjj","ggg","hhh","jjj","ggg","hhh","jjj","ggg","hhh","jjj","jjj","ggg","hhh","jjj","ggg","hhh","jjj"] //加载需显示的姓名 y.innerHTML=ddd.map((item,index)=>`<li id="box${index}">${item}</li>`).join('') //防止按钮重复点击 var switchss = true //随机选择姓名函数 function nidd(){ let i = ddd.length let dddsss= Math.floor(Math.random()*i) for(let ds=0;ds<i;ds++){ y.children[ds].setAttribute("style",`background-color:none`) } y.children[dddsss].setAttribute("style",`background-color:${getRandomColors("rgba",.4)}`) showw1.innerHTML=y.children[dddsss].innerHTML showw3.innerHTML=y.children[dddsss].innerHTML } //开始按钮 starts.addEventListener('click',()=>{ if(switchss){ this.int=setInterval('nidd()',100) console.log(this.int) switchss=false } }) //结束按钮 stops.addEventListener('click',()=>{ clearInterval(this.int) switchss=true }) //工具函数 //获取随机颜色, //一个参数为 3(3位十六进制颜色表示)或者6(6位十六进制颜色表示)或者rgba的颜色表示 //第二个参数为使用rgba颜色的透明度 function getRandomColors(val, transparency = 1) { let result = []; let digits let rgbas switch (val) { case 3: digits = val break; case 6: digits = val break; case 'rgba': rgbas = 1 break; default: alert('第一个参数为3/4,第二个参数为透明度') return } if (rgbas === 1) { for (let i = 0; i < 3; i++) { result.push(Math.floor(Math.random() * 255));//获取0-255之间的随机数 } let colorss = `rgba(${result.toString()},${transparency})` return colorss } else { for (let i = 0; i < digits; i++) { result.push(Math.floor(Math.random() * 16).toString(16).toUpperCase());//获取0-15并通过toString转16进制通过toUpperCase()字母转大写 } let colorss = '#' + result.join('') return colorss } } </script> </html>
这篇关于原生js实现随机点名的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践