您的位置：首页技术文章
文章详情页

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

更多 QQ空间 微信 QQ好友 腾讯朋友 复制链接
【字号：大 中 小】日期：2023-10-30 14:00:30浏览：57作者：猪猪

日历

在学习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='https://www.haobala.com/bcjs/style.css' rel='external nofollow' ></head><body> <h1>CSS日历</h1> <div class='month'><ul><li onclick='change(-1)'>❮</li><li onclick='change(1)'>❯</li><li style='text-align: center'><span id='month'>August</span><br><span id='year'>2016</span></li></ul></div><ul id='weekdays'></ul><ul id='days'></ul></body><script type='text/javascript' src='https://www.haobala.com/bcjs/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;}} //maininit();

总结

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

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

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

标签： JavaScript
上一条：Javascript幻灯片播放功能实现过程解析下一条：JavaScript设计模式之观察者模式与发布订阅模式详解
相关文章：
1. 如何理解Python中包的引入2. Django中的DateTimeField和DateField实现3. Django后端按照日期查询的方法教程4. Java实现三子棋小游戏5. Python 使用 PyQt5 开发的关机小工具分享6. SpringBoot 开发提速神器 Lombok+MybatisPlus+SwaggerUI7. PHP开发大型Web应用浅析8. ASP中RecordSet Open和Connection.Execute一些区别与细节分享9. AspectJ领导人Adrian Colyer跳槽到Spring10. 怎样编写可维护的面向对象 JavaScript 代码
排行榜
如何理解Python中包的引入
如何理解Python中包的引入
1. Django中的DateTimeField和DateField实现
2. Django后端按照日期查询的方法教程
3. Django websocket原理及功能实现代码
4. Java实现三子棋小游戏
5. 深入分析PHP设计模式
6. AspectJ领导人Adrian Colyer跳槽到Spring
7. JavaScript实时更新当前的时间的示例代码
8. Django中template for如何使用方法
9. Python 使用 PyQt5 开发的关机小工具分享
10. SpringBoot 开发提速神器 Lombok+MybatisPlus+SwaggerUI
热门标签