抽奖小案例

最新推荐文章于 2024-09-10 10:21:38 发布

m0_45931484

最新推荐文章于 2024-09-10 10:21:38 发布

阅读量59

点赞数

文章标签： java

本文链接：https://blog.csdn.net/m0_45931484/article/details/123655066

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background-color: cornsilk;
        }
        #dv{
            width: 800px;
            margin: 20px auto;
            border: 4px solid darkviolet;
            text-align: center;
        }
        ul li{
            vertical-align: top;
            display: inline-block;
            width: 100px;
            height: 50px;
            border-radius: 35%;
            border: 3px dashed palevioletred;
            text-align: center;
            line-height: 50px;
            margin: 5px 5px;
        }
        li.change{
            background-color: greenyellow;
            font-size: 15px;
            color: black;
            font-weight: bolder;
        }
        #btu,#btu1{
            width: 100px;
            height: 50px;
            font-size: 15px;
            border-radius: 10px;
            cursor: pointer;
            margin: 10px 50px 0 50px;
            color: brown;
            background-color: pink;
        }
        .ch{
            position: relative;
            width: 150px;
            height: 150px;
            border-radius: 10px;
            margin: 12px auto;
            border: 2px solid yellow;
        }
        .luc{
            font-size: 20px;
            font-weight: bold;
            margin: 10px auto;
            text-align: center;
            color: green;
        }
        .name{
            position: absolute;
            font-size: 35px;
            left: 40px;
            top: 50px;
        }
    </style>

</head>
<body>
<div id="dv">
    <input type="button" value="开始点名" id="btu">
    <input type="button" value="停止" id="btu1">
    <div class="luc">你将会是下一个幸运儿吗？请看大屏幕</div>
    <div class="ch">
        <span class="name"></span>
    </div>
</div>
</body>
</html>
<script>
    //获取dv元素
    var dv=document.getElementById("dv");
    //获取点击开始按钮
    var btu=document.getElementById("btu");
    //获取点击结束按钮
    var btu1=document.getElementById("btu1");
    //创建ul列表
    var ula=document.createElement("ul");
    //将ul追加到父级元素div中
    dv.appendChild(ula);
    //获取js中插入的Li标签；
    var oLi=document.getElementsByTagName("li");
    //插入数组
    var arr=["袁辰午","高鹏程","李嘉伟","张子昂","陈文成","刘健壮","张熙崑","陈彦龙","陶冉冉","王惠煜","师君龙","范菲菲","罗洪鹏","尤志","王文斌","尹天奇","许浩楠","韩杰","李浩","臧敦立","冯凯伦"]
    //动态创建li，追加到ul
    for(var i=0;i<arr.length;i++){
        //创建li标签
        var liObj=document.createElement("li");
        liObj.innerText=arr[i];
        ula.appendChild(liObj);
    }
    //声明timer
    var timer = null;
    //点击开始进行随机选择
    btu.οnclick=function () {
        //每次运行之前清除timer;
        clearInterval(timer);
        //设置定时器
        timer=setInterval(function () {
            //根据数组长度范围生成随机数
            var i = Math.floor(Math.random()*arr.length);
            //通过for循环清空所有class类样式
            for(var j=0;j<oLi.length;j++){
                oLi[j].removeAttribute("class");
            }
            //为随机选择的li重新设置类样式
            oLi[i].className="change";
        },50);
    };
    btu1.οnclick=function () {
        //清除timer;
        clearInterval(timer);
        //根据类样式找到选中的元素
        var choise = document.getElementsByClassName("change")[0];
        //获取选中元素的内容
        var name=choise.innerText;
        //获取选中展示位置
        var nameSpan = document.getElementsByClassName('name')[0];
        //位置添加内容
        nameSpan.innerText=name+"";
    }
</script>