目的:从数据库中随机抽取题目,答对积分+1,答错退出。
实现步骤:
1.答题
2.随机
3.积分
4.退出
实现1,调用form组件,调用form组件详见《详解微信小程序文本框(label/input)、按钮(button)用法,以登陆界面为例》http://blog.csdn.net/sinat_41310868/article/details/78926227。答题和登陆差不多,答题是输入正确答案才能跳转,登陆是输入正确的用户名和密码才能跳转。
实现2,主要是获取随机数,用随机数来从题库中抽取数组。
暂时先实现这两个。
效果如图:
初始界面如1,答案输入错了,点击确定,确定底下的文本显示“错了!”,点击跳转,跳转下面随机生成一个0-9之间的整数,如2所示,答案输入正确了,点击确定,文本显示就是“对了!”。
先从简单入手,别的不管了。
index.wxml代码:
<form bindsubmit="formBindsubmit">
<view style="display:flex;">
<label>请问你的名字?</label>
</view>
<view style="display:flex;">
<label>答案:</label>
<input name="psw" placeholder="请输入答案!"/>
</view>
<view style="display:flex;margin-top:30px;">
<button style="width:30%;" formType="submit" >确定</button>
</view>
</form>
<view>{{tip}}</view>
<view style="display:flex;margin-top:30px;">
<button style="width:30%;" bindtap="goto_logs" >跳转</button>
</view>
<view>{{suiji}}</view>
第一组是问题实现,form组件里面有view、input、button,返回的值是tip。
第二组是随机数实现,button,返回的值是suiji。
index.js代码:
Page({
data: {
// text:"这是一个页面"
tip: '对错',
suiji:'00'
},
formBindsubmit: function (e) {
if (e.detail.value.psw == "无面人") {
this.setData({
tip: '对了!'
})
}
else {
this.setData({
tip: '错了!'
})
}
},
goto_logs: function () {
var random = Math.floor(Math.random() * 10);
this.setData({
suiji: random
})
},
})
formBindsubmit函数是问题的,正确答案是“无面人”,输入“无面人”就提示“对了!”否则“错了!”。
goto_logs函数就是随机了,主要是这行var random = Math.floor(Math.random() * 10);在[0,10)之间取值,包括0,但不包括10。
取随机数更多的介绍见这篇:http://www.jb51.net/article/44870.htm
先这些。在努力。