积极参与网站信息建设工作,html简单网页案例,wordpress改登陆界面,新手学做网站的书最近#xff0c;因需要用HTMLJAVASCRIPTCSS实现了一个日历控件#xff0c;效果如下#xff1a; 单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法#xff0c;分HMLCSSJAVASCRIPT三部分代码。
一、html代码
h1学习计划/h1…最近因需要用HTMLJAVASCRIPTCSS实现了一个日历控件效果如下 单击上月、下月进行日历切换。当前日期在日历中变颜色标注显示。还是老老套路、老方法分HMLCSSJAVASCRIPT三部分代码。
一、html代码
h1学习计划/h1 div classmonth ulli classprev上月/lili classnext下月/lili styletext-align:centerspan idmonthbox10月/spanbrspan stylefont-size:18px idyearbox2023年/span/li/ul/divul classweekdaysli星期一/lili星期二/lili星期三/lili星期四/lili星期五/lili星期六/lili星期日/li/ul ul classdays/ul 这段代码主要包含三个部分一是头部显示年月上月、下月切换按钮二是显示星期一到日三是日期容器存在日期。
二、CSS代码
* {box-sizing:border-box;}ul {list-style-type: none;}body {font-family: Verdana,sans-serif;} .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;cursor: pointer;} .month .next {float: right;padding-top: 10px;cursor: pointer;} .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%;}}这段代码主要定义了日历的样式一个主要的方法简述如下
box-sizingborder-box;就是将border和padding数值包含在width和height之内这样的好处就是修改border和padding数值盒子的大小不变。media screen and (max-width:720px) 。表示当浏览器的可视区域小于720px时候执行。
三、Javascript代码
script typetext/javascriptvar currentDatenew Date();function showDateList(){let year currentDate.getFullYear();let month currentDate.getMonth()1;let date currentDate.getDate();let firstWeekDay new Date(year,month-1,1).getDay();let monthDays new Date(year,month,0).getDate();let str;let daylength monthDaysfirstWeekDay-1;let startDay firstWeekDay-1if(firstWeekDay0) {daylength monthDays6;startDay6;}for (var i 0; i daylength ; i) {if(istartDay){str li/li}else{let today new Date();let todate (i-startDay1);console.log(date)if(year today.getFullYear() month today.getMonth()1 todate today.getDate()){str lispan classactivetodate/span/li;}else{str litodate/li;} }}document.querySelector(#monthbox).innerHTMLmonth月;document.querySelector(#yearbox).innerHTMLyear年;document.querySelector(.days).innerHTMLstr;}showDateList();document.querySelector(.next).onclick function(){currentDate.setMonth(currentDate.getMonth() 1);showDateList();}document.querySelector(.prev).onclick function(){currentDate.setMonth(currentDate.getMonth() - 1);showDateList();}/script 此段代码实现了当月日历情况单击上月、下月进行月份切换。 这样我们的日历就成型了完整代码如下请参考
!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentinitial-scale1.0, maximum-scale1.0, user-scalableno /title/titlestyle* {box-sizing:border-box;}ul {list-style-type: none;}body {font-family: Verdana,sans-serif;}.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;cursor: pointer;} .month .next {float: right;padding-top: 10px;cursor: pointer;} .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%;}}/style/head
bodyh1学习计划/h1 div classmonth ulli classprev上月/lili classnext下月/lili styletext-align:centerspan idmonthbox10月/spanbrspan stylefont-size:18px idyearbox2023年/span/li/ul/divul classweekdaysli星期一/lili星期二/lili星期三/lili星期四/lili星期五/lili星期六/lili星期日/li/ul ul classdays/ul script typetext/javascriptvar currentDatenew Date();function showDateList(){let year currentDate.getFullYear();let month currentDate.getMonth()1;let date currentDate.getDate();let firstWeekDay new Date(year,month-1,1).getDay();let monthDays new Date(year,month,0).getDate();let str;let daylength monthDaysfirstWeekDay-1;let startDay firstWeekDay-1if(firstWeekDay0) {daylength monthDays6;startDay6;}for (var i 0; i daylength ; i) {if(istartDay){str li/li}else{let today new Date();let todate (i-startDay1);console.log(date)if(year today.getFullYear() month today.getMonth()1 todate today.getDate()){str lispan classactivetodate/span/li;}else{str litodate/li;}}}document.querySelector(#monthbox).innerHTMLmonth月;document.querySelector(#yearbox).innerHTMLyear年;document.querySelector(.days).innerHTMLstr;}showDateList();document.querySelector(.next).onclick function(){currentDate.setMonth(currentDate.getMonth() 1);showDateList();}document.querySelector(.prev).onclick function(){currentDate.setMonth(currentDate.getMonth() - 1);showDateList();}/script
/body
/html
