JavaScript代码优化

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

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

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

这个功能虽然实现了，但总感觉有一个地方代码还不够简练，请各位精通JS的大侠看看，帮助精简一下，上代码：

[HTML] 纯文本查看 复制代码

<!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[j].value == seclect) {
                    obj.options[j].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

我想优化代码的地方：
快照2.png

请各位大侠帮忙看下，谢谢了

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

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

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

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

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">
var date = new Date();
var datey = parseInt(date.getFullYear()); //取得当前的年份
var datem = parseInt(date.getMonth() + 1); //取得当前的月份
var dated = parseInt(date.getDate()); //取得当前的日期
var yyyy = document.getElementById("yyyy");
var mm = document.getElementById("mm");
var dd = document.getElementById("dd");

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[j].value == seclect) {
				obj.options[j].selected = "selected";
			}
		}
	}
}

//判断闰年及大小月份确定日期下拉框中显示的日期数值
function change_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);
}
init_obj(yyyy, datey - 5, datey + 5, datey); //年份下拉列表框，当前年份的前后5年
init_obj(mm, 1, 12, datem); //月份下列列表框
init_obj(dd, 1, 31, dated); //日期下列列表框
</script>

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

Takitooru 发表于 2021-9-8 23:08
[mw_shl_code=javascript,true]
var date = new Date();
var datey = parseInt(date.getFullYear()); // ...

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

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

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

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

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

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

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

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

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

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

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

经过一晚上的冥思苦想，终于解决了这个问题

上代码：

[JavaScript] 纯文本查看 复制代码

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[idx].selected = "selected";
				}
            }
        }

帐号		自动登录	找回密码
密码			注册[Register]

[求助] JavaScript代码优化

免费评分

免费评分