Angular实现九宫格抽奖
step1: D:\vue\untitled2906\src\app\app.component.css
.sudoku_row{
display: flex;
align-items: center;
width:100%;
flex-wrap: wrap;
}
.sudoku_item{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:32%;
padding-top: 10px;
padding-bottom: 10px;
}
.sudoku_item img{
margin-bottom: 3px;
display: block;
width: 100px;
height: 100px;
}
.sudoku_item span{
margin-top: 10px;
padding-top: 10px;
display: block;
width: 100px;
text-align: center;
height: 30px;
}
step2: D:\vue\untitled2906\src\app\app.component.html
<html>
<head>
</head>
<body>
<div [ngStyle]="{'background-color':'green'}">test</div>
<div [ngStyle]="{'background-color':username === 'zxc' ? 'blue' : 'red' }">test_two</div>
<br/>
<br/>
<ul class="sudoku_row">
<li *ngFor="let item of messages,let i = index" class="sudoku_item">
<img style="width: 120px;height: 120px" src="{{item.img_src}}">
<span [ngClass]="{'text-danger':i==select}"
[ngStyle]="{'background-color':i === select ? 'blue' : 'red' }">{{item.name}}</span>
</li>
</ul>
<br/>
<br/>
<div>
<button (click)="startDraw()">开始抽奖</button>
</div>
</body>
</html>
step3: D:\vue\untitled2906\src\app\app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'untitled2906';
username = "zxc";
messages = [{
id: 0,
name: '文具',
img_src: 'http://www.gov.cn/xinwen/2022-03/23/5680897/images/48df7b94e70d490ebf72952375e91ea5.jpg'
}, {
id: 1,
name: '铅笔',
img_src: 'http://www.gov.cn/xinwen/2022-03/23/5680897/images/31e347d1993b427590831853751e234a.jpg'
}, {
id: 2,
name: '鼠标',
img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/331282d29e494c75b5fa4e5bbe9d6ea5.jpg'
}, {
id: 3,
name: '键盘',
img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/acd7819431f843968579482ebb88a383.jpg'
}, {
id: 4,
name: '眼镜',
img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/189767452a08421d834d8f004e202f95.jpg'
}, {
id: 5,
name: '画笔',
img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/6fb50bd56cc647baa0d3c2bfff1b83be.jpg'
}, {
id: 6,
name: '橡皮',
img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/56801059b331462b8849e00f8c1f000c.jpg'
}
];
flag = true;//是否开始抽奖
select = 0;//页面对应抽奖下标
timer: any;
count = 0;
startDraw() {
if (this.flag == true) {
this.flag = false
this.timer = setInterval(() => {
this.spinPrize()
}, 100)
}
}
spinPrize() {
let spin = 3 //旋转圈数
let win = 5 //中奖产品 0-7
this.select += 1
if (this.select > 7 && this.count != spin) {
this.select = 0
this.count += 1
}
if (this.select == win && this.count == spin) {
clearInterval(this.timer)
this.flag = true
this.count = 0
console.log("中奖产品为:" + this.messages[this.select].name)
}
}
}
run,success!
end
