一个兢兢业业、无微不至的保姆。你用自己的一只手——雪，把那青绿的麦苗爱抚地搂在怀里，给他以温暖和关怀。麦苗在那层层棉被下静静地期待，期待着来春生长发育。蛇、鳝、熊等等，有的钻进了深泥，有的藏入树洞，休息一冬，养精蓄锐，方有新春来到时的精神振奋。你用自己的另一只手――寒风，举刀挥剑，把那些残害农作物的害虫，砍光杀尽，把那些残害人类、牲畜的虎豹豺豺狼驱赶进深山老林。冬呵！你严守阵地，不容侵犯；你，是一位最负责任的对友火热温情，对敌残忍无情的好保姆。
我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢
1.HTML布局:
<div id="calendar">
<div id="month_year">
<select id="year"></select>年
<select id="month"></select>月
</div>
<ul id="title">
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
</ul>
<ul id="datesUl"></ul>
</div>
1.首先在布局上,可以先用一个id为calender(日历)的div将你的万年历包住,以便我们对万年历的位置进行设置;
2.在这个大的div中有三部分: 1. month_year 用以设置年月; 2.title 用以显示星期; 3.detesUl 用以显示具体的日期;
CSS样式:
*{
padding: 0;
margin: 0;
list-style: none;
}
#calendar{
width: 700px;
background-color: lightgray;
margin: 20px auto;
}
#calendar::after{
content: "";
display: block;
clear: both;
}
#month_year{
width: 700px;
height: 50px;
line-height: 50px;
text-align: center;
}
ul > li{
float: left;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
}
#datesUl > li:empty{
opacity: 0;
}
#datesUl > li:hover{
background-color: lightblue;
}
JS代码分析:
- 做一些初始化的处理,给俩个显示年月的选项卡中添加内容便于用户查找
- 构造一些我们要用到的函数: 如输入年月计算出这个月有几天,创建添加option及li的函数
<script>
var yearSelect = document.getElementById('year');
var monthSelect = document.getElementById('month');
var datesUl = document.getElementById('datesUl');
//初始化
function init(){
for(var year=1990;year<3000;year++){ //初始化俩个选项卡
createOption(year,year,yearSelect);
}
for(var month=1;month<13;month++){
createOption(month,month,monthSelect);
}
var now = new Date(); //获取当前的日期
showSelect(now.getFullYear(),now.getMonth()+1); //引用显示选项卡的函数
showDates(); //调用显示日期的函数
yearSelect.onchange=function(){ //当选项卡改变时
showDates();
};
monthSelect.onchange=function(){
showDates();
}
}
init(); //调用初始化函数
//创建option的函数
function createOption(text,value,parent){
var option = document.createElement('option');
option.innerHTML = text;
option.value = value;
parent.appendChild(option);
}
//获取当前的日期并显示在选项卡中
function showSelect(year,month){
yearSelect.value = year;
monthSelect.value = month;
}
//获取选择的年月的第一天是星期几
function getDays(year,month){
var d = new Date(year,month,1);
return d.getDay();
}
//根当前的select中的年和月来显示日期
function showDates(){
datesUl.innerHTML= "";
var year = yearSelect.value;
var month = monthSelect.value;
//创建空的li
for(var i=0;i<getDays(year,month);i++){
createLi("",datesUl);
}
//创建有日期的li
for(var j=1;j<=getDatesOfMonth(year,month);j++){
createLi(j,datesUl);
}
}
//创建li并添加至对应的容器
function createLi(text,parent){
var li = document.createElement('li');
li.innerHTML = text;
parent.appendChild(li);
}
//创建一个输入年月计算出这个月有几天的函数
function getDatesOfMonth(year,month){
var d = new Date(year,month,0);
return d.getDate();
}
</script>
本文利用JS制作万年历的方法到此结束。要诚恳，要坦然，要慷慨，要宽容，要有平常心。小编再次感谢大家对我们的支持！
