随机点名

效果

代码

html 复制代码

    <div>
        <h2>随机点名</h2>
        <span id="name"></span>
    </div>
    
    <button id="button-text">点一下不要钱</button>

js 复制代码

 //获取标签
        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标志为false时，点击按钮让刷新停止
            if(flag==false){
                time=window.clearInterval(time);
                button.innerHTML=`恭喜选中`;
                //标志变更
                flag=true
            }else{
                //当flag为true时，开始刷新，文字变更
                time = self.setInterval("clock()",30);
                button.innerHTML=`点一下不要钱`;
                flag=false;
            }
        }

tip：细节

1.在文档中获取一个元素来自id用document.getElementByld(``)

2.随机数的生成（推荐用封装函数方式）

Math.floor 向下取整 / Math.random生成随机数 3.setInterval（注册一个间隔定时器，具体内容还是你回调函数决定）

回调函数＋多长时间执行一次，不停息

css部分

css 复制代码

  *{
            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;
        }

1.transform:translate(-50%,-50%)的含义是CSS中的一种居中方式，它可以将元素在其父元素中水平和垂直居中。其中-50%表示元素自身宽度或高度的一半，这样就可以将元素的中心点与父元素的中心点重合，从而实现居中效果。

正确的完整的居中方式将left和top属性都设置为50%，然后再使用translate(-50%,-50%)将元素的中心点与父元素的中心点重合。

2.text-shadow: 0 0 10px white; 是为文本添加白色阴影效果，阴影的模糊半径为10像素，水平和垂直偏移量均为0。这个属性可以通过改变阴影的颜色、模糊半径、水平和垂直偏移量来实现不同的阴影效果。

CSS 实现字体发光效果 text-shadow_text-shadow是字体发亮-CSDN博客

不加就是这样：

3.background: linear-gradient(135deg,yellowgreen,yellow,pink); 在这里，135deg表示线性渐变的方向为从左上角到右下角，即从左上角开始，向右下角延伸。

在CSS中，角度可以用度数（deg）、弧度（rad）或梯度（grad）来表示。

CSS 的 linear-gradient() 线性渐变函数（带例子）_css linear-gradient-CSDN博客

4.-webkit-background-clip: text; -webkit-text-fill-color: transparent; 搭配使用

5.@keyframes animation

CSS3 -- @keyframes动画_css keyframes_締刿的博客-CSDN博客

hue-rotate() (en-US) 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。

随机点名demo+文字特效

随机点名

效果

代码

tip：细节

css部分