JavaScript

JavaScript网页特效：年月日三级联动自动更新以及innerHTML的用法

2020-10-15 11:28发布

站内文章 / JavaScript
676 0 0

进入正题之前，先说说js中

innerHTML的用法

innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
如：<div id="aa">这是内容</div> ，
我们可以通过 document.getElementById('aa').innerHTML 来 获取id为aa的对象的内嵌内容 ；
也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容';
这样就能向id为abc的对象插入内容。
（其实吧，就是加不加等号的问题，，，）
这点，js里倒是保持了高度的统一，如：document.getElementById("myArea").value=text1.substr(0,maxLen);、如：var maxLen=document.getElementById("myArea").cols*document.getElementById("myArea").rows;这些都是“获取数据”； 而如：document.getElementById("pinglun").innerText=len;、如：document.getElementById("myArea").value=text1.substr(0,maxLen);都是“修改数据”的。

在完善某官网时，突然发现一个问题：有一个地方是：距今 10 年，那么到明年，还要重新到后台修改数据，然后重新发布？
这放在大企业网站上，恐怕负责人一巴掌就甩过来了吧。。。
但是，innerHTML就可以做到：

<span id="fyear"></span>

<!-- 更新年份 -->
<script>
    document.getElementById('fyear').innerHTML = (new Date().getFullYear() - 初始年份) + '';
</script>

三级联动年月日

效果：“自动”识别年份：平年还是闰年，相应地更新月份中2月对应的日期值（有几天），并能够自动更新年份。（比如：今年是2019年，则年份最后一行就是2019，到了明年，2020，就多一行2020）

代码展示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三级联动年份选择</title>
    <script>
        function ymd() {
            var yyyy=document.getElementById("yyyy");
            var mm=document.getElementById("mm");
            var dd=document.getElementById("dd");
            var date=new Date();
            var year=parseInt(date.getFullYear());
            initSelect(yyyy,1999,year);
            initSelect(mm,1,12);
            initSelect(dd,1,31);
        }
        function initSelect(obj,start,end) {
            for(var i=start;i<=end;i++){
                obj.options.add(new Option(i,i));
            }
        }
        function selectYmd() {
            var mm=document.getElementById("mm");
            var dd=document.getElementById("dd");
            var yyyy=document.getElementById("yyyy");
            var m=parseInt(mm.value);
            var dayEnd;
            if(m===4 || m===6 || m===9 || m===11){
                dayEnd=30;
            }else if(m===2){
                dayEnd=28;
                y=parseInt(yyyy.value);
                if((y%4===0 && y%100!==0)|| y%400===0){
                    dayEnd=29;
                }
            }else{
                dayEnd=31;
            }
            dd.options.length=0;
            initSelect(dd,1,dayEnd);
        }
    </script>
</head>
<body onload="ymd()">
<form>
    <label for="yyyy"></label><select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
    <label for="mm"></label><select name="mm" id="mm" onchange="selectYmd()"></select>月
    <label for="dd"></label><select name="dd" id="dd"></select>日
</form>
</body>
</html>

这其中涉及一些思想，比如：不断优化
第17-20行，本来是这么写的：

 for (var i=1999;i<=2019;i++){
            ...
        }
        for (var j=1;j<=12;j++){
        ...
        }
        for (var k=1;k<=31;k++){
        ...
        }

后来考虑到：var year=parseInt(date.getFullYear()); 的加入，考虑到代码冗余的问题，将其改为函数：

function initSelect(Obj,start,end){
	for(var i=start;i<=end;i++){
		Obj.options.add(new option(i,i));
	}
}



作者：行舟客

链接：https://blog.csdn.net/qq_43624878/article/details/90710288

来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。