0
点赞
收藏
分享

微信扫一扫

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


进入正题之前,先说说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 lang="en">
<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));
}
}


举报

相关推荐

0 条评论