乘风原创程序

  • 基于javascript实现日历功能原理及代码实例
  • 2020/5/13 10:00:58
  • 日历

    在学习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仍是不足,有些东西可能会有冲突,无法实现想要的东西,仍要回去学基础的东西,最重要的一点是多练,积累经验,总结规律和思想。