当前位置：首页 > 建站教程 >

JavaScript之“日历”(基于javascript实现日历功能原理及代码实例)

GG网络技术分享 2025-03-18 16:14 2

JavaScript之“日历”

日历效果图

在前端网页设计HTML中,无论是css还是JavaScript都是非常重要的,但是有些动态效果只能由我们的js来实现,今天小编就给大家一个厉害的干货,希望大家多多关注小编呢!

js日历

十二个月份,下方是每个月内容框,当鼠标移入上放月份时,下方内容框自动变换内容.

各大博客网站,均有此JavaScript的代码实现,是基础入门必不可少的技能!

JavaScript代码

JavaScript部分

css部分

HTML部分

是不是跃跃欲试了呢?

小伙伴们要自己动动手敲一遍代码哦!前端代码也是实战出成果的!!!小编会一直支持大家学习,也希望大家多多支持小编哦,嘻嘻(#^.^#),关注小编

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

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

功能

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

可以突出显示今天的日期

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

实现

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

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

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

其他细节在代码中实现

代码

html代码

<!DOCTYPE html>

<html>

<head>

<title>CSS日历</title>

</head>

<body>

<h1>CSS日历</h1>

<ul>

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

</ul>

</div>

</ul>

</ul>

</body>

</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张

标签：

建站教程

JavaScript之“日历”(基于javascript实现日历功能原理及代码实例)