基于javascript实现日历功能原理及代码实例

基于javascript实现日历功能原理及代码实例

1
2020-05-28 16:53:46

在学习javascript过程中,有一个javascript实例---css日历,感觉挺有趣的,在它的基础上增加了一些简单的功能(差点哭辽)。

功能

按照传统日历方式显示该月的每一天。

可以突出显示今天的日期

可以翻阅上一个月和下一个月的日历

实现

step1 传统日历布局样式:分别将年份与月份、星期、该月的全部天数采用列表布局,排列组成传统日历的样式。

step2 初始化和更新月份:先将列表清空(debug过程中,有一个发现,初始化的列表便存在的一个childNodes,该项目中需要清空),然后再填入前导空白(为了和星期能够对应),再填入具体某一个月的天数。

step3 通过document获取列表对象,改变今天对应行的样式(className变化)来突出显示。

其他细节在代码中实现

代码

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>

 

<h1>CSS日历</h1>

<div class="month">

<ul>

<li class="prev" onclick="change(-1)">❮</li>

<li class="next" onclick="change(1)">❯</li>

<li style="text-align: center"><span id="month">August</span><br>

<span style="font-size: 18px" 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].style="padding: 5px;background: #1abc9c;color: white !important;"

}

}

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目前算是起步,最最基础的皮毛学会了,起码不会的东西可以通过去找函数,查资料学习,可能实现的有些复杂,但是最终能够表达出自己的构想,听开心的。下一步,再写一些实例去看jquery。

css仍是不足,有些东西可能会有冲突,无法实现想要的东西,仍要回去学基础的东西,最重要的一点是多练,积累经验,总结规律和思想。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本网站。

基于javascript实现日历功能原理及代码实例 (https://www.wpmee.com/) javascript教程 第1张

喜欢这个文章就点个赞分享给好友吧~

END

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持