随机点名demo+文字特效

    

        
随机点名
        
    
    
    点一下不要钱

  *{
            margin: 0;
            padding: 0;
            background-color: #e7fff4;
        }
        div{
            position: absolute;
            top:40%;
            left:50%;
            transform:translate(-50%,-50%);
            text-align: center;
        }
        span,h2{
            text-shadow: 0 0 10px white;
            background: linear-gradient(135deg,yellowgreen,yellow,pink);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;  
            /*名称 时间 匀速 无限
            animation: ff 0.9s linear infinite;
            /* font-size: 100px; */
            font-size: 50px;
        } 
        @keyframes ff {
            to{filter:hue-rotate(360deg);}
        }
        h2{
            font-size: 72px;
        }
        span{
            font-size: 46px;
        }
        button{
            position: absolute;
            top: 55%;
            left: 50%;
            transform:translate(-50%,-50%);
            width: 150px;
            height: 45px;
            box-shadow:0 0 10px #fff;
            /* 取消轮廓线 */
            outline:none;
            background-color: white;
        }

 //获取标签
        let nametxt=document.getElementById(`name`);
        let button=document.getElementById(`button-text`);
        //创建一个数组名字
        let uname=[`小美`,`小帅`,`廖哥`,`李工`,`吴学长`,`讲师谭`,`谭讲师`,`大美`,`大帅`];
        //创建一个函数生成随机数字
        function getrandom(min,max){
            return Math.floor(Math.random()*(max-min-1)+min);
        }
        function clock(){
            //通过获取一个随机的数组下标来实现随机获取一个名字，并将这个名字赋值给变量random
            let random=uname[getrandom(服务器托管网0,uname.length-1)];
            //将random塞到span里
            nametxt.innerHTML=random;
        };
        // clock();
        //现在让没点击前名字一直处于刷新状态(30毫秒)
        let time=self.setInterval("clock()",30);
        //将开始与停止按钮绑定到按钮上，并通过按钮控制
        let flag=false;
        button.onclick=function(){
            // 当flag标志为fal服务器托管网se时，点击按钮让刷新停止
            if(flag==false){
                time=window.clearInterval(time);
                button.innerHTML=`恭喜选中`;
                //标志变更
                flag=true
            }else{
                //当flag为true时，开始刷新，文字变更
                time = self.setInterval("clock()",30);
                button.innerHTML=`点一下不要钱`;
                flag=false;
            }
        }