在微信小程序开发中如何比较两个数的大小

曼亿点

已于 2024-03-27 21:16:29 修改

阅读量729

点赞数 1

文章标签：微信小程序 CSDN开发云开发语言数据库

于 2024-03-15 10:17:30 首次发布

本文链接：https://blog.csdn.net/2301_77628600/article/details/136731814

版权

在这里插入图片描述

在微信小程序开发中如何比较两个数的大小

步骤一： index.wxml的代码

<view>
<text>请输入第一个数：</text>
<input class="a1" name="num1" type="number" bindchange="num1change" />
</view>
<view>
<text>请输入第二个数：</text>
<input class="a1" name="num2" type="number" bindchange="num2change" />
</view>
<button bindtap="compare" type="primary" class="a2">确定</button>
<view>
<text class="a3">比较结果:{{result}}</text>
</view>

步骤二：index.js的代码

Page({
  data: {
   num1:0,
   num2:0,
  result:" "
    },
    num1change:function(e){
      this.num1=Number(e.detail.value)
      console.log("第一个数为：" +this.num1)
    },
    num2change:function(e){
     this.num2=Number(e.detail.value)
     console.log("第二个数为：" +this.num2)
   },
   compare:function(){
  var str="两数相等"
  if(this.num1>this.num2){
    str="第一个数大"
  }else if(this.num1<this.num2){
    str="第二个数大"
  }
  this.setData({
    result:str
  })
}  
})

步骤三：index.wxss的代码

.a1{ 
  height: 50px;
  border-bottom: 2px solid;
}  
.a2{
  margin: 20px;
}
.a3{
  width: 100px;
  height: 100px;
  text-align:center;
  align-items: center;
  background-color:rgb(0, 255, 64);
}

样式可以通过修改index.wxss的 a1,a2,a3进行修改成自己喜欢的风格