开始界面显示如下图所示此时光标自动出现在第一个输入框中并在屏幕下方弹出数字键盘在三个输入框中输入数据数据满足三角形的构成规则任意两条边的长度之和大于第三条边的长度点击 计算 按钮下面显示三角形的面积index.wxss文件page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } input, button { font-size: 40rpx; margin: 40rpx 0; } input { border-bottom: 2rpx solid blue; } .result { font-size: 40rpx; color: blue; }app.wxss文件/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }index.js文件Page({ data: { visible: false, sideA: , sideB: , sideC: , area: 0 }, formSubmit(e) { console.log(e); let visible this.data.visible; let sideANum parseFloat(e.detail.value.a); let sideBNum parseFloat(e.detail.value.b); let sideCNum parseFloat(e.detail.value.c); let area 0; if ((sideANum sideBNum sideCNum) || (sideANum sideCNum sideBNum) || (sideBNum sideCNum sideANum)) { this.clear(); wx.showToast({ title: 问题三角形的两条边之和小于等于第三条边, icon: none, duration: 2000 }) return; } else { const s (sideANum sideBNum sideCNum) / 2; area Math.sqrt(s * (s - sideANum) * (s - sideBNum) * (s - sideCNum)); } if (area 0) { visible true; } else { visible false; } this.setData({ area, visible }) }, clear() { this.setData({ sideA: , sideB: , sideC: , visible: false }) }, resetBtn() { this.clear() } })navigation-bar titleform组件 back{{false}} colorblack background#fff/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle三角形面积计算器/view form bindsubmitformSubmit input typedigit placeholder请输入三角形第一条边长 namea focustrue value{{sideA}}/ input typedigit placeholder请输入三角形第二条边长 nameb value{{sideB}}/ input typedigit placeholder请输入三角形第三条边长 namec value{{sideC}}/ button typeprimary form-typesubmit计算/button button bindtapresetBtn重置/button /form view wx:if{{visible}} classresult三角形的面积为{{area}}/view /view /scroll-view本文实现了一个三角形面积计算器小程序。用户在三个输入框中输入边长系统验证是否满足三角形构成条件任意两边之和大于第三边若不满足则提示错误否则使用海伦公式计算并显示面积。界面采用flex布局支持数字键盘输入具备提交与重置功能交互友好逻辑清晰。
企业数字化 ERP 产品动态
相关推荐
线激光3D相机点云处理三道断层:协议、坐标与质量 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 6:55:54
数字化双中台方案如何落地:从架构设计到踩坑复盘 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 6:55:48
PoE温湿度变送器在机房动环监控中的实战:从接线到ModbusRTU采集 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 6:55:41
MOS管开关损耗总对不上?非本征电容在作祟 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:46:47
从 GraphRAG 到 ColQwen:大模型文本分析有哪些新玩法? 温馨提示:若页面不能正常显示数学公式和代码,请阅读原文获得更好的阅读体验。 作者: 艾米丽 (连享会) 邮箱: lianxhcn163.com Title: 从 GraphRAG 到 ColQwen:大模型文本分析有哪些新玩法?Keywords: 语义标… · 2026/9/24 7:46:41
充电桩通信模块三重设计:PWM/PLC/CAN协同与鲁棒性实战 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:46:41
GD32450Z-EVAL 开发板 RT-Thread BSP 快速上手与进阶配置指南 操作系统嵌入式物联网嵌入式OSRTOS 【免费下载链接】rt-thread RT-Thread is an open source IoT Real-Time Operating System (RTOS). https://rt-thread.github.io/rt-thread/ 项目地址: https://gitcode.com/gh_mirrors/rt/rt-thread 点击查看 免费下载 本指南以… · 2026/9/24 7:46:41
野火霸天虎 STM32F407初步认识 刚开始学习单片机时,我使用的是野火霸天虎 STM32F407 开发板,做的第一个实验是通过寄存器操作点亮 LED。
代码并不长,但真正动手后,我发现自己对很多概念还没有理解清楚:芯片和 CPU 是什么关系?往一个地址… · 2026/9/24 7:46:35
ESP32脑电波控制空调:从BCI信号采集到红外发射的完整实战 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 7:46:35
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程 简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13
1D-CNN时间序列建模实战:从Conv1d原理到工业落地 简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26
柔软的L:汉语语流中被忽视的舌肌张力控制 1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44