微信小程序——比较数字大小案例

简介: 微信小程序——比较数字大小案例

案例链接


https://download.csdn.net/download/weixin_45525272/16242285


页面效果



讲解



代码


页面样式


/* pages/index/index.wxss */
view {
  margin: 50rpx;
}
input {
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ccc;
}
button {
  margin: 50rpx;
}
button {
  color: #fff;
  background: #FF6000;
  letter-spacing: 12rpx;
}


页面设计


<!--pages/index/index.wxml-->
<view>
  <text>请输入第1个数字:</text>
  <input type="number" bindchange="num1change" />
</view>
<view>
  <text>请输入第2个数字:</text>
  <input type="number" bindchange="num2change" />
</view>
<button bindtap="compare">比较</button>
<view>
  <text>比较结果:{{result}}</text>
</view>


页面逻辑


// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    result: ''
  },
  num1: 0, // 保存第1个数字
  num2: 0, // 保存第2个数字
  num1change: function(e) {
    this.num1 = Number(e.detail.value)
    console.log('第1个数字为' + this.num1)
  },
  num2change: function(e) {
    this.num2 = Number(e.detail.value)
    console.log('第2个数字为' + this.num2)
  },
  compare: function(e) {
    var str = '两数相等'
    if (this.num1 > this.num2) {
      str = '第1个数大'
    } else if (this.num1 < this.num2) {
      str = '第2个数大'
    }
    this.setData({
      result: str
    })
    // this.data.result = str // 这种方式无法改变页面中的{{result}}的值
  }
})


相关文章
|
1月前
|
存储 小程序 算法
东郊到家预约系统开发|源码案例|小程序
区块链的最重要特性是去中心化,它不依赖于任何中心机构或第三方信任
|
1月前
|
小程序 JavaScript 前端开发
【微信小程序】-- 案例 - 本地生活(二十)
【微信小程序】-- 案例 - 本地生活(二十)
|
1月前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
|
1月前
|
小程序
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
【微信小程序】-- 自定义组件 - 数据监听器 - 案例 (三十五)
|
1月前
|
JSON 小程序 API
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
【微信小程序】-- 案例 - 本地生活(列表页面)(三十)
|
1月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
1月前
|
新零售 人工智能 供应链
多人拼团奖励系统开发小程序软件案例
新零售以互联网技术为基础,通过利用数字化信息处理、人工智能等先进技术
|
1月前
|
JSON 小程序 JavaScript
微信小程序快速入门02(含案例)
微信小程序快速入门02(含案例)
|
12天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
12天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。

热门文章

最新文章