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

文章目录

案例链接
页面效果
讲解
代码
- 页面样式
- 页面设计
- 页面逻辑

案例链接

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}}的值}
})

微信小程序——比较数字大小案例相关推荐

2.1微信小程序--比较数字大小
[案例1]比较数字大小目录: index.wxml index.wxss index.js index.wxml  <vi ...
《微信小程序-比较数字大小》
1.创建一个新的项目,点击菜单栏的项目->创建所有项目->点击"+"号->APPID如果已经注册并使用过直接点击测试号即可->选择不适用云服务->开发 ...
微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
微信小程序云开发完整案例
微信小程序云开发完整案例本项目获高校微信小程序开发大赛华中赛区三等奖 [注]: 本人对该程序功能.UI等方面比较满意,分析总结了比赛成绩不算太好的原因,下一篇博客具体分享,给想参加该比赛的同学一些参 ...
微信小程序的简单开发案例(记事本)
微信小程序案例之简单记事本实现我最近在学习微信小程序,主要熟悉了微信开发者工具的简单使用以及小程序的开发流程.微信小程序的学习要求不高,只要有一些web前端等知识基础即可. 1,小程序简介微信小程 ...
微软收购暴雪计划遭拒/ Edge被曝泄露浏览记录/ 微信小程序可用数字人民币...今日更多新鲜事在此...
日报君发自凹非寺量子位 | 公众号 QbitAI 大家好,今天是4月27日星期四,是这个月倒数第二天上班了~ 在假期可以翘首以待的日子里,还是来和日报君看看今天的科技圈资讯吧~ 微信支持数字人民 ...
学习（微信小程序开发入门及案例详解 --李骏，边思编著）
第一章初识小程序 1.小程序不仅在商业上具备很大潜力,同时在技术上解决了一套代码多端运行和动态发版的两大痛点,用户在微信中扫一扫或搜一下即可打开具备原生体验的应用,这给开发者带来了很大的想象空间 2 ...
微信小程序篇】四. 案例：根据单号查询快递编号
快递查询(2020-1-7亲测) 项目准备创建项目demo4-expressQuery(因为练习取过这个名所以案例里面是demo-expressQuery ) 操作步骤同demo3 不过second ...
微信小程序:调取数字键盘，没有小数点的解决办法
通常来说:input框有type这个属性,我们通常使用text.number .checkbox等这些常用的type值来限制输入框的输入. 在微信小程序中,当我们的输入框的type值为number的时 ...

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

文章目录

案例链接

页面效果

讲解

代码

页面样式

页面设计

页面逻辑

微信小程序——比较数字大小案例相关推荐

最新文章

热门文章