微信小程序---抽奖

开发项目提出抽奖功能，因自己没有写过，所以问了度娘，这个直接复制粘贴，然后就能实现抽奖功能，其他的样式，图片可根据自己项目需求进行添加

wxml:

<view class="index"><view class="xian"></view><view class="xian"></view><view class="xian"></view><view class="detail">一等奖</view><view class="detail">二等奖</view><view class="detail">三等奖</view><view class="detail">四等奖</view><view class="detail">五等奖</view><view class="detail">六等奖</view><span bindtap="zhuanin" style="transform:rotate({{trasn}}deg);"></span>
</view>

wxss:

.index{width: 300px;margin: 50rpx calc((100% - 300px) / 2);border:1px solid #ffcccc;border-radius: 50%;height: 300px;position: relative;overflow: hidden;font-size: 26rpx;
}
.xian{width:300px;height:1px;background:#d6d6d6;position:absolute;top:150px;left:0;
}
.index>.xian:nth-child(2){transform:rotateZ(60deg)
}
.index>.xian:nth-child(3){transform:rotateZ(120deg)
}
.detail{position: absolute;
}
.index>.detail:nth-child(4){top:25px;left:132px;
}
.index>.detail:nth-child(5){top:90px;left:225px;
}
.index>.detail:nth-child(6){top:190px;left:225px;
}
.index>.detail:nth-child(7){top:250px;left:132px;
}
.index>.detail:nth-child(8){top:190px;left:40px;
}
.index>.detail:nth-child(9){top:90px;left:40px;
}
.index>span{width: 30px;height: 30px;background-color: #ffcccc;border-radius: 50%;position: absolute;left: 135px;top:135px;
}
.index>span::after{content: ' ';width:0;height:0;border-right:6px solid transparent;border-left:6px solid transparent;border-bottom:26px solid #ffcccc;z-index: 10;position: absolute;left: 8.5px;top: -24px;
}

js:

Page({data: {random:'',trasn:0,},zhuanin:function(e){let that = thislet num = 0that.setData({random:Math.floor(Math.random() * 360),trasn:0,})let a = setInterval(function () {that.setData({trasn:that.data.trasn+5})if(360 <= that.data.trasn){that.data.trasn = 0num = num + 1}if(num == 3){that.currinl()clearInterval(a)}},5)},currinl:function(e){let that = thislet name = ''if(that.data.random == 30 || that.data.random == 90 || that.data.random == 150 || that.data.random == 210 || that.data.random == 330){that.setData({random:that.data.random + 1})}if(that.data.random < 30 || 330 < that.data.random){name = '一等奖'}else if(that.data.random > 30 && that.data.random < 90){name = '二等奖'}else if(that.data.random > 90 && that.data.random < 150){name = '三等奖'}else if(that.data.random > 150 && that.data.random < 210){name = '四等奖'}else if(that.data.random > 210 && that.data.random < 270){name = "五等奖"}else{name = "六等奖"}let b = setInterval(function () {that.setData({trasn:that.data.trasn+2})if(that.data.random <= that.data.trasn){wx.showToast({title: name,icon: 'none',duration: 2000})clearInterval(b)}},10)},
})

微信开发者工具直接cv大法就可以实现

微信小程序---抽奖相关推荐

微信小程序抽奖简单功能实现
抽奖是一种常见的互动活动,在微信小程序中也有很多不同的实现方式.以下是一份简单的微信小程序抽奖源码,供参考:在 wxml 文件中添加抽奖的页面布局: <view class="cont ...
PHP微信小程序/抽奖小程序开源源码
简介: PHP微信小程序/抽奖小程序开源源码网盘下载地址: http://kekewl.net/n066JfGL5sU0 图片:
微信小程序抽奖插件分享
微信小程序开发抽奖功能分享小程序抽奖插件github地址该网站有这么多示例可以选择下面演示编写如何在微信小程序中使用 1.先找到小程序项目的根目录,看是否有package.json文件,如果没有 ...
php翻牌抽奖,微信小程序抽奖-翻牌
背景 ps:我自址哈这工边识框处己按后大都加控不架的本次开发基于w比抖朋要插支一圈不者地器享说几epy框架由用能境战求道,重件开又是正易里是了些之框于最近接到一个需求--抽奖活动求圈分件圈浏第用代是 ...
用python写一个抽奖小程序_微信小程序抽奖助手一键参与抽奖
写在前头的话最近"沉迷"于微信一款小程序,就是抽奖助手.反正这个抽奖几乎不用什么成本, 就是一个个抽奖活动点进去点击参与抽奖比较麻烦.要是如果有个程序一键解决这些步骤,那就是零成 ...
微信小程序抽奖-翻牌
背景 ps:本次开发基于wepy框架由于最近接到一个需求--抽奖活动: 翻牌打乱活动抽奖活动,大概需求是这样的,九宫格卡牌,先正面展示所有奖品,然后卡牌翻转,打乱排序,点击卡牌,然后抽奖. 这个需求 ...
做一个好看的微信小程序抽奖页面
在微信小程序中做一个好看的抽奖界面先上图片吧: 基本上格式就是八个抽奖按钮,中间一个开始按钮,后面在加一张好看的背景图就完事啦接下来就是代码啦: js中: var app = getApp() P ...
请问微信小程序抽奖怎么弄啊
我是一个对程序一片空白的新手,自己想弄一个微信抽奖的小程序,请问需要服务器吗?如何才能上传到微信里面去啊.
内定抽奖小程序_微信小程序抽奖可以内定吗
java小程序图片查看器代码,实现放大.缩小.旋转功能我只实现了放大缩小功能,旋转还有点问题package com.lzw;import java.awt.BorderLayout; import ...

微信小程序---抽奖

微信小程序---抽奖相关推荐

最新文章

热门文章