当前位置: 首页 > article >正文

让 Deepseek 写一个尺码计算器

 

下面是一个简单的尺码计算器微信小程序的代码实现,包含页面布局、逻辑处理和样式。

1. 项目结构 

size-calculator/
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
├── app.js
├── app.json
├── app.wxss

2. 代码实现

app.json (全局配置)

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "尺码计算器","navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

pages/index/index.wxml (页面结构)

<view class="container"><view class="title">尺码计算器</view><view class="input-group"><text>身高(cm):</text><input type="number" placeholder="请输入身高" bindinput="inputHeight" value="{{height}}"/></view><view class="input-group"><text>体重(kg):</text><input type="number" placeholder="请输入体重" bindinput="inputWeight" value="{{weight}}"/></view><button bindtap="calculateSize" class="calculate-btn">计算尺码</button><view class="result" wx:if="{{size}}"><text>推荐尺码: </text><text class="size">{{size}}</text></view><view class="size-table"><text class="table-title">尺码对照表</text><view class="table-row header"><text>尺码</text><text>身高(cm)</text><text>体重(kg)</text></view><view class="table-row"><text>S</text><text>155-165</text><text>45-55</text></view><view class="table-row"><text>M</text><text>165-175</text><text>55-65</text></view><view class="table-row"><text>L</text><text>175-185</text><text>65-75</text></view><view class="table-row"><text>XL</text><text>185-195</text><text>75-85</text></view><view class="table-row"><text>XXL</text><text>195-205</text><text>85-95</text></view></view>
</view>

pages/index/index.wxss (页面样式)

.container {padding: 20px;display: flex;flex-direction: column;align-items: center;
}.title {font-size: 24px;font-weight: bold;margin-bottom: 30px;
}.input-group {display: flex;align-items: center;margin-bottom: 15px;width: 80%;
}.input-group text {width: 80px;
}.input-group input {border: 1px solid #ccc;padding: 8px;border-radius: 5px;flex: 1;
}.calculate-btn {background-color: #07C160;color: white;width: 80%;margin-top: 20px;margin-bottom: 30px;
}.result {font-size: 18px;margin-bottom: 30px;display: flex;align-items: center;
}.size {font-size: 24px;font-weight: bold;color: #07C160;margin-left: 10px;
}.size-table {width: 90%;border: 1px solid #eee;border-radius: 5px;padding: 10px;margin-top: 20px;
}.table-title {font-weight: bold;margin-bottom: 10px;display: block;
}.table-row {display: flex;padding: 8px 0;border-bottom: 1px solid #f5f5f5;
}.table-row text {flex: 1;text-align: center;
}.header {font-weight: bold;background-color: #f5f5f5;
}

pages/index/index.js (页面逻辑)

Page({data: {height: '',weight: '',size: ''},// 输入身高inputHeight: function(e) {this.setData({height: e.detail.value});},// 输入体重inputWeight: function(e) {this.setData({weight: e.detail.value});},// 计算尺码calculateSize: function() {const height = parseFloat(this.data.height);const weight = parseFloat(this.data.weight);if (!height || !weight) {wx.showToast({title: '请输入完整信息',icon: 'none'});return;}let size = '';if (height < 155 || weight < 45) {size = 'XS';} else if (height <= 165 && weight <= 55) {size = 'S';} else if (height <= 175 && weight <= 65) {size = 'M';} else if (height <= 185 && weight <= 75) {size = 'L';} else if (height <= 195 && weight <= 85) {size = 'XL';} else if (height <= 205 && weight <= 95) {size = 'XXL';} else {size = 'XXXL';}this.setData({size: size});}
});

3. 功能说明

  1. 输入功能

    • 用户可以输入身高(厘米)和体重(公斤)

  2. 计算功能

    • 点击"计算尺码"按钮后,根据身高和体重计算推荐尺码

    • 基本的尺码计算逻辑:

      • XS: 身高<155cm 或 体重<45kg

      • S: 155-165cm & 45-55kg

      • M: 165-175cm & 55-65kg

      • L: 175-185cm & 65-75kg

      • XL: 185-195cm & 75-85kg

      • XXL: 195-205cm & 85-95kg

      • XXXL: 超过以上范围

  3. 显示结果

    • 显示计算出的推荐尺码

    • 提供尺码对照表供用户参考

4. 扩展建议

  1. 可以根据不同性别设置不同的尺码标准

  2. 可以添加不同服装类型(上衣、裤子等)的尺码计算

  3. 可以增加国际尺码(如US、UK、EU等)的转换

  4. 可以保存用户的历史记录

  5. 可以根据不同品牌调整尺码标准(不同品牌的尺码可能有差异)

这个简单的尺码计算器可以作为基础版本,您可以根据实际需求进一步扩展和完善功能。

相关文章:

让 Deepseek 写一个尺码计算器

下面是一个简单的尺码计算器微信小程序的代码实现&#xff0c;包含页面布局、逻辑处理和样式。 1. 项目结构 size-calculator/ ├── pages/ │ ├── index/ │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── inde…...

代码随想录算法训练营第60期第五十三天打卡

大家好&#xff0c;我们今天来到了最后一章图论&#xff0c;其实图论比较难&#xff0c;涉及的算法也比较多&#xff0c;今天比较重要的就是深度优先搜索与广度优先搜索&#xff0c;后面的迪杰斯特拉算法等算法在我们求最短路都会涉及到&#xff0c;还有最近公共祖先&#xff0…...

Nacos实战——动态 IP 黑名单过滤

1、需求分析 一些恶意用户&#xff08;‏可能是黑客、爬虫、DDoS ؜攻击者&#xff09;可能频繁请求服务器资​源&#xff0c;导致资源占用过高。针对这种问题&#xff0c;可以通过IP‏ 封禁&#xff0c;可以有效拉؜黑攻击者&#xff0c;防止资源​被滥用&#xff0c;保障合法…...

实验设计与分析(第6版,Montgomery)第5章析因设计引导5.7节思考题5.14 R语言解题

本文是实验设计与分析&#xff08;第6版&#xff0c;Montgomery著&#xff0c;傅珏生译) 第5章析因设计引导5.7节思考题5.14 R语言解题。主要涉及方差分析&#xff0c;正态假设检验&#xff0c;残差分析&#xff0c;交互作用图。 dataframe<-data.frame( strengthc(9.60,9.…...

在Ubuntu20.04上安装ROS Noetic

本章教程,主要记录在Ubuntu20.04上安装ROS Noetic。 一、添加软件源 sudo sh -c . /etc/lsb-release && echo "deb http://mirrors.tuna.tsinghua.edu.cn/ros/ubuntu/ `lsb_release -cs` main" > /etc/apt/sources.list.d/ros-latest.list二、设置秘钥 …...

python里面导入yfinance的时候报错

我的代码&#xff1a; import yfinance as yf import os proxy http://127.0.0.1:7890 # 代理设置&#xff0c;此处修改 os.environ[HTTP_PROXY] proxy os.environ[HTTPS_PROXY] proxydata yf.download("AAPL",start"2010-1-1",end"2021-8-1&quo…...

winform LiveCharts2的使用--图表的使用

介绍 对于图标&#xff0c;需要使用到livechart2中的CartesianChart 控件&#xff0c;是一个“即用型”控件&#xff0c;用于使用笛卡尔坐标系创建绘图。需要将Series属性分配一组ICartesianSeries。 例如下面代码&#xff0c;创建一个最简单的图表&#xff1a; cartesianCha…...

【计算机网络】IPv6和NAT网络地址转换

IPv6 IPv6协议使用由单/双冒号分隔一组数字和字母&#xff0c;例如2001:0db8:85a3:0000:0000:8a2e:0370:7334&#xff0c;分成8段。IPv6 使用 128 位互联网地址&#xff0c;有 2 128 2^{128} 2128个IP地址无状态地址自动配置&#xff0c;主机可以通过接口标识和网络前缀生成全…...

flutter简单自定义跟随手指滑动的横向指示器

ScrollController _scrollController ScrollController();double _scrollIndicatorWidth 60.w;//指示器的长度double _maxScrollPaddingValue 30.w;//指示器中蓝条可移动的最大距离double _scrollPaddingValue 0.0;//指示器中蓝条左边距(蓝条移动距离)overridevoid initSta…...

项目日记 -Qt音乐播放器 -搜索模块

最近期末&#xff0c;时间较少&#xff0c;详细内容之后再补充。 搜索 用得最多的一个 格式&#xff1a;https://music.163.com/api/search/get/web?s搜索词&type1&limit66&offset0 s 后跟搜索词 type 后跟类型&#xff0c;1表歌手 limit 限制每次最多返回多少…...

JavaScript 性能优化实战研讨

核心优化方向 执行效率&#xff1a;减少主线程阻塞内存管理&#xff1a;避免泄漏和过度消耗加载性能&#xff1a;加快解析与执行速度渲染优化&#xff1a;减少布局重排与重绘 &#x1f525; 关键优化策略与代码示例 1️⃣ 减少重排(Reflow)与重绘(Repaint) // 避免逐行修改样…...

有机黑鸡蛋与普通鸡蛋:差异剖析与选购指南

在我们的日常饮食结构里&#xff0c;鸡蛋始终占据着不可或缺的位置&#xff0c;是人们获取营养的重要来源。如今&#xff0c;市场上鸡蛋种类丰富&#xff0c;除了常见的普通鸡蛋&#xff0c;有机黑鸡蛋也逐渐崭露头角&#xff0c;其价格通常略高于普通鸡蛋。这两者究竟存在哪些…...

CTFHub-RCE 命令注入-无过滤

观察源代码 判断是Windows还是Linux 源代码中有 ping -c 4 说明是Linux 查看有哪些文件 127.0.0.1|ls 发现除了index.php文件外&#xff0c;还存在一个可疑的文件 打开flag文件 我们尝试打开这个文件 127.0.0.1|cat 19492844826916.php 可是发现 文本内容显示不出来&…...

spring IOC控制反转

控制反转&#xff0c;将对象的创建进行反转&#xff0c;常规情况下&#xff0c;对象都是开发者手动创建的&#xff0c;使用 loC 开发者不再需要创建对象&#xff0c;而是由IOC容器根据需求自动创建项目所需要的对象 不用IOC&#xff0c;所有对象IOC开发者自己创建使用IOC&…...

hot100 -- 1.哈希系列

1.两数之和 题目&#xff1a; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串 的长度。 题解&#xff1a; 方法1&#xff1a;暴力求解 def get_two_sum(nums, target):for i in range(len(nums)):for j in range(i1, len(nums)):if nums[i] nums[j…...

leetcode hot100刷题日记——31.二叉树的直径

二叉树直径详解 题目描述对直径的理解解答&#xff1a;dfs小TIPS 题目描述 对直径的理解 实际上&#xff0c;二叉树的任意一条路径均可以被看作由某个节点为起点&#xff0c;从其左儿子和右儿子向下遍历的路径拼接得到。 那我们找二叉树的直径&#xff08;最大路径&#xff09…...

行为型:解释器模式

目录 1、核心思想 2、实现方式 2.1 模式结构 2.2 实现案例 3、优缺点分析 4、适用场景 5、注意事项 1、核心思想 目的&#xff1a;针对某种语言并基于其语法特征创建一系列的表达式类&#xff08;包括终极表达式与非终极表达式&#xff09;​&#xff0c;利用树结构模式…...

逻辑回归详解:从原理到实践

在机器学习的广阔领域中&#xff0c;逻辑回归&#xff08;Logistic Regression&#xff09;虽名为 “回归”&#xff0c;实则是一种用于解决二分类&#xff08;0 或 1&#xff09;问题的有监督学习算法。它凭借简单易懂的原理、高效的计算性能以及出色的解释性&#xff0c;在数…...

FastAPI集成APsecheduler的BackgroundScheduler+mongodb(精简)

项目架构&#xff1a; FastAPI(folder) >app(folder) >core(folder) >models(folder) >routers(folder) >utils(folder) main.py(file) 1 utils文件夹下新建schedulers.py from apscheduler.schedulers.background import BackgroundScheduler from apschedu…...

本地部署FreeGPT+内网穿透公网远程访问,搞定ChatGPT外网访问难题

‌FreeGPT‌是一个基于GPT 3.5/4的ChatGPT聊天网页用户界面&#xff0c;提供了一个开放的聊天界面&#xff0c;开箱即用‌。ChatGPT是非常热门的&#xff0c;但访问体验一直不太理想。为了解决这一问题&#xff0c;出现了各类方法和工具&#xff0c;其中FreeGPT是一款非常实用的…...

linux 1.0.3

挂载 这个虚拟机啥时候都能挂起 会有一个这个东东 选择连接虚拟机&#xff0c;然后就连到linux了 这有两个键&#xff0c;一个是和主机连接一个是和虚拟机连接 先把U盘拔掉 原本是没有这个盘的&#xff0c;但是插上去之后&#xff0c;电脑创建了一个虚拟的盘 也就是图中的F…...

基于RK3588的智慧农场系统开发|RS485总线|华为云IOT|node-red|MQTT

一、硬件连接流程 本次采用的是 总线型拓扑&#xff1a;所有设备并联到两根 RS485 总线上&#xff08;A 和 B-&#xff09; 二、通信协议配置 1. 主从通信模式 RS485 是半双工&#xff1a;同一时间只能有一个设备发送数据主从架构&#xff1a;通常一个主设备&#xff08;…...

解锁程序人生学习成长密码,从目标设定开始

解锁程序人生学习成长密码,从目标设定开始 关键词:程序员成长、目标设定、学习路径、技能提升、职业规划、刻意练习、反馈机制 摘要:本文深入探讨程序员如何通过科学的目标设定方法实现职业成长。文章从目标设定的重要性出发,详细介绍了SMART原则、OKR方法等技术,并结合程…...

简单cnn

数据增强 在图像数据预处理环节&#xff0c;为提升数据多样性&#xff0c;可采用数据增强&#xff08;数据增广&#xff09;策略。该策略通常不改变单次训练的样本总数&#xff0c;而是通过对现有图像进行多样化变换&#xff0c;使每次训练输入的样本呈现更丰富的形态差异&…...

C#集合循环删除某些行

你想要在遍历集合&#xff08;例如List&#xff09;的同时删除某些元素时&#xff0c;直接在循环中删除元素可能会导致问题&#xff0c;因为这可能会改变集合的大小和导致索引问题&#xff1b; 可以用for循环的倒序来删除&#xff1b; 如果要删除满足特定条件的所有元素&…...

相机定屏问题分析四:【cameraserver 最大request buffer超标】后置视频模式预览定屏闪退至桌面

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:相机定屏问题分析三:【配流ConfigStream失败】外屏打开相机视频照片人像来回切换后,相机页面卡死,点击没反应9055522 这一篇我们开始讲: 相机定屏问题分析四:【cameraserver 最大request buffer超…...

【Linux 学习计划】-- 进程地址空间

目录 进程地址的引入 进程地址空间基础原理 区域划分的本质 如何理解进程地址空间 越界访问的本质 进一步理解写时拷贝 重谈 fork 返回值 结语 进程地址的引入 我们先来看一段代码&#xff1a; 首先我们可以看到&#xff0c;父进程和子进程是可以同时可以看到一个变量…...

告别重复 - Ansible 配置管理入门与核心价值

告别重复 - Ansible 配置管理入门与核心价值 还记得我们在 SRE 基础系列中反复强调的“减少琐事 (Toil)”和“拥抱自动化”吗?想象一下这些场景: 你需要部署一个新的 Web 服务集群,每台服务器都需要安装 Nginx、配置防火墙规则、同步 Web 内容、启动服务……手动操作不仅耗时…...

3D Gaussian splatting 04: 代码阅读-提取相机位姿和稀疏点云

目录 3D Gaussian splatting 01: 环境搭建3D Gaussian splatting 02: 快速评估3D Gaussian splatting 03: 用户数据训练和结果查看3D Gaussian splatting 04: 代码阅读-提取相机位姿和稀疏点云3D Gaussian splatting 05: 代码阅读-训练整体流程3D Gaussian splatting 06: 代码…...

CTFHub-RCE 命令注入-过滤空格

观察源代码 代码里面可以发现过滤了空格 判断是Windows还是Linux 源代码中有 ping -c 4 说明是Linux 查看有哪些文件 127.0.0.1|ls 打开flag文件 我们尝试将空格转义打开这个文件 利用 ${IFS} 127.0.0.1|cat${IFS}flag_195671031713417.php 可是发现 文本内容显示不出来&…...