- 请完成数值比较任务;
二、实验步骤与结果(给出对应的代码或运行结果截图)
index.js
Page({
/**
* 页面的初始数据
*/
data: {
num1:0,
num2:0,
num3:""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
input_num1(e){
this.setData({
num1:e.detail.value
})
},
input_num2(e){
this.setData({
num2:e.detail.value
})
},
btn_tap(){
if(this.data.num1===this.data.num2){
this.setData({
num3:"两个数一样大"
})
}
if(this.data.num1<this.data.num2){
this.setData({
num3:"第一个数小于第二个数"
})
}
if(this.data.num1>this.data.num2){
this.setData({
num3:"第一个数大于第二个数"
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxml
<!--demo-1/demo-1.wxml-->
<form bindsubmit="">
<view>
<text>输入第一个数:</text>
<input type="text" bindinput="input_num1"/>
</view>
<view>
<text>输入第一个数:</text>
<input type="text" bindinput="input_num2"/>
</view>
<button form-type="submit" bind:tap="btn_tap">确定</button>
</form>
<view>
<text>比较结果:{{num3}}</text>
</view>
index.wxss
/* demo-1/demo-1.wxss */
view{
margin: 50rpx; /* 设置所有view组件的外边距为50rpx */
}
input{
width: 600rpx;/* 设置输入框的宽度为600rpx */
margin: 20rpx;/* 设置输入框顶部的外边距为20rpx */
border-bottom: 2rpx solid #ccc;/* 设置输入框底部边框为2rpx宽的灰色(#ccc)实线 */
}
button{
margin: 50rpx;/* 设置按钮的外边距为50rpx */
padding: 20rpx;/* 设置按钮内文字的字母间距为20rpx */
}
button {
color: #fff; /* 设置按钮文字颜色为白色(#fff) */
background-color: #360; /* 设置按钮背景颜色为深绿色 (#360)*/
}
三、问题总结与体会
、
思路为
- WXML
构建WXML框架
首先,将页面分为两大部分:表单输入部分和结果显示部分。在表单输入部分,用户可以输入两个数字;在结果显示部分,将展示这两个数字的比较结果。
使用<form>组件构建输入界面;使用<view>组件构建显示结果部分
在<form>内部,使用两个<view>组件分别包裹输入元素,使用<button>组件包裹提交按钮。
<form> -> <view>*2 & <button>
第一个<view>中包含一个<text>组件和一个<input>组件,<text>用于显示"请输入第1个数字:",<input>组件用于绑定用户输入的第一个数字,通过bindinput="input_num1"实现输入监听。
<view> -> <text> & <input bindinput="input_num1" />
第二个<view>中同样包含一个<text>组件和一个<input>组件,<text>用于显示"请输入第2个数字:",<input>组件用于绑定用户输入的第二个数字,通过bindinput="input_num2"实现输入监听。
<view> -> <text> & <input bindinput="input_num2" />
在<form>组件的末尾,使用<button>组件添加一个提交按钮。该按钮通过form-type="submit"定义为提交类型,通过bind:tap="tap_btn"实现点击事件的监听,按钮文本为"确定"。
使用<view>组件显示比较结果
在<view>组件中,使用<text>组件显示比较结果。其中,{{num3}}是用来动态显示比较结果的数据绑定表达式,<text>的内容为"比较结果:",后接动态数据。
2.WXSS
view{
/* 设置所有view组件的外边距为50rpx */
}
input{
/* 设置输入框的宽度为600rpx */
/* 设置输入框顶部的外边距为20rpx */
/* 设置输入框底部边框为2rpx宽的灰色(#ccc)实线 */
}
button{
/* 设置按钮的外边距为50rpx */
/* 设置按钮内文字的字母间距为20rpx */
}
button {
/* 设置按钮文字颜色为白色(#fff) */
/* 设置按钮背景颜色为深绿色 (#360)*/
}
3.JS
首先需要在data中定义绑定的数据:
data: {
num1:0,
num2:0,
num3:""
},
然后对绑定的事件进行描绘
// 定义处理第一个输入框数据的函数
事件绑定名称(e){
this.setData({
// 将输入的值设置为num1的值(根据注释补全代码)
})
},
// 定义处理第二个输入框数据的函数
事件绑定名称(e){
this.setData({
// 将输入的值设置为num2的值(根据注释补全代码)
})
},
// 定义点击按钮时的处理函数
事件绑定名称{
// 判断两个数是否相等
if(this.data.num1==this.data.num2){
this.setData({
// 如果相等,则设置num3为"两数相等"(根据注释补全代码)
})
}
// 判断第一个数是否小于第二个数
if (this.data.num1<this.data.num2) {
this.setData({
// 如果第一个数小于第二个数,设置num3为字符串"第二个数大"(根据注释补全代码)
})
}
// 判断第一个数是否大于第二个数
if (this.data.num1>this.data.num2) {
this.setData({
// 如果第一个数大于第二个数,设置num3为字符串"第一个数大"(根据注释补全代码)
})
}
},