溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了javascript實現日歷功能的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
日歷
在學習javascript過程中，菜鳥教程有一個javascript實例---css日歷，感覺挺有趣的，在它的基礎上增加了一些簡單的功能（差點哭遼）。
功能
實現
代碼
html代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS日歷</title> <link type="text/css" rel="stylesheet" href="style.css" rel="external nofollow" > </head> <body> <h2>CSS日歷</h2> <div class="month"> <ul> <li class="prev" onclick="change(-1)">❮</li> <li class="next" onclick="change(1)">❯</li> <li ><span id="month">August</span><br> <span id="year">2016</span></li> </ul> </div> <ul class="weekdays" id="weekdays"> </ul> <ul class="days" id="days"> </ul> </body> <script type="text/javascript" src="show.js"></script> </html>
CSS代碼
@charset "UTF-8";
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}
.center {
text-align: center;
border: 3px solid green;
}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li active {
padding: 5px;
background: #1abc9c;
color: white !important;
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}javascript代碼
var date = new Date();
var year = date.getFullYear();
var month=date.getMonth();
var day = date.getDate();
var week=date.getDay();
var p=(week-day+1+35)%7+day-1;
var monthName=[
"January","February","March","April","May","June","July","August","September","October","November","December"
];
var monthNum=[
31,28,31,30,31,30,31,31,30,31,30,31
];
var weekName=[
"Su","Mo","Tu","We","Th","Fr","Sa"
];
var aimmonth=month,aimyear=year;
function init(){
createTitle(year,month);
var weekdays=document.getElementById("weekdays");
for(var i=0;i<7;i++){
var x = document.createElement("LI");
var t = document.createTextNode(weekName[i]);
x.appendChild(t);
weekdays.appendChild(x);
}
delDay();
createDay();
isnow();
}
function change(x){
aimmonth+=x;
if(aimmonth==-1){
aimyear-=1;
aimmonth=11;
}else if(aimmonth==12){
aimyear+=1;
aimmonth=0;
}
createTitle(aimyear,aimmonth);
delDay();
createDay();
isnow();
}
function createTitle(y,m){
document.getElementById("year").innerHTML=y;
document.getElementById("month").innerHTML=monthName[m];
}
function createDay(){
var datetmp=new Date();
datetmp.setFullYear(aimyear,aimmonth,1);
var firstday=datetmp.getDay();
var days=document.getElementById("days");
for(var i=0;i<firstday;i++){
var x = document.createElement("LI");
var t = document.createTextNode("");
x.appendChild(t);
days.appendChild(x);
}
for(var i=1;i<=getMonthDay();i++){
var x = document.createElement("LI");
var t = document.createTextNode(i);
x.appendChild(t);
days.appendChild(x);
}
}
function delDay(){
var list=document.getElementById("days");
var len=list.childNodes.length;
for(var i=0;i<len;i++){
list.removeChild(list.childNodes[0]);
}
}
function isnow(){
if(aimyear==year&&aimmonth==month){
days.childNodes[p].
}
}
function getMonthDay(){
if(aimmonth!=2){
return monthNum[aimmonth];
}else{
if(aimyear%4!=0||aimyear%100==0&&aimyear%400!=0){
return monthNum[aimmonth];
}
else return 29;
}
}
//main
init();看完上述內容，是不是對javascript實現日歷功能的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
