公司年会抽奖（javaScript+html）

最新推荐文章于 2025-07-11 15:36:48 发布

码农脱贫

最新推荐文章于 2025-07-11 15:36:48 发布

阅读量4.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签：公司年会抽奖

本文链接：https://blog.youkuaiyun.com/qq_35499112/article/details/86436915

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的抽奖程序设计，使用HTML、CSS和JavaScript实现。程序通过随机数生成器从预设的参与者名单中抽取中奖者，并实时显示在网页上。用户可以通过点击按钮开始或结束抽奖过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nihao</title>
    <style>
        input{
            background-color: greenyellow;
            border: 1px solid green;
            width:100px;
            height:50px;
            font-size: 20px;
            font-family: "微软雅黑";
            font-weight: bold;
        }
    </style>
</head>
<body>
<center>
    <h3 color="red">恭喜您：</h3>
    <div style="font-size: 20px;text-align: center;border: 2px solid green;width:200px;height: 50px;line-height: 50px;">
        <span id="sp"></span>
    </div>
    <hr />
    <input type="button" value="开始抽奖"  id="start"/>
</center>
<script>
    /*定义数组存放参与抽的人员名单*/
    var arr=["小花","小明","小红","小丽","小强","小白","小黑","小刚"];
    function fun() {
    /*随机获取数组人名*/
    var index=Math.floor(Math.random() * arr.length);
    var name=document.getElementById("sp");
        name.innerHTML=arr[index]+"&nbsp;&nbsp;&nbsp;中奖了";
    }
    //点击开始按钮，定时器循环执行
    var start=document.getElementById("start");
    var time_ID=null;
    start.onclick=function () {
        if(time_ID==null){
            time_ID=setInterval(fun,50);
            start.value="结束抽奖";
        }else {
            clearInterval(time_ID);
            start.value="开始抽奖";
            time_ID=null;
        }


    };

</script>
</body>

</html>