标签：原生 flex 点名 100% js width let jjj var
原生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>
标签：原生,flex,点名,100%,js,width,let,jjj,var 来源： https://www.cnblogs.com/-poxiao/p/15729708.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。