JavaScript代码优化

wlue 发表于 2021-9-8 21:46

本帖最后由 wlue 于 2021-9-8 21:47 编辑

这些天在学习PHP和jS等网页制作知识，我在仿照例子用JavaScript循环做一个年月日三级联动下拉列表实例，打开页面出现年月日三个下拉列表，默认选中当前的年月日如图：

这个功能虽然实现了，但总感觉有一个地方代码还不够简练，请各位精通JS的大侠看看，帮助精简一下，上代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>年月日三级联动下拉列表</title>
<script type="text/javascript">
   var date = new Date();
   var yyyy0 = parseInt(date.getFullYear()); //取得当前的年份
   var mm0 = parseInt(date.getMonth() + 1); //取得当前的月份
   var dd0 = parseInt(date.getDate()); //取得当前的日期

   function init_obj(obj, start, end, seclect) {
         for (i = start; i <= end; i++) {
            obj.options.add(new Option(i, i));
                           //能否在此处添加判断语句，使其选中当前的日期项？
         }
         //遍历下拉列表项使默认选中当前的日期项
         for (j = 0; j < obj.options.length; j++) {
            if (obj.options.value == seclect) {
               obj.options.selected = "selected";
            }
         }
   }

   function yymmdd() {
         var yyyy = document.getElementById("yyyy");
         var mm = document.getElementById("mm");
         var dd = document.getElementById("dd");
         init_obj(yyyy, yyyy0 - 5, yyyy0 + 5, yyyy0); //年份下拉列表框，当前年份的前后5年
         init_obj(mm, 1, 12, mm0); //月份下列列表框
         init_obj(dd, 1, 31, dd0); //日期下列列表框
   }

   //判断闰年及大小月份确定日期下拉框中显示的日期数值
   function change_dd() {
         var yyyy = document.getElementById("yyyy");
         var mm = document.getElementById("mm");
         var dd = document.getElementById("dd");
         dd.options.length = 0;
         var m = parseInt(mm.value);
         var y = parseInt(yyyy.value);
         var dayend;
         if (m == 4 || m == 6 || m == 9 || m == 11) {
            dayend = 30;
         } else if (m == 2) {
            dayend = 28;
            if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) {
               dayend = 29;
            }
         } else {
            dayend = 31;
         }
         init_obj(dd, 1, dayend);
   }
</script>
</head>
<body>
<form>
<h2>年月日三级联动菜单</h2>
<label>请选择年</label><select name="yyyy" id="yyyy"></select>
<label>请选择月</label><select name="mm" id="mm"></select>
<label>请选择日</label><select name="dd" id="dd"></select>
</form>
</body>
</html>

原动力 发表于 2021-9-8 21:51

本帖最后由原动力于 2021-9-8 21:53 编辑

后期还有jquery

wlue 发表于 2021-9-8 21:57

我想优化代码的地方：

请各位大侠帮忙看下，谢谢了{:1_893:}

wlue 发表于 2021-9-8 22:00

原动力发表于 2021-9-8 21:51
后期还有jquery

现在还是学习阶段，尽量用原生的JS代码实现各种功能

Takitooru 发表于 2021-9-8 23:08

wlue 发表于 2021-9-8 23:20

Takitooru 发表于 2021-9-8 23:08

var date = new Date();
var datey = parseInt(date.getFullYear()); // ...

恕我直言，你这样只是把原来的循环改放了一个地方，不但没有使代码优化，而且把这个循环又嵌套到了上一个循环体中，反而增大了运算量，消耗更多系统资源，得不偿失……
不过，还是谢谢你的回复，共同探讨，共同学习……:handshake

Takitooru 发表于 2021-9-8 23:46

wlue 发表于 2021-9-8 23:20
恕我直言，你这样只是把原来的循环改放了一个地方，不但没有使代码优化，而且把这个循环又嵌套到了上一个 ...

这么晚，我也是初学者啊，你说的很有道理，你的代码完全可以重写优化。

wlue 发表于 2021-9-9 00:21

Takitooru 发表于 2021-9-8 23:46
这么晚，我也是初学者啊，你说的很有道理，你的代码完全可以重写优化。

心里在想着一个问题，脑子兴奋就睡不着觉了……
经过冥思苦想，我终于解决了这个问题{:1_918:}

Takitooru 发表于 2021-9-9 00:27

wlue 发表于 2021-9-9 00:21
心里在想着一个问题，脑子兴奋就睡不着觉了……
经过冥思苦想，我终于解决了这个问题

遇到一时解不了的困境，有时候需要慢慢思考，我也是一样，不过我是帮忙修bug比较多
你的代码确实还有优化的，就是封装一个类调用更方便

wlue 发表于 2021-9-9 00:27

经过一晚上的冥思苦想，终于解决了这个问题:victory:
上代码：
function init_obj(obj, start, end, seclect) {
         for (i = start; i <= end; i++) {
            obj.options.add(new Option(i, i));
var idx = i-start; //取得当前选项的索引值
if(i == seclect) { //当循环值等于当前日期时，给选项加上选中标记
obj.options.selected = "selected";
}
         }
   }

页: [1] 2 3

吾爱破解 - 52pojie.cn's Archiver

JavaScript代码优化