2018-11-23

                                                      简单日历

效果2.gif

html

< >

日	一	二	三	四	五	六

toDay

年

月

日

Go
clear

`

css
{
margin: 0;
padding: 0;
}
body{
background-color: #9e9e9e54; /全屏背景色*/
}

container{

position: relative;  /*相对定位*/
height: 700px;
width: 400px;       /* 设置宽和高 */
margin: 50px auto;      /*屏幕居中显示*/
box-shadow: 10px 10px #7955481f; /*设置阴影*/

}

calendar{

position: absolute;         /*绝对定位*/
width: 100%;
height: 70%;
background-color: #68EE99;  /*背景色*/

}

top{

position: absolute;
width: 400px;
height: 60px;
border-bottom: 2px solid #00800038; /*设置下方分界线*/

}

topMiddle{

height: 80px;  /*顶部高度*/

}

toDay{

display: inline-block;
width: 230px;
text-align: center;

}

top td span{

font-size: 40px;
cursor: pointer; 
margin-left: 25px;
color: #fff;

}

top td span:hover{

opacity: 0.5;

}

dayDate td:hover{

background-color: #9e9e9e54;

}

dayDate{

position: absolute;
width: 100%;
margin-top: 100px; 

}

dayDate td{

text-align: center;  /*文本水平居中*/
color: #fff;
cursor: pointer;
font-size: 20px;
height: 40px;

}

writer{

position: absolute;
width: 100%;
height: 30%;
margin-top: 490px;
background-color: #fff;

}

Go,

clear,

btn{

width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 20px auto;
border-style: outset;
cursor: pointer;

}

Go:active,

clear:active,

btn:active{

border-style: inset;

}
input{
height: 30px;
width: 80px;
}

input{

width: 400px;
text-align: center;

}
.hidden{
visibility: hidden;
}

dayday tr{

height: 55px;

}

JavaScript
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id;
}

var toDay = byId('toDay');
var left = byId('left');
var right = byId('right');
var dayday = byId('dayday');

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var nowyear = year;
var nowmonth = month;
var nowday = day;
var now = byId('dayday').getElementsByTagName('td');
var btn = byId('btn');
var goYear = byId('goYear');
var goMonth = byId('goMonth');
var goDay = byId('goDay');
var Go = byId('Go');
var clear = byId('clear');
console.log(now)
console.log(year)
console.log(month)
console.log(day)

//跳转日历
Go.onclick = function(){
if((goMonth.value>0&&goMonth.value<=12)&&(goDay.value>0&&goDay.value<=31)&&(goYear.value>0)){
month = parseInt(goMonth.value);
day = parseInt(goDay.value);
year = parseInt(goYear.value);
toDay.innerHTML = year+'-'+month+'-'+day;
dayDay();
id();
color();
}
else{
alert('输入错误请重新输入！');
}

}

//清除输入
clear.onclick = function(){
goMonth.value='';
goDay.value='';
goYear.value='';
}

//回到今天
btn.onclick = function(){
day = nowday;
month = nowmonth;
year = nowyear;
toDay.innerHTML = nowyear+'-'+nowmonth+'-'+nowday;
dayDay();
id();
color();
}

//给每个日子附ID
function id(){
var k=1;
for(i=0;i if(now[i].innerHTML!=''){
now[i].id= k;
k++;
}
}
}

//添加当前日期颜色
function color(){
for(var i =0;i if(now[i].id ==day){
now[i].style.backgroundColor = "orange";
}
}
}
//添加日期
function dayDay(){
var sum=0;
if((year%4==0&&year%100!=0)||(year%400==0)){
var monthDay = [31,29,31,30,31,30,31,31,30,31,30,31];
}
else{
var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31];
}
for(var i =1;i if((i%4==0&&i%100!=0)||(i%400==0)){
sum+=366;
}
else{
sum+=365;
}
}
for(var i =0;i sum+=monthDay[i]; //加月份的天数
}
if((year-1)%4==0){
sum+=2;
}
else{
sum+=1;
}
sum = sum%7; //星期几
console.log(sum)
var tbodyHtml = '';
var tagClass = 'hidden';
function bigMonth(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "";
}
}
else{
sum=-1;
}
for(var i=1;i<=31;i++){
tbodyHtml =tbodyHtml+''+i+''
sum++;
if(sum>=6){
tbodyHtml += ''
sum=-1;
}
}
}
function smallMonth(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "";
}
}
else{
sum=-1
}
for(var i=1;i<=30;i++){
tbodyHtml =tbodyHtml+''+i+''
sum++;
if(sum>=6){
tbodyHtml += ''
sum=-1;
}
}
}
function yes(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "";
}
}
else{
sum=-1
}
for(var i=1;i<=29;i++){
tbodyHtml =tbodyHtml+''+i+''
sum++;
if(sum>=6){
tbodyHtml += ''
sum=-1;
}
}
}
function no(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "";
}
}
else{
sum=-1
}
for(var i=1;i<=28;i++){
tbodyHtml =tbodyHtml+''+i+''
sum++;
if(sum>=6){
tbodyHtml += ''
sum=-1;
}
}

    }
if((year%4==0&&year%100!=0)||(year%400==0)){
    if((month==1)||(month==3)||(month==5)||(month==7)||(month==8)||(month==10)||(month==12)){
        bigMonth();
    }
    if((month==4)||(month==6)||(month==9)||(month==11)){
        smallMonth();
    }
    if(month==2){
        yes();
    }
}
else{
    if((month==1)||(month==3)||(month==5)||(month==7)||(month==8)||(month==10)||(month==12)){
        bigMonth();
    }
    if((month==4)||(month==6)||(month==9)||(month==11)){
        smallMonth();
    }
    if(month==2){
        no();
    }
}
dayday.innerHTML = tbodyHtml;

}

+function(){
toDay.innerHTML = nowyear+'-'+nowmonth+'-'+nowday;
dayDay();
id();
color();
}();

left.onclick = function(){
month--;
if(month<=0){
year--;
month = 12;
}
toDay.innerHTML = year+'-'+month+'-'+day;
dayDay();
id();
color();
}
right.onclick = function(){
month++;
if(month>12){
year++;
month = 1;
}
toDay.innerHTML = year+'-'+month+'-'+day;
dayDay();
id();
color();
}