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

1.CSS样式

2.JS动作

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

1.CSS样式

样式大概分以下方面；

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

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

    /*外部大框样式*/.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宽度和高度等布局，于是投机取巧，提前加上透明的边框，调整好样式，后面选中方框时，直接修改颜色也不会使布局发生变化。

完成后大概这样：

为了简单，我把中间的小方格改成一个button，这样后面直接点击添加事件就可以了。

    /*中间按钮样式*/.center-button {background-color: yellowgreen;width: 152px;height: 152px;border-radius: 10%;margin-left: 22px;margin-top: 22px;float:left;font-size: 30px;font-family: "monospace";}

大概长成这样：

接下来，在每个小方格里面添加图片：

    /*小图片样式*/img {width: 80px;height: 100px;margin-left: 30px;margin-top: 30px;}

如果图片加载不出来，建议将图片放在源文件同目录下。

全部放进去，就感觉有模有样了。

若是选中某个小方块，把它的边框改成玫红色的，样式如下：

 border: 5px solid mediumvioletred;

改样式后，大概样子如下所示：

这个玫红色还是有点好看哈。

2.JS动作

思路如下：

点击开始抽奖后，开始做一个循环的动画，类似于抽奖时候的滚动；
随机生成 1-8 的数字 a；
将所有的奖品放入一个数组 prize[] 中；
循环结束后，根据随机生成的数字a，显示弹框 prize[a-1] 的奖品；

划重点：在使用setTimeout时，千万注意使用方法，很容易出现同时选中的情况，这是因为setTimeout函数定时时间造成的，感兴趣的可以参考博主的文章：JS For循环内部延时执行（For循环延时）

直接上源码吧。

JS部分：


// 抽奖函数
function get_prize() {// 奖品数组var prize=['一本书','一个杯子','40元代金券','一个鼠标','3个月VIP','一件T恤','一个背包','谢谢参与'];// 随机生成数字1-8var a=Math.floor((Math.random()*8)+1);// 点击开始后开做一个循环动画for(var i=1;i<=8;i++) {// 可千万要注意setTimeout的用法，因为它是异步的，直接使用会出现错误// 在html页面上，我的小方格顺序是按照从上到下从左到右，依次是1-8（中间是按钮，故一共8个）// 每次设置当前小方格的样式时，将前一个小方格样式清除，注意的是，// 当设置第一个小方格时，清除的是第8个的小方格样式，需要单独设置条件(function (k) {setTimeout(()=> {if(k==1) {prize_style(k);style_init(8);} else {prize_style(k);style_init(k-1);}},100*i)})(i)}//然后随机生成奖品(function () {// 定时时间之所以这样设置，是因为整个js中的setTimeout都是同时开始计时的，// 算上8个格子循环的时间，再多定时100ms，定时结束将循环的第8个格子样式清除，// 同时再给抽中的小格子添加样式，setTimeout(()=>{style_init(8);prize_style(a);},100*8+100);// 弹框信息定时时间类似setTimeout(()=>{alert(prize[a-1]);},100*8+200);})()
}// 选中奖品样式设置---即设置小方格边框为玫红色
function prize_style(prize_num) {var square=document.getElementById('square'+prize_num);square.style.border='5px solid mediumvioletred';
}//将奖品样式清除---将小方格边框颜色调回为透明
function style_init(prize_num) {var square=document.getElementById('square'+prize_num);square.style.border='5px solid transparent';
}

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>rewards</title>
</head>
<style>/*外部大框样式*/.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;}/*中间按钮样式*/.center-button {background-color: yellowgreen;width: 152px;height: 152px;border-radius: 10%;margin-left: 22px;margin-top: 22px;float:left;font-size: 30px;font-family: "monospace";}/*小图片样式*/img {width: 80px;height: 100px;margin-left: 30px;margin-top: 30px;}
</style>
<body><div class="outer-square"><div class="inner-square"><div class="small-square" id="square1"><img src="./1.png"></div><div class="small-square" id="square2"><img src="./2.png"></div><div class="small-square" id="square3"><img src="./3.png"></div><div class="small-square" id="square4"><img src="./4.png"></div><button class="center-button" onclick="get_prize()">点击抽奖</button><div class="small-square" id="square5"><img src="./5.png"></div><div class="small-square" id="square6"><img src="./6.png"></div><div class="small-square" id="square7"><img src="./7.png"></div><div class="small-square" id="square8"><img src="./8.png"></div></div></div>
</body>
<script src="20210916.js"></script>
</html>

同时源码+图片也打包，见地址：JS+CSS做一个简易九宫格抽奖-Javascript文档类资源-CSDN下载

JS + CSS 做一个简易九宫格抽奖相关推荐

html 游戏键盘,用html+js+css做一个模拟键盘
这个键盘用html+js+css搞出来的,做这个没什么目的,纯粹觉得好玩. 现在暂时的功能有: 1.可按键跟踪 2.可大小写切换 3.可鼠标点击输入 4.可移动键盘位置可拓展功能有: 1.可改变键盘 ...
html做键盘,用html+js+css做一个模拟键盘
1 //移动键盘 2 functiondragMing(idORclass1, idORclass2) {3 var obj = this; //这里的this是指dragMing对象么 4 this ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
用JS做一个简易的时间显示动态效果
用JS做一个简易的时间显示动态效果运行效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能 1使用webpack下载vue模板 vue init webpack aaa(aaa为项目名称) cd到aaa ...
用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
怎么用线程刷新 tkinter 进度条_tkinter做一个简易提词板（2）
书接上文花果山美男子:tkinter做一个简易提词板zhuanlan.zhihu.com 上回说到,文字的动态效果还可以用after方法和StringVar来实现,今天我们就用它们来重新制作提词板 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...

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

1.CSS样式

2.JS动作

JS + CSS 做一个简易九宫格抽奖相关推荐

最新文章

热门文章