溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用原生JavaScript實現日歷功能代碼實例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成品顯示，可左右切換月份
html 代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>移動端日歷</title> <link rel="stylesheet" href="./css/calendar.css" rel="external nofollow" > </head> <body> <div id="calendarElement"> <div class="header"> <div class="prev"> <i class="previ"></i> </div> <div class="date"></div> <div class="next"> <i class="nexti"></i> </div> </div> <div class="content"> <div class="week"> <div>日</div> <div>一</div> <div>二</div> <div>三</div> <div>四</div> <div>五</div> <div>六</div> </div> <div class="weekMany clearfloat"> </div> </div> </div> <script src="./js/calendar.js"></script> </body> </html>
css代碼
*{
margin: 0;
padding: 0;
}
/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
#calendarElement{
margin: 100px auto;
width: 80%;
box-shadow: 0 0 10px #999999;
}
#calendarElement>.header{
height: 80px;
background-color: coral;
display: flex;
border-bottom: 1px solid #fff;
}
#calendarElement>.header .prev{
width: 20%;
position: relative;
}
#calendarElement>.header .prev i{
width: 20px;
height: 20px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -10px;
transform: rotate(45deg);
border: 2px solid #fff;
border-right: none;
border-top: none;
}
#calendarElement>.header .next{
position: relative;
}
#calendarElement>.header .next i{
width: 20px;
height: 20px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -10px;
transform: rotate(45deg);
border: 2px solid #fff;
border-left: none;
border-bottom: none;
}
#calendarElement>.header .date{
width: 60%;
font-size: 22px;
line-height: 80px;
color: #fff;
text-align: center;
}
#calendarElement>.header .next{
width: 20%;
}
#calendarElement>.content >.week{
box-sizing: border-box;
width: 100%;
height: 40px;
color: #fff;
display: flex;
padding: 0 1%;
}
#calendarElement>.content >.week >div{
width: 14%;
text-align: center;
line-height: 40px;
}
#calendarElement>.content >.weekMany{
padding-top: 5px;
padding-bottom: 15px;
}
#calendarElement>.content >.weekMany>div{
float: left;
width: 14.28%;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 14px;
}
#calendarElement>.content >.weekMany>.otherMonth{
color: #999999
}JS代碼
var currentTime=""; //當前時間年月日
var dom=document.querySelector("#calendarElement"); //承載元素
var color="";
getCurrentTime();
randomColor();
showDay();
function getCurrentTime(){ //獲取當前時間
var time=new Date();
var year=time.getFullYear();
var month=time.getMonth()+1;
var day=time.getDate();
if(month<10){
month="0"+month
}
var data=year+ "-" +month;
currentTime=year+ "-" +month+"-"+day;
document.querySelector(".date").innerHTML=data;
};
dom.addEventListener("click",function(e){
if(e.target.className=="previ" || e.target.className=="prev"){
getMonths("prev")
}else if(e.target.className=="nexti" || e.target.className=="next"){
getMonths("next")
}
})
function showDay(){
var html="";
var MonthOne=currentTime;
var yearMonth=currentTime.split('-').slice(0,2);
yearMonth=yearMonth.join('-');
document.querySelector(".date").innerHTML=yearMonth;
MonthOne=MonthOne.split('');
MonthOne.splice(8,2,"01")
MonthOne=MonthOne.join('');
var monthLen=getMonthLength(MonthOne); //每月有多少天
var weekMany=new Date(MonthOne).getDay(); //每月一號是星期幾
html+=getPrevMonthHtml(weekMany);
html+=getNowMonthHtml(monthLen);
html+=getNextMonthHtml(weekMany,monthLen);
document.querySelector(".weekMany").innerHTML=html;
}
function getPrevMonthHtml(weekMany){
var html="";
var lastMonth=currentTime.substring(0, 7); //得出年月
lastMonth=lastMonth.split('-')
if(lastMonth[1]-1==0){
lastMonth[1]=12;
lastMonth[0]=lastMonth[0]-1;
}else if(lastMonth[1]-1<10){
lastMonth[1]="0"+(lastMonth[1]-1);
}
lastMonth=lastMonth.join('-');
var monthLen=getMonthLength(lastMonth);
var start=monthLen-weekMany;
for(var i=start+1;i<=monthLen;i++){
html+='<div class="otherMonth day" data-date="'+lastMonth+'-'+i+'">'+i+'</div>';
}
return html;
}
function getNowMonthHtml(monthLen){
var html="";
var MonthOne=currentTime.substring(0, 7); //得出年月
var today=currentTime.split('-')[2];
for(var i=1;i<=monthLen;i++){
if(i<10){
var q="0"+i;
}else{
var q=i;
}
if(i==today){
html+='<div class="thisMonth day" data-date="'+MonthOne+'-'+q+'">'+i+'</div>';
}else{
html+='<div class="thisMonth day" data-date="'+MonthOne+'-'+q+'">'+i+'</div>';
}
}
return html;
}
function getNextMonthHtml(weekMany,monthLen){
var html="";
var daynum=weekMany+monthLen;
if(daynum%7==0){
return html;
}else{
var num=daynum%7;
var lessNum=7-num; //差幾天
var lowerMonth=currentTime.substring(0, 7); //得出年月
lowerMonth=lowerMonth.split('-')
if(lowerMonth[1]+1==13){
lowerMonth[1]="0"+1;
lowerMonth[0]=+lowerMonth[0]+1;
}else{
lowerMonth[1]=+lowerMonth[1]+1;
if(lowerMonth[1]<10){
lowerMonth[1]="0"+lowerMonth[1];
}
}
lowerMonth=lowerMonth.join('-');
for(var i=1;i<=lessNum;i++){
if(i<10){
var q="0"+i
}
html+='<div class="otherMonth day" data-date="'+lowerMonth+'-'+q+'">'+i+'</div>';
}
}
return html;
}
function getMonths(around){
if(around=="prev"){
currentTime=currentTime.split('-');
currentTime[1]=currentTime[1]-1;
if(currentTime[1]==0){
currentTime[1]="12"
currentTime[0]=+currentTime[0]-1
}
if(currentTime[1]<10){
currentTime[1]="0"+currentTime[1]
}
currentTime=currentTime.join('-');
showDay();
}else if(around=="next"){
currentTime=currentTime.split('-');
currentTime[1]=+currentTime[1]+1;
if(currentTime[1]==13){
currentTime[1]="1"
currentTime[0]=+currentTime[0]+1
}
if(currentTime[1]<10){
currentTime[1]="0"+currentTime[1]
}
currentTime=currentTime.join('-');
showDay();
}
}
function getMonthLength(date) { // 獲取每月有多少天
let d = new Date(date)
// 將日期設置為下月一號
d.setMonth(d.getMonth()+1)
d.setDate('1')
// 獲取本月最后一天
d.setDate(d.getDate()-1)
return d.getDate()
}
function randomColor(){ //隨機顏色
color = '#'+Math.floor(Math.random()*16777215).toString(16);
if(color.length==6){
color+="0"
}
document.querySelector(".header").style.backgroundColor=color;
document.querySelector(".week").style.backgroundColor=color;
};以上是“如何使用原生JavaScript實現日歷功能代碼實例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
