本篇文章主要介绍了利用JS制作万年历的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

我们知道,万年历在人们的生活中是在平常不过的一种东西了,那么怎样用JS来实现在网页中展示一个与众不同万年历呢

1.HTML布局:

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的函数

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.οnchange=function(){ //当选项卡改变时

showDates();

};

monthSelect.οnchange=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

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();

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。