微信小程序实现两个数之间的运算

2024-01-15 17:16| 来源: 网络整理| 查看: 265

微信小程序实现两个数之间的运算

要求：创建一个微信小程序实现两个数字的比较运算、加法运算、减法运算、乘法运算或者除法运算中的一种，效果如图（这里我写的包含了所有运算，可根据需要自行选择）：在这里插入图片描述 app.js

// app.js App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) }, globalData: { userInfo: null } })

app.json

{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ccc", "navigationBarTitleText": "两个数的运算", "navigationBarTextStyle": "white" }, "style": "v2", "sitemapLocation": "sitemap.json" }

app.wxss可以删除公共样式，里面什么都不写即可，其余代码都在index里面就行。 index.wxml

我的名字叫XXX 请输入第一个数值: 请输入第二个数值: 比 + - * / {{fun}}结果:{{res}}

index.wxss

.name { margin: 50rpx; text-align: center; color: darkcyan; } .one, .two, .res { margin: 50rpx; } input { width: 600rpx; margin-top: 10rpx; border: 2px solid #ccc; } .fun { display: flex; justify-content: space-evenly; } .fun button { display: flex; align-items: center; justify-content: center; color: black; background-color: aqua; }

index.js

// index.js Page({ data: { fun: "比较", num: null, num1: null, res: 0 }, handleInput1(e) { this.setData({ num: parseFloat(e.detail.value) }) // console.log("触发") // console.log(e.detail.value) //获取输入的值 }, handleInput2(e) { this.setData({ num1: parseFloat(e.detail.value) }) //console.log("触发") // console.log(e.detail.value) //获取输入的值 }, handletap1(e) { if (this.data.num && this.data.num1) { var str = "两数相等" if (this.data.num > this.data.num1) { str = "第一个数大" } else if (this.data.num fun: "比较", res: str }) } else { wx.showToast({ title: '请给两个数输入值', icon: 'none', duration: 2000 //持续的时间 }) } }, handletap2(e) { if (this.data.num && this.data.num1) { this.setData({ fun: "加法", res: this.data.num + this.data.num1 }) } else { wx.showToast({ title: '请给两个数输入值', icon: 'none', duration: 2000 //持续的时间 }) } }, handletap3(e) { if (this.data.num && this.data.num1) { this.setData({ fun: "减法", res: this.data.num - this.data.num1 }) } else { wx.showToast({ title: '请给两个数输入值', icon: 'none', duration: 2000 //持续的时间 }) } }, handletap4(e) { if (this.data.num && this.data.num1) { this.setData({ fun: "乘法", res: this.data.num * this.data.num1 }) } else { wx.showToast({ title: '请给两个数输入值', icon: 'none', duration: 2000 //持续的时间 }) } }, handletap5(e) { if (this.data.num && this.data.num1) { this.setData({ fun: "除法", res: this.data.num / this.data.num1 }) } else { wx.showToast({ title: '请给两个数输入值', icon: 'none', duration: 2000 //持续的时间 }) } }, })

效果如下：在这里插入图片描述

【本文地址】

公司简介

联系我们