<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>calendar</title>
<style type="text/css">
*{margin: 0;padding: 0}
.wrap{
position: absolute;
top: 20px;
left: 50%;
margin-left: -320px;
background: #6e6568;
width: 640px;
height: 360px;
/*margin: 0 auto;*/
}
.main_left{
float: left;
width: 300px;
height: 360px;
background: #8bc348;
/*box-shadow: -5px 0px 10px #8bc348 inset;*/
box-shadow: -5px 10px 10px #8bc348;
}
.Week{
font-size: 50px;
color: #fff;
font-family: Arial;
font-weight: normal;
margin-left: 10px;
line-height: 240px;
text-shadow: 3px 0 3px #000;
opacity: 0.7;
}
.month{
font-family: '微软雅黑 Light';
color: #fff;
font-size: 49px;
position: absolute;
bottom: 40%;
left: 10px;
text-shadow: 2px 0 5px #000;
opacity: 0.9;
}
.main_left_line{
position: absolute;
height: 3px;
left: 10px;
bottom: 150px;
color: #fff;
}
.main_right{
float: right;
background: #fff;
width: 340px;
height: 360px;
box-shadow: 5px 10px 10px #f0f0f0;
}
#year{
font-size: 30px;
color: #8B4513;
font-family: Arial;
position: absolute;
right: 20px;
top: 5px;
opacity: 0.5;
}
.calendar{
position: absolute;
top:11%;
right: 10px;
width: 320px;
height: 320px;
background: #fff;
}
.title{
height: 70px;
border-bottom: 1px solid rgba(0,0,0,0.1);
text-align: center;
position: relative;
}
#calendar_title{
font-size: 25px;
font-family: Arial;
font-weight: bold;
text-transform: uppercase;
padding: 14px 0 0 0;
}
#calendar_year{
font-size: 15px;
font-family: Arial;
font-weight: normal;
}
#prev{
text-indent: -9999px;
position: absolute;
left: 0;
top:0;
width: 60px;
height: 70px;
background: url("prev.png") no-repeat 50% 50%;
}
.body{
padding: 10px 20px;
}
#next{
text-indent: -9999px;
position: absolute;
right: 0;
top:0;
width: 60px;
height: 70px;
background: url("next.png") no-repeat 50% 50%;
}
.body_list ul{
width: 100%;
font-family: Arial;
font-weight: bold;
font-size: 14px;
}
.body_list ul li{
width: 14.28%;
height: 20px;
line-height: 10px;
list-style-type: none;
display: block;
box-sizing: border-box;
float: left;
text-align: center;
}
.lightgrey{
color: #a8a8a8;
}
.darkgrey{
color: #565656;
}
.green{
color: #6ac13c;
}
</style>
</head>
<body>
<p id="wrap" class="wrap">
<p id="main_left" class="main_left">
<!--<input type="button" id="set">-->
<p id="left"></p>
<h2 id="Week" class="Week">FRIDAY</h2>
<span id="month" class="month">APRIL 3RD</span>
<p class="main_left_line">———————————————</p>
</p>
<p id="main_right" class="main_right">
<span id="year">2017</span>
<p class="calendar">
<p class="title">
<h1 class="green" id="calendar_title">Month</h1>
<h2 class="green small" id="calendar_year">Year</h2>
<a href="" id="prev">Prev Month</a>
<a href="" id="next">Next Month</a>
</p>
<p class="body">
<p class="lightgrey body_list">
<ul>
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
</p>
<p class="darkgrey body_list">
<ul class="days">
</ul>
</p>
</p>
</p>
</p>
</p>
<script>
var month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31];
var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
var month_name = ["January","Febrary","March","April","May","June","July","Auguest","September","October","November","December"];
var holder = document.getElementById("days");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var ctitle = document.getElementById("calendar_title");
var cyear = document.getElementById("calendar_year");
var my_date = new Date();
var my_year = my_date.getFullYear();
var my_month = my_date.getMonth();
var my_day = my_date.getDate();
prev.onclick = function (e) {
e.preventDefault();
my_month--;
if (my_month<0) {
my_year--;
my_month = 11;
}
refreshDate();
}
next.onclick = function (e) {
e.preventDefault();
my_month++;
if (my_month>11) {
my_year ++;
my_month = 0;
}
refreshDate();
}
function refreshDate() {
var str = "";
var totalDay = daysMonth(my_month,my_year); //获取该月总天数
var firstDay = dayStart(my_month,my_year); //获取该月第一天是星期几
var myclass;
for (var i = 0; i < firstDay; i++) {
str += "<li></li>"; //为起始日之前的日期创建空白节点
}
for (var i = 0; i <= totalDay; i++) {
if((i<my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()) || my_year<my_date.getFullYear() || ( my_year==my_date.getFullYear() && my_month<my_date.getMonth())){
myclass = " class='lightgrey'"; //当该日期在今天之前时，以浅灰色字体显示
}else if (i==my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()){
myclass = " class='green greenbox'"; //当该日期是当天时，以绿色背景突出显示
}else{
myclass = " class='darkgrey'"; //当该日期在今后之后时，以深灰字体显示
}
str += "<li"+myclass+">"+i+"</li>"; //创建日期节点
}
holder.innerHTML = str; //设置日期显示
ctitle.innerHTML = month_name[my_month]; //设置英文月份显示
cyear.innerHTML = my_year; //设置年份显示
}
//获取某年某月第一天是星期几
function dayStart(month,year) {
var tmpDate = new Date(year,month,1);
return (tmpDate.getDay());
}
//计算某年是不是闰年，通过求年份除以4的余数即可
function daysMonth (month,year) {
var tmp = year % 4;
if (tmp == 0) {
return (month_olympic[month]);
}else {
return (month_normal[month]);
}
}
refreshDate();
</script>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
p Tukar kelas dalam beberapa hari kepada id untuk ditangkap oleh getElementById
Ini bermakna elemen anda tidak ditemui Bolehkah anda menukar kelas kepada id?