Javascript

原生js实现随机点名

本文主要是介绍原生js实现随机点名，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

image

原生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实现随机点名的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航