JavaScript小案例-点击抽奖

最新推荐文章于 2024-03-04 15:42:17 发布

啊啊啊啊啊威

最新推荐文章于 2024-03-04 15:42:17 发布

阅读量933

点赞数 5

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/zhangawei123/article/details/130552386

版权

本文章讲解一个JavaScript的小案例，九宫格抽奖，点击按钮开始抽奖，点击结束按钮确定抽到的奖项。当然也可以用于日常班级点名等用途。

为了方便大家使用，把全部代码放在最后。

效果如下

代码部分

dom结构

写的比较简单，就是一个大的div，里面套九个div，下面写两个按钮。大家可以根据具体需求扩充。

<h1>抽奖</h1>
    <div id="big">
        <div class="box">一等奖</div>
        <div class="box">二等奖</div>
        <div class="box">三等奖</div>
        <div class="box">参与奖</div>
        <div class="box">特等奖</div>
        <div class="box">参与奖</div>
        <div class="box">四等奖</div>
        <div class="box">谢谢惠顾</div>
        <div class="box">五等奖</div>
    </div>
<button id="kai">开始</button>
<button id="jie">结束</button>

样式

样式部分也很简单，简单的写了一下大小和边框。大家可以根据自己需求写样式。

 * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #big {
            width: 300px;
            height: 300px;
            box-shadow: 0px 0px 1px 1px gray;
            display: flex;
            flex-wrap: wrap;
        }

        .box {
            width: 10