幽灵资源网 Design By www.bzswh.com
日历
在学习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)">"next" onclick="change(1)">"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="/UploadFiles/2021-04-02/show.js">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,日历
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...