电⼦⽇历的实现（html+css+JavaScript）1、源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单⽇历</title>
<style type="text/css">
*{
padding:0%;/*设置内边距*/
margin:0%;/*设置外边距*/
}
/*设置⽇历的背景⾊*/
html, body{
background:#f2f2f2;
}
/*设置整个页⾯的显⽰样式*/
.calendar{
margin:45px;
width:450px;
height:350px;
background: white;
box-shadow:0px 1px 1px rgba(0,0,0,.1);
}
/*标题的显⽰样式*/
.title{
height:70px;
border-bottom:1px solid rgba(0,0,0,.1);
position: relative;
text-align: center;
}
/*标题中的⽉份显⽰样式*/
#calendar-title{
font-size:25px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
padding:14px 000;
}
/*标题中的年份显⽰样式*/
#calendar-year{
font-size:15px;
cssclass属性font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
/*上个⽉的超链接显⽰样式*/
#pre{
position: absolute;
top:0px;
left:0px;
background:url(image/pre.png) no-repeat 50%50%;
/*没规定⼤⼩时，图⽚显⽰ 0X0*/
width:60px;
height:70px;
}
/
*下个⽉的超链接显⽰样式*/
#next{
position: absolute;
top:0px;
right:0px;
background:url(image/next.png) no-repeat 50%50%;
width:60px;
width:60px;
height:70px;
}
.body-list ul{
font-size:14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
width:100%;
box-sizing: border-box;
}
.body-list ul li{
list-style: none;
display: block;
width:14.28%;
float: left;
/
*规定⾏⾼，垂直居中*/
height:36px;
line-height:36px;
box-sizing: border-box;
text-align: center;
}
/*类选择器：设置所有class属性为green的标签的样式*/
.green{
color:#6ac13c;
}
/*设置已经过去的⽇期颜⾊*/
.
lightgrey{
color:#a8a8a8;
}
/*设置将来的⽇期颜⾊*/
.darkgrey{
color:#565656;
}
/*⽇期当天⽤绿⾊背景绿⾊⽂字加以显⽰*/
.greenbox{
border:1px solid #6ac13c;
background: #e9f8df;
}
</style>
</head>
<body>
<div class="calendar">
<div class="title">
<h1 class="green" id="calendar-title">Month</h1>
<h2 class="green" id="calendar-year">Year</h2>
<a href="" id="pre"></a>
<a href="" id="next"></a>
</div>
<div class="body">
<div class="lightgrey body-list">
<!--使⽤⽆序列表标签显⽰星期-->
<ul>
<li>⽇</li>
<li>⼀</li>
<li>⼆</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
</div>
<!--使⽤⽆序列表标签显⽰⽇期，⽇期使⽤JavaScript动态获取，然后使⽤innerHTML设置<ul>标签之间的HTML-->
<!--使⽤⽆序列表标签显⽰⽇期，⽇期使⽤JavaScript动态获取，然后使⽤innerHTML设置<ul>标签之间的HTML--> <div class="darkgrey body-list">
<ul id="days">
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var month_olypic =[31,29,31,30,31,30,31,31,30,31,30,31];//正常年份12个⽉对应的天数
var month_normal =[31,28,31,30,31,30,31,31,30,31,30,31];//闰年中12个⽉对应的天数
var month_name =["1⽉","2⽉","3⽉","4⽉","5⽉","6⽉","7⽉","8⽉","9⽉","10⽉","11⽉","12⽉"];//定义要显⽰的⽉份数组//获取以上各个部分的id
var holder = ElementById("days");
var prev = ElementById("prev");//上个⽉份的超链接id
var next = ElementById("next");//下个⽉份的超链接id
var ctitle = ElementById("calendar-title");
var cyear = ElementById("calendar-year");
//获取当天的年⽉⽇
var my_date =new Date();
var my_year = FullYear();//获取年份
var my_month = Month();//获取⽉份，下标从0开始
var my_day = Date();//获取当前⽇期
//根据年⽉获取当⽉第⼀天是周⼏
function dayStart(month,year){
var tmpDate =new Date(year, month,1);
Day());
}
//根据年份判断某⽉有多少天，主要是区分闰年
function daysMonth(month, year){
var tmp1 = year %4;
var tmp2 = year %100;
var tmp3 = year %400;
if((tmp1 ==0&& tmp2 !=0)||(tmp3 ==0)){
return(month_olypic[month]);//闰年
}else{
return(month_normal[month]);//⾮闰年
}
}
function refreshDate(){
var str ="";
//计算当⽉的天数和每⽉第⼀天都是周⼏
var totalDay =daysMonth(my_month,my_year);
var firstDay =dayStart(my_month, my_year);
//添加每个⽉前⾯的空⽩部分，即若某个⽉的第⼀天是从周三开始，则前⾯的周⼀，周⼆需要空出来
for(var i =0; i < firstDay; i++){
str +="<li>"+"</li>";
}
//从⼀号开始添加到totalDay（每个⽉的总天数），并为pre，next和当天添加样式
var myclass;
for(var i =1; i <= totalDay; i++){
//如果是已经过去的⽇期，则⽤浅灰⾊显⽰
if((my_year < FullYear())||(my_year == FullYear()&&
my_month < Month())||(my_year == FullYear()&&
my_month == Month()&& i < my_day)){
myclass =" class='lightgrey'";
}
//如果正好是今天，则⽤绿⾊显⽰
else if(my_year == FullYear()&& my_month == Month()&& i == my_day){
myclass ="class = 'green greenbox'";
}
}
//将来的⽇期⽤深灰⾊显⽰
else{
myclass ="class = 'darkgrey'";
}
str +="<li "+myclass+">"+i+"</li>";
}
holder.innerHTML = str;//为⽇期的列表标签设置HTML；
ctitle.innerHTML = month_name[my_month];//设置当前显⽰的⽉份        cyear.innerHTML = my_year;//设置当前显⽰的年份
}
refreshDate();//显⽰⽇期，更新界⾯
//上个⽉的点击事件
e.preventDefault();
my_month--;
if(my_month <0){
my_year--;
my_month =11;
}
refreshDate();//更新界⾯
}
//下个⽉的点击事件
e.preventDefault();
my_month++;
if(my_month >11){
my_month =0;
my_year++;
}
refreshDate();//更新界⾯
}
</script>
</body>
</html>
2、运⾏结果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。