JavaScript随机抽奖

最新推荐文章于 2022-09-06 13:29:03 发布

原创最新推荐文章于 2022-09-06 13:29:03 发布 · 666 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#随机 #js #数组 #random #javascript

js源代码专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的随机抽奖程序，使用HTML、CSS和JavaScript实现。页面包括一个显示抽奖结果的区域及开始和结束按钮，通过定时器实现随机切换效果。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>随机抽奖</title>
    <style>
        .box{width:600px;height:500px;margin:0 auto;border:dashed #ccc 2px;}
        button{width:120px;height:40px;border-radius: 10px;margin:30px auto;font-size: 26px;display: block;}
        span{width:300px;height:300px;background:#ffff99;display: block;margin:0 auto;border-radius:100%;text-align: center;font-size:30px;line-height:300px;}
    </style>
    <script>
        var a1=["林惊羽","曾书书","碧瑶","张小凡","无崖子","鬼王"];

        var times;
        function star(){

            var index=parseInt(Math.random()*a1.length);
            var x=a1[index];
            var s=document.getElementById("show");
            s.innerHTML=x;


        }
        function start(){
            times=setInterval(star,40);
        }
        function end(){
            clearInterval(times);
        }
    </script>

</head>
<body>
<div class="box">
    <span id="show">等待抽奖</span>
    <button onclick="start()">开始抽奖</button>
    <button onclick="end()">结束抽奖</button>

</div>

</body>
</html>