当前位置：首页 > web >正文

让 Deepseek 写一个尺码计算器

web 2025/7/27 20:12:13

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

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. 功能说明

输入功能：
- 用户可以输入身高（厘米）和体重（公斤）
计算功能：
- 点击"计算尺码"按钮后，根据身高和体重计算推荐尺码
- 基本的尺码计算逻辑：
  - 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: 超过以上范围
显示结果：
- 显示计算出的推荐尺码
- 提供尺码对照表供用户参考