JS + CSS 做一个简易九宫格抽奖

目录

1.CSS样式

 2.JS动作

---

 大概做出来就是这个样子，alert的弹窗样式我也没改，就默认的。

1.CSS样式

样式大概分以下方面；

1. 创建外框及内框样式；
2. 8个奖品小方格和中间按钮小方格；
3. 奖品小方格内部图片；
4. 选中奖品时的小方格样式；

先做两个方框，叠放在一起，里面的颜色比外面深一些

    /*外部大框样式*/
    .outer-square {
        background-color: cadetblue;
        width: 600px;
        height: 600px;
        border-radius: 5%;
        position:absolute;
    }
    /*内部大框样式*/
    .inner-square {
        background-color: darkcyan;
        width: 560px;
        height: 560px;
        border-radius: 5%;
        margin-left: 20px;
        margin-top: 20px;
    }

大概这样：

然后添加小方格，样式如下：

    /*小方格样式*/
    .small-square {
        background-color: white;
        width: 145px;
        height: 145px;
        border-radius: 10%;
        margin-left: 22px;
        margin-top: 22px;
        float:left;
        border: 5px solid transparent;
    }

这里添加透明边框的原因是，之后抽奖选中时，若直接给小方格添加红色边框，小方块的位置会发生变化，又需要再次修改css宽度和高度等布局，于是投机取巧，提前加上透明的边框，调整好样式，后面选中方框时，直接修改颜色也不会使布局发生变化。

完成后大概这样：