微信小程序的抽奖页面

做一个1-10的微信小程序抽奖界面，随机到6和8会显示中奖信息!
点开始按钮开始执行，点结束按钮结束抽奖并且判断是否中奖
wxml代码：

<view>{{title}}</view>
<view bindtap="kaishi">开始</view>
<view bindtap="jieshu">结束</view>

JS代码：

var diaoyong=-1;        /*声明全局变量diaoyong=-1*/
var panduan;            /*声明全局变量panduan*/
Page({/*** 页面的初始数据*/data: {title:0,},kaishi: function (){if (diaoyong == -1){console.log("抽奖开始")var that = this;   /*setInterval(  ){    }内的this.setData({  })的作用域不包括page({  })里的this.setData({  })要在setInterval(  ){    }之前将this赋值给一个新的方法———var that=this;*/diaoyong = setInterval(function ()  /*diaoyong变量一定要在全局声明，否则定时器可能会出现无法停止的情况*/{var suiji = Math.ceil(Math.random() * 10);that.setData({title: suiji,})panduan=suiji;console.log(panduan);}, 500)}},jieshu : function () {console.log("抽奖结束");clearInterval(diaoyong);diaoyong = -1;if (panduan == 8 ||panduan == 6) {console.log("中奖了");}else{console.log("没中奖");}},

给全局变量赋值-1是为后面的if语句打基础，判断diaoyong是否=-1，为真运行定时器，为假不进行操作，这样就不会有点几下开始按钮，定时器就开几个的情况。

关闭定时器后面加了个diaoyong=-1，是为了点击结束按钮后，还可以继续开始。
效果图： 中奖信息将在控制台显示

微信小程序的抽奖页面相关推荐

微信小程序-转盘抽奖
微信小程序-转盘抽奖代码: lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; positi ...
微信小程序——翻牌抽奖功能
目录前言一.效果展示二.主要代码 1.wxml主要代码: 2.wxss主要代码 3.js主要代码 4.app.js主要代码三.实现思路及注意点 1.洗牌功能实现方法 2.翻牌功能实现方式 3. ...
微信小程序圆盘抽奖（扇形画圆）
微信小程序圆盘抽奖(扇形画圆) 前言提示:这里可以添加本文要记录的大概内容: 例如:领导安排做一个微信小程序的转盘抽奖,要求可以复用,动态的修改抽奖的板块个数,由于是第一次做微信小程序踩了很多的坑, ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
Java Web项目，Android和微信小程序的初始页面配置
Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
手机按三角返回页面上一页_小猿圈微信小程序跳转页面都有哪些？
随着科技的进步互联网的发展,微信小程序逐渐成为了很多推广渠道的入口,但是因为很多做前端的小伙伴们不知道怎么去实现跳转页面,弄得不知所措,今天小猿圈前端讲师就给你讲解几种微信小程序跳转页面方法. 微信小 ...
微信小程序跳转页面问题
微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...
微信小程序获取当前页面url
微信小程序获取当前页面url 微信小程序获取当前页面的URL地址

微信小程序的抽奖页面

微信小程序的抽奖页面

微信小程序的抽奖页面相关推荐

最新文章

热门文章