简单日历
效果2.gif
html
<!DOCTYPE html>
<html>
<head>
<title>日历</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="11.css">
</head>
<body onselectstart="return false;">
<div id="container">
<div id="calendar">
<table id="top">
<thead>
<tr id="topMiddle">
<td>
<span id="left"><</span>
<span id="toDay"></span>
<span id="right">></span>
</td>
</tr>
</thead>
</table>
<table id="dayDate">
<thead>
<tr id="week">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</thead>
<tbody id="dayday"></tbody>
</table>
</div>
<div id="writer">
<div id="btn">toDay</div>
<div id="input">
<input type="text" id="goYear">
<span>年</span>
<input type="text" id="goMonth">
<span>月</span>
<input type="text" id="goDay">
<span>日</span>
<div>
<span id="Go">Go</span>
<span id="clear">clear</span>
</div>
</div>
</div>`
</div>
<script type="text/javascript" src="111.js"></script>
</body>
</html>
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<now.length;i++){
if(now[i].innerHTML!=''){
now[i].id= k;
k++;
}
}
}
//添加当前日期颜色
function color(){
for(var i =0;i<now.length;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<year-1;i++){
if((i%4==0&&i%100!=0)||(i%400==0)){
sum+=366;
}
else{
sum+=365;
}
}
for(var i =0;i<month-1;i++){
sum+=monthDay[i]; //加月份的天数
}
if((year-1)%4==0){
sum+=2;
}
else{
sum+=1;
}
sum = sum%7; //星期几
console.log(sum)
var tbodyHtml = '<tr>';
var tagClass = 'hidden';
function bigMonth(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "<td class=" + tagClass + "></td>";
}
}
else{
sum=-1;
}
for(var i=1;i<=31;i++){
tbodyHtml =tbodyHtml+'<td>'+i+'</td>'
sum++;
if(sum>=6){
tbodyHtml += '</tr><tr>'
sum=-1;
}
}
}
function smallMonth(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "<td class=" + tagClass + "></td>";
}
}
else{
sum=-1
}
for(var i=1;i<=30;i++){
tbodyHtml =tbodyHtml+'<td>'+i+'</td>'
sum++;
if(sum>=6){
tbodyHtml += '</tr><tr>'
sum=-1;
}
}
}
function yes(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "<td class=" + tagClass + "></td>";
}
}
else{
sum=-1
}
for(var i=1;i<=29;i++){
tbodyHtml =tbodyHtml+'<td>'+i+'</td>'
sum++;
if(sum>=6){
tbodyHtml += '</tr><tr>'
sum=-1;
}
}
}
function no(){
if(sum<6){
for(var i=1;i<=sum+1;i++){
tbodyHtml = tbodyHtml+ "<td class=" + tagClass + "></td>";
}
}
else{
sum=-1
}
for(var i=1;i<=28;i++){
tbodyHtml =tbodyHtml+'<td>'+i+'</td>'
sum++;
if(sum>=6){
tbodyHtml += '</tr><tr>'
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();
}
网友评论