如何在Shopify网页中开发男女鞋码简易互转脚本

核心实现思路 #

整个工具逻辑非常简单，你有Python中级基础的话上手完全没有门槛，整体只需要3部分组成：

• HTML结构：写输入框、转换方向选择、结果展示三个核心模块，直接复制到你站点要展示的指定位置即可，不会影响其他页面功能
• JS逻辑：只需要写一个简单的计算函数，绑定触发事件（点击按钮/输入实时转换都行），完成鞋码计算后输出到结果区域
• 可选样式：加简单的CSS调整外观，符合你站点的整体风格即可

可直接复用的完整代码 #

HTML部分 #

直接把下面这段代码粘贴到你站点需要展示转换工具的位置即可：

<div id="shoe-size-converter" style="padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; max-width: 320px;">
  <h4>男女鞋码互转</h4>
  <div style="margin: 12px 0;">
    <label>输入原始鞋码：</label>
    <input type="number" step="0.5" id="size-input" placeholder="如42" style="width: 100px; padding: 5px; margin-left: 8px;">
  </div>
  <div style="margin: 12px 0;">
    <label>转换方向：</label>
    <select id="convert-direction" style="padding: 5px; margin-left: 8px;">
      <option value="m2f">男码转女码</option>
      <option value="f2m">女码转男码</option>
    </select>
  </div>
  <button id="convert-btn" style="margin: 10px 0; padding: 6px 14px; background: #165DFF; color: #fff; border: none; border-radius: 4px; cursor: pointer;">开始转换</button>
  <div style="margin-top: 15px; font-size: 16px;">
    转换结果：<span id="result-area" style="font-weight: bold; color: #165DFF;"></span>
  </div>
</div>

JS部分 #

把下面这段代码粘贴到页面</body>标签之前即可，不需要改其他配置：

// 绑定页面元素，类似Python中给变量赋值
const inputDom = document.getElementById('size-input');
const directionDom = document.getElementById('convert-direction');
const btnDom = document.getElementById('convert-btn');
const resultDom = document.getElementById('result-area');

// 绑定转换触发事件
btnDom.addEventListener('click', () => {
  // 读取输入的鞋码，转成数字，对应Python的float()方法
  const originSize = parseFloat(inputDom.value);
  // 输入合法性校验
  if (isNaN(originSize) || originSize <= 0) {
    resultDom.innerText = '请输入有效的正整数/半码鞋码';
    return;
  }
  let finalSize;
  // 按转换方向计算
  if (directionDom.value === 'm2f') {
    finalSize = originSize - 1.5;
  } else {
    finalSize = originSize + 1.5;
  }
  // 输出结果，保留1位小数
  resultDom.innerText = finalSize.toFixed(1);
});

开发建议 #

• JS基础弱也完全不用怕，你需要用到的逻辑和Python写法几乎一致：变量声明用let/const对应Python的变量赋值，函数写法除了关键字换成function或者箭头函数，逻辑判断、四则运算规则完全相同，不需要额外学习复杂的前端框架就能完成需求
• 如果你不需要点击按钮，想要输入内容后实时转换，只需要把上面JS里的click事件改成input，绑定到inputDom上即可，不需要改核心计算逻辑
• 如果后续要扩展功能比如支持欧码、美码、中国码的互转，只需要加一个码制选择下拉框，新增对应转换规则的判断分支就行，现有结构完全不用动
• 所有元素都加了唯一ID，只要你的现有站点没有重复的ID命名，这段代码不会和你站点其他功能产生冲突

内容的提问来源于stack exchange，提问作者jkorn95