vue简单实现九宫格抽奖

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>九宫格抽奖</title><style>* {padding: 0;margin: 0;}.box {position: relative;width: 400px;height: 400px;margin: auto;}.draw {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background: chocolate;text-align: center;line-height: 100px;color: #fff;cursor: pointer;}.row {position: absolute;width: 100px;height: 100px;line-height: 100px;background: cadetblue;color: #fff;text-align: center;}.box .row:nth-child(1) {top: 0;left: 0;}.box .row:nth-child(2) {top: 0;left: 50%;transform: translate(-50%, 0);}.box .row:nth-child(3) {top: 0;right: 0;}.box .row:nth-child(4) {top: 50%;right: 0;transform: translate(0, -50%);}.box .row:nth-child(5) {bottom: 0;right: 0;}.box .row:nth-child(6) {bottom: 0;right: 50%;transform: translate(50%, 0);}.box .row:nth-child(7) {bottom: 0;left: 0;}.box .row:nth-child(8) {top: 50%;left: 0;transform: translate(0, -50%);}.active {background: lightseagreen !important;}</style>
</head><body><div id="Vue"><div class="box"><div class="row" :class="select == index ? 'active' : ''" v-for="(item,index) in list" :key="index">{{item.name}}</div><div class="draw" @click="startDraw()">抽奖</div></div></div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script>new Vue({el: "#Vue",data: {list: [{name: "手机"},{name: "平板"},{name: "电磁炉"},{name: "洗衣机"},{name: "衣柜"},{name: "电脑"},{name: "电视"},{name: "冰箱"},],flag: true,//是否开始抽奖select: 0,//页面对应抽奖下标timer: "",count: 0},methods: {startDraw() {if (this.flag == true) {this.flag = falsethis.timer = setInterval(() => {this.spinPrize()}, 100)}},spinPrize() {var spin = 3 //旋转圈数var win = 5 //中奖产品 0-7this.select += 1if (this.select > 7 && this.count != spin) {this.select = 0this.count += 1}if (this.select == win && this.count == spin) {clearInterval(this.timer)this.flag = truethis.count = 0console.log("中奖产品为:" + this.list[this.select].name)}},}})
</script></html>

vue简单实现九宫格抽奖相关推荐

基于vue+html5实现九宫格抽奖转盘原理及源码
先说下动态跑马灯九宫格抽奖转盘应用场景,基于很多活动页面都常用,积分抽奖兑换等.九宫格html+css排版样式这里就不多说了. 实现原理: 跑马灯:用2个Png背景图片做css3帧切换动画. 中奖数组 ...
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
九宫格抽奖,包括幸运大转盘,已经在不管是电商还是日常网页中已经算是比较常见的页面效果了(此处点名批评pdd),那么如何用Vue来实现九宫格以及后续的十二宫格,十六宫格等多宫格抽奖组件呢? 先上效果图: ...
使用vue实现九宫格抽奖功能
使用vue2和vue3分别实现九宫格抽奖功能关于九宫格抽奖的功能,想必大家都见过.外圈为奖品,中间是一个抽奖的按钮,接下来就讲解怎么实现九宫格的抽奖功能. 本demo使用技术:vue2/vue3,作 ...
【vue uniapp 小程序抽奖转盘老虎机和九宫格】
vue uniapp 小程序抽奖转盘老虎机和九宫格 1.npm 下载插件 # npm 安装 npm install @lucky-canvas/vue@latest# 或者 yarn 安装 yarn ...
html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
Vue3实现九宫格抽奖效果
前言好久没有写文章了,上一次发文还是年终总结,眨眼间又是一年,每每想多总结却是坚持不来,难顶. 这次分享一个九宫格抽奖小游戏,缘起是最近公司内部做积分抽奖需求,抽出其中抽奖动效做一个总结,从零实现 ...
python 还原九宫格图片_用Python做一个好玩的朋友圈九宫格抽奖
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 设计思路以朋友圈中看到的1号图做参考,我们需要准备 300*900 的白色底图,搞笑表情图,广告语,中间一个醒目的数字编号,外加下方的嘲讽&qu ...
animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
用Python做一个好玩的朋友圈九宫格抽奖
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 哈哈,笑出猪叫!这个玩法利用了朋友圈发长图会显示中间局部的设定,搞笑之余也为朋友圈广告营销贡献了新思路. 制作图的过程也不复杂,长图对应部分设计好 ...

vue简单实现九宫格抽奖

vue简单实现九宫格抽奖相关推荐

最新文章

热门文章