JS基础教程（动态日历[1]）
2017-12-17 本文已影响0人
浮若星尘
闲话不多少，先上效果图。
Screenshot_20171217_215802.png
怎么样，是不是比好很多呢？
代码如下：
Calendar.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>日历</title>
<link rel="stylesheet" href="calendar.css" type="text/css">
</head>
<div id="frame" class="frame_low">
<div class="top">
<span class="left" onclick="preMonth()"></span>
<span class="right" onclick="postMonth()"></span>
<h2></h2>
</div>
<ul id="week">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>The</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<div id="data">
<div class="firstLine">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="Line">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="Line">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="Line">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="Line">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="lastLine">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
</div>
<script src="calendar.js" type="text/javascript"></script>
<body>
</body>
</html>
Calendar.css
*{
margin: 0px;
padding: 0px;
text-align: center;
}
.frame_Low{
width: 500px;
height: 300px;
border: 2px solid #DDD;
margin: auto;
border-radius: 5px;
}
.frame_Hight{
width: 500px;
height: 340px;
border: 2px solid #DDD;
margin: auto;
border-radius: 5px;
}
.top{
width: 495px;
height: 50px;
background-color: #f0f0f0;
border-radius: 5px;
margin: auto;
margin-top:3px;
text-align: center;
line-height: 45px;
}
.left{
float: left;
background: url(ui-icons_444444_256x240.png);
width: 18px;
height: 20px;
background-position: -79px -187px;
background-repeat: no-repeat;
margin-top: 10px;
}
.right{
float: right;
background: url(ui-icons_444444_256x240.png);
width: 18px;
height: 20px;
background-position: -47px -187px;
background-repeat: no-repeat;
margin-top: 10px;
}
a:hover .left, a:hover .right{
border: 2px solid #666666;
}
#week li{
list-style-type: none;
float: left;
width: 67px;
height: 37px;
margin: 2px;
background-color:orange;
text-align: center;
line-height: 40px;
font-weight: 600;
}
#data span{
float: left;
width: 63px;
height: 33px;
/*这个地方可以优化一下，方角改园角*/
margin: 2px;
text-align: center;
}
.open{
background-color: #f0f0f0;
border: 2px solid #D4D4D4;
}
.close{
background-color: #fff;
border: 2px solid #fff;
}
.clicked{
background-color: yellow;
border: 2px solid #D4D4D4;
}
.Mouseover{
display: block;
background: #666666;
}
.Mouseout{
display: none;
background: #ffffff;
float: none;
}
Calendar.js
var date=new Date(); //初始化日期
var month=["January","February","March","April","May","June","July","August",
"September","October","November","December"];
function setData() {
var mon=date.getMonth(); //获取月份
var year=date.getFullYear();//获取完整格式年
document.getElementsByTagName("h2")[0].innerHTML=month[mon]+" "+year;
//这里的【0】是因为Elements的TagName会有多个h2，要以此为区分
var day;
if(mon+1==2){
if((year%4==0&&(year%100!=0))||(year%400==0))
day=29;
else
day=28;
}
else{
if(mon==0||mon==2||mon==4||mon==6||mon==7||mon==9||mon==11)
day=31;
else
day=30;
}
//调用返回的是一个数组,只有一个也是要下标的,对每一个div赋值
for(var x=0;x<document.getElementsByClassName('firstLine')[0].childNodes.length;x++)
document.getElementsByClassName('firstLine')[0].childNodes[x].className="open";
for(var x=0;x<document.getElementsByClassName('Line').length;x++)
for(var y=0;y<document.getElementsByClassName('Line')[x].childNodes.length;y++)
document.getElementsByClassName('Line')[x].childNodes[y].className="open";
for(var x=0;x<document.getElementsByClassName('lastLine')[0].childNodes.length;x++)
document.getElementsByClassName('lastLine')[0].childNodes[x].className="open";
date.setDate(1);
var firstDay=date.getDay(); //0-6分别代表星期一到星期天
for(var x=1;x<=firstDay;x++){
document.getElementsByClassName('firstLine')[0].childNodes[x].className="close";
document.getElementsByClassName('firstLine')[0].childNodes[x].innerHTML="";
}
var count=1;
for(var x=firstDay+1;x<document.getElementsByClassName('firstLine')[0].childNodes.length-1;x++) {
document.getElementsByClassName('firstLine')[0].childNodes[x].innerHTML = count++;
//点击变黄点
document.getElementsByClassName('firstLine')[0].childNodes[x].onclick = function () {
clearall(firstDay);
this.className='clicked';
}
}
var flag=0;
for(var x=0;x<document.getElementsByClassName("Line").length;x++){
for(var y=1;y<document.getElementsByClassName('Line')[x].childNodes.length-1;y++){
if(count<=day) {
document.getElementsByClassName('Line')[x].childNodes[y].innerHTML = count++;
//点击变黄点
document.getElementsByClassName('Line')[x].childNodes[y].onclick = function () {
clearall(firstDay);
this.className='clicked';
}
}
else{
flag=1;
document.getElementsByClassName('Line')[x].childNodes[y].className="close";
document.getElementsByClassName('Line')[x].childNodes[y].innerHTML="";
}
}
}
if(flag==1||count==day+1){
for(var x=0;x<document.getElementsByClassName('lastLine')[0].childNodes.length;x++){
document.getElementsByClassName('lastLine')[0].childNodes[x].className="close";
document.getElementsByClassName("lastLine")[0].childNodes[x].innerHTML="";
}
document.getElementById("frame").className="frame_Low";
}else{
for(var x=1;x<document.getElementsByClassName("lastLine")[0].childNodes.length-1;x++){
if(count<=day){
document.getElementsByClassName("lastLine")[0].childNodes[x].innerHTML=count++;
//点击变黄点
document.getElementsByClassName('lastLine')[0].childNodes[x].onclick = function () {
clearall(firstDay);
this.className='clicked';
}
}
else{
document.getElementsByClassName("lastLine")[0].childNodes[x].className="close";
document.getElementsByClassName("lastLine")[0].childNodes[x].innerHTML="";
}
}
document.getElementById("frame").className="frame_Hight";
}
}
//清除黄点
function clearall(firstDay) {
for (var x = firstDay + 1; x < document.getElementsByClassName('firstLine')[0].childNodes.length - 1; x++)
document.getElementsByClassName('firstLine')[0].childNodes[x].className = "open";
for (var x = 0; x < document.getElementsByClassName('Line').length; x++)
for (var y = 0; y < document.getElementsByClassName('Line')[x].childNodes.length; y++)
if (document.getElementsByClassName('Line')[x].childNodes[y].className != 'close')
document.getElementsByClassName('Line')[x].childNodes[y].className = "open";
for(var x=1;x<document.getElementsByClassName("lastLine")[0].childNodes.length-1;x++) {
if (document.getElementsByClassName('lastLine')[0].childNodes[x].className != 'close')
document.getElementsByClassName('lastLine')[0].childNodes[x].className = "open";
}
}
onload=setData();
function preMonth() {
if(date.getMonth()!=0){
date.setMonth(date.getMonth()-1); //设置月份减一
}
else{
date.setFullYear(date.getFullYear()-1);//月份到了0，前一个年份
date.setMonth(11); //这里11是12月
}
setData(); //调用显示函数
}
function postMonth() {
if(date.getMonth()==11){
date.setMonth(0);
date.setFullYear(date.getFullYear()+1);
}
else{
date.setMonth(date.getMonth()+1);
}
setData();
}
这里上传两张用于背景的图片
请大家注意路径问题
ui-icons_444444_256x240.png
ui-icons_ffffff_256x240.png
这里经过我反复的测试，发现了一些问题。
Screenshot_20171217_220443.png
目前，因为某些原因，你懂得啦，我现在还不行。嘿嘿。
