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


Posted in Javascript onMay 07, 2020

日历

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
Vue简单实现原理详解
May 07 #Javascript
angular组件间通讯的实现方法示例
May 07 #Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 #Javascript
Vue双向绑定实现原理与方法详解
May 07 #Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 #Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 #Javascript
简单了解JavaScript弹窗实现代码
May 07 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
上班睡觉检讨书
2014/01/09 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2014年环保局工作总结
2014/12/11 职场文书
比较node.js和Deno
2021/04/27 Javascript
关于Python中进度条的六个实用技巧分享
2022/04/05 Python