jQuery开发计时器遇变量未定义报错及Reset按钮样式问题求助

未定义变量问题修复 #

执行代码校验时收到的'end_time' 未定义、'start_time' 未定义、'formatted_time' 未定义、'time_change' 未定义报错，核心触发原因有两个：

• JS语法规则下，未通过let/var/const显式声明的变量，直接赋值会被判定为不合法，尤其是代码校验的严格模式下会直接抛出未定义错误
• formatTime.js中在函数内部用var声明了和计时器逻辑同名的end_time、start_time等变量，这些属于函数局部作用域变量，和计时器逻辑使用的全局变量完全独立，既没有实际作用，还会造成变量作用域混淆

正确的变量定义方式：

• 在times.js的$(document).ready作用域最顶部，提前声明需要跨点击事件共享的变量，避免依赖隐式全局变量：

  $(document).ready(function() {
    // 声明跨事件共享的计时器变量
    let start_time, end_time, formatted_time, time_change;
    // 原有点击事件逻辑保持不变
  })
  

• 清理formatTime.js中无意义的局部同名变量声明：该函数开头声明的end_time、formatted_time、formatted_end_time、start_time全程没有被使用，直接删除，只保留函数内部实际用到的变量：

  function formatTime(time) {
    let hour, minute, second, meridies;
    // 原有时间格式化逻辑保持不变
  }
  

Reset按钮display渲染异常修复 #

点击"Reset"按钮时，选择器#reset的display属性实际为inline-block、无法达到none的预期渲染效果，原因在于样式优先级冲突：

• jQuery的.show()方法会直接给元素设置内联style的display属性，对原生button元素来说，该方法设置的默认display值就是inline-block，内联样式的优先级远高于CSS类定义的样式
• 项目中CSS的.hidden类定义为display: none，但当元素被.show()设置了内联display后，类样式会被覆盖，哪怕后续给元素加上hidden类，也无法实现隐藏效果

修复步骤：

• 统一所有元素的显隐逻辑，全程用hidden类做样式切换，完全弃用.show()/.hide()方法，从根源上避免内联样式和类样式冲突：
  1. 把times.js里所有.show()、.hide()的调用，替换为对应加/减hidden类的操作。比如原来的$("#reset").show()替换为$("#reset").removeClass("hidden")，原来的$("#start").hide()替换为$("#start").addClass("hidden")
  2. 清理HTML代码中所有按钮、提示span的内联style="display: none;"属性，统一用hidden类控制初始隐藏状态
• 保持reset.js里的类切换逻辑不变，此时点击Reset时给#reset加上hidden类，就能正常将display设为none，符合深度匹配的测试要求

通用注意事项：开发过程中尽量统一显隐类的控制逻辑，不要混用jQuery快捷显隐方法和自定义CSS类操作，否则很容易出现样式优先级冲突的问题。

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