JS九宫格抽奖

原创

于 2024-04-18 07:42:37 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

制作九宫格抽奖是一个很有意思的过程，废话不多说，直接上代码，看看你能抽到什么。

html部分

<body>
		<div id="all">
			<div class="one">M4A1-雷神</div>
			<div class="two" style="font-size: 12px;">SCAR Light-白虎</div>
			<div class="three">M200-幻神</div>
			<div class="four" style="font-size: 14px;">大礼包（一折）</div>
			<div class="five">98K-星神</div>
			<div class="six">谢谢惠顾</div>
			<div class="seven">王者-葵</div>
			<div class="eight">再来一次</div>
			<button id="button">开始抽奖</button>
		</div>
</body>

css部分

<style>
			#all {
				width: 360px;
				height: 360px;
				margin: auto;
				position: relative;
				text-align: center;
				line-height: 100px;
			}

			.one {
				background-color: aquamarine;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 10px;
				top: 10px;
			}

			.two