每日写一遍代码，防止抑郁👍
在吃饭刷抖音刷到了这么个视频
视频来源新客教育
视频中的交互效果Very棒，我知道我该做些什么了，废话不多说上才艺。
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日期输入框</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fff;
}
input {
border: 0;
outline: none;
text-align: center;
}
ul {
list-style: none;
}
#timer {
display: flex;
width: 220px;
height: 40px;
line-height: 40px;
background-color: #fff;
padding: 3px;
border: 1px solid #eee;
border-radius: 0.5em;
}
#timer span {
color: #eee;
}
#timer .icon {
width: 50px;
text-align: center;
overflow: hidden;
}
#timer .icon #list {
transition: all 0.5s ease 0s;
margin-top: 0;
}
#timer .mm {
width: 30%;
}
#timer .dd {
width: 30%;
}
#timer .yy {
width: 40%;
}
</style>
<body>
<div>
<div id="timer">
<div class="icon">
<ul id="list">
<li>🎂</li>
<li>🍼</li>
<li>🐟</li>
<li>🐑</li>
<li>🐮</li>
<li>👫</li>
<li>🦀</li>
<li>🦁️</li>
<li>🧍</li>
<li>♏️</li>
<li>🏹</li>
<li>♐</li>
<li>🦂</li>
</ul>
</div>
<!-- 月 -->
<input class="mm" type="text" placeholder="MM" maxlength="2"><span>/</span>
<!-- 日 -->
<input class="dd" type="text" placeholder="DD" maxlength="2"><span>/</span>
<!-- 年 -->
<input class="yy" type="text" placeholder="YYYY" maxlength="4">
</div>
<p id="msg" style="color: burlywood;text-align: center;margin-top: 10px;"></p>
</div>
<script>
// 获取节点
let list = document.querySelector("#list");
// 月,日,年
let mm = document.querySelector(".mm");
let dd = document.querySelector(".dd");
let yy = document.querySelector(".yy");
let msg = document.querySelector("#msg");
// 正则
let regexpA = /^\d[1-9]$/;
let regexpYear = /^\d{4}$/;
// 判读月份
mm.addEventListener('blur', () => {
if (!regexpA.test(mm.value)) {
msg.innerText = "月份格式输入有误！";
mm.value = "";
} else {
msg.innerText = "";
list.style.margin = 0;
}
}, false);
// 天
dd.onkeyup = () => {
let getmm = mm.value;
let getdd = dd.value;
if (getmm >= 1 && getmm <= 12) {
switch (Number(getmm)) {
case 1:
if (getdd < 21) {
list.style.margin = -41 * 12 + "px";
msg.innerText = "魔蝎座";
} else if (getdd >= 21 && getdd <= 31) {
list.style.margin = -41 + "px";
msg.innerText = "水瓶座";
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 2:
if (getdd < 20) {
list.style.margin = -41 + "px";
msg.innerText = "水瓶座";
} else if (getdd >= 20 && getdd <= 31) {
list.style.margin = -41 * 2 + "px";
msg.innerText = "双鱼座";
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 3:
if (getdd < 21) {
list.style.margin = -41 * 2 + "px";
msg.innerText = "双鱼座";
} else if (getdd >= 21 && getdd <= 31) {
list.style.margin = -41 * 3 + "px";
msg.innerText = "白羊座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 4:
if (getdd < 22) {
list.style.margin = -41 * 3 + "px";
msg.innerText = "白羊座";
} else if (getdd >= 21 && getdd <= 31) {
list.style.margin = -41 * 4 + "px";
msg.innerText = "金牛座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
case 5:
if (getdd < 22) {
list.style.margin = -41 * 4 + "px";
msg.innerText = "金牛座";
} else if (getdd >= 22 && getdd <= 31) {
list.style.margin = -41 * 5 + "px";
msg.innerText = "双子座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
case 6:
if (getdd < 23) {
list.style.margin = -41 * 5 + "px";
msg.innerText = "双子座";
} else if (getdd >= 22 && getdd <= 31) {
list.style.margin = -41 * 6 + "px";
msg.innerText = "巨蟹座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
case 7:
if (getdd < 23) {
list.style.margin = -41 * 6 + "px";
msg.innerText = "巨蟹座";
} else if (getdd >= 23 && getdd <= 31) {
list.style.margin = -41 * 7 + "px";
msg.innerText = "狮子座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 8:
if (getdd < 24) {
list.style.margin = -41 * 7 + "px";
msg.innerText = "狮子座";
} else if (getdd >= 24 && getdd <= 31) {
list.style.margin = -41 * 8 + "px";
msg.innerText = "处女座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 9:
if (getdd < 24) {
list.style.margin = -41 * 8 + "px";
msg.innerText = "处女座";
} else if (getdd >= 24 && getdd <= 31) {
list.style.margin = -41 * 9 + "px";
msg.innerText = "天秤座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 10:
if (getdd < 24) {
list.style.margin = -41 * 9 + "px";
msg.innerText = "天蝎座";
} else if (getdd >= 23 && getdd <= 31) {
list.style.margin = -41 * 10 + "px";
msg.innerText = "射手座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 11:
if (getdd < 22) {
list.style.margin = -41 * 10 + "px";
msg.innerText = "射手座";
} else if (getdd >= 22 && getdd <= 31) {
list.style.margin = -41 * 11 + "px";
msg.innerText = "魔蝎座"
} else {
list.style.margin = 0;
msg.innerText = "";
};
break;
case 12:
if (getdd >= 22 && getdd <= 31) {
list.style.margin = -41 * 12 + "px";
msg.innerText = "魔蝎座";
}
break;
}
}
}
// 年
yy.addEventListener('blur', () => {
if (!regexpYear.test(yy.value)) {
msg.innerText = "年份格式输入有误！";
yy.value = "";
}
}, false);
</script>
</body>
</html>
最终效果
说点什么
其实肉眼看得出程序BUG还是挺多的，仅供参考。
