用html+css+javascript制作日历

  这是做好后的效果。不是很美观,还可以进一步完善。

  html+css代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>日历</title>
	<style type="text/css">
		#div1{
			width:425px;
			height:420px;
			border:1px solid gray;
		}
		#div2{
			width: 390px;
			height: 390px;
			margin:auto;
			margin-top: 15px;
		}
		#div21{
			width: 220px;
			height: 72px;
			margin:auto;
			line-height: 72px;
			margin:auto;
		}
		#div22{
			width: 355px;
			height: 310px;
			margin:auto;
		}
		#table1{
			width: 355px;
			height: 30px;
			border-spacing: 30px 33px;
		}
		#table2{
			width: 355px;
			height: 30px;
			line-height: 30px;
			border-spacing: 30px 0px;
		}
	</style>

</head>
<body>
<div id="div1">
	<div id="div2">
		<div id="div21">
		<button onclick="lastMon()">上一月</button>
		<text id="yearAndMon"></text>
		<button onclick="nextMon()">下一月</button>
		</div>
		<div id="div22">
			<table id="table2">
				<tr>
					<td>日</td>
					<td>一</td>
					<td>二</td>
					<td>三</td>
					<td>四</td>
					<td>五</td>
					<td>六</td>
				</tr>
			</table>
			<table id="table1"></table>
		</div>
	</div>
</div>
<script type="text/javascript" src="rili.js"></script>
</body>
</html>

   javascript代码如下:

    var nowDate=new Date();
	var nowYear=nowDate.getFullYear();
	var nowMonth=nowDate.getMonth()+1;
	//var month=(nowMonth<10?"0"+momth:month);
	var text=document.getElementById("yearAndMon");
	text.innerText=nowYear+"年"+nowMonth+"月";
	var monthDays1=[31,29,31,30,31,30,31,31,30,31,30,31];
	var monthDays2=[31,28,31,30,31,30,31,31,30,31,30,31]
function becomeDate(nowYear,nowMonth){
	var dt=new Date(nowYear,nowMonth-1,1);
	var firstDay=dt.getDay();
	var table=document.getElementById("table1");
	var monthDays=isRunNian();
	var rows=5;
	var cols=7;
	var k=1;
	for(var i=1;i<=rows;i++){
		var tri=table.insertRow();
		for(var j=1;j<=7;j++){
			var tdi=tri.insertCell();
			if(i==1&&i*j<firstDay+1)
				tdi.innerHTML="";
			else{
			if(k>monthDays[nowMonth-1])
				break;
			tdi.innerHTML=k;
			k++;
		}
			}

		}
}

function lastMon(){
	table1.innerHTML="";
	var text=document.getElementById("yearAndMon");
	if(nowMonth>1)
		nowMonth=nowMonth-1;
	else{
		nowYear--;
		nowMonth=12;
	}
	text.innerText=nowYear+"年"+nowMonth+"月";
	becomeDate(nowYear,nowMonth);
}

function nextMon(){
	table1.innerHTML="";
	if(nowMonth<12)
		nowMonth=nowMonth+1;
	else{
		nowYear++;
		nowMonth=1;
	}
		var text=document.getElementById("yearAndMon");
		text.innerText=nowYear+"年"+nowMonth+"月";
		becomeDate(nowYear,nowMonth);
}

function isRunNian(){
	if((nowYear%4==0||nowYear%400==0)&&nowYear%100!=0)
		return monthDays1;
	else
		return monthDays2;
}
becomeDate(nowYear,nowMonth);

  代码还存在很多不足之处,还请多多指教。

原文地址:https://www.cnblogs.com/njzy8856/p/8440050.html

时间: 2024-10-11 22:36:42

用html+css+javascript制作日历的相关文章

用html+css+javascript制作圆形时钟

制作好的效果如下: 表盘.刻度和数字全都是用html+css完成的. html+css代码如下: <!DOCTYPE html> <html> <head> <title>圆形时钟</title> <style type="text/css"> #div1{ width: 500px; height: 500px; border:1px solid black; border-radius: 50%; margin

【HTML+CSS+JavaScript】日历生成器

需求:实现日历生成器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志交友</title> <style> input { width: 50px; padding: 10px; font-size: 16px; border: 1px solid #ccc; } select { wid

利用avalon+原生js来制作日历空间(一)

url:http://zjingwen.github.io/SetTimeOutGoBlog/funui/fundate/index.html (如果打开过慢,或者打不开,原因你懂得.)一.思路 1.制作日历这种ui组件,我们第一步需要拿到的就是数据,我们需要知道例如今天属于,那一年.那一月.星期几. 2.数据的呈现形式应该是什么样子的,以我制作的这个为例,理性分析,以图为例,6X7的格子,我们要获得42个数据,其中当月数据占数组的中间,下月数据占数组的尾部,上月数据占数组的头部. 那么问题来了

JavaScript简易日历

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS+Javascript的那些框架

CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint  http://www.oschina.net/p/blueprintcss Elastic CSS布局  http://www.oschina.net/p/elastic CSS 预处理器 Stylus CSS预处理器 http://www.oschina.net/p/stylus LESS  CSS预处理 http://www.oschina.net/p/lesscss Web

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计 二手房: 通州豪华3居260万 二环稀缺2居

CSS3制作日历

目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class="year">2012</span> <span class="day">24</span> <span class="month">January</span> </div>

Java(随笔)——利用HTML,CSS,JavaScript,JQuery编写的简易计算器

一.利用刚学过的前端知识做一个简易的计算器里边使用到了HTML,CSS,JavaScript以及JQuery的知识代码如下:(1)利用CSS设计了计算器外形样式:(2)利用JavaScript实现了建议计算器的功能:代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <link rel="styl

网页性能之HTML,CSS,JavaScript

转载自AlloyTeam:http://www.alloyteam.com/2015/05/wang-ye-xing-neng-zhi-html-css-javascript/ 前言 html css javascript可以算是前端必须掌握的东西了,但是我们的浏览器是怎样解析这些东西的呢 我们如何处理html css javascript这些东西来让我们的网页更加合理,在我这里做了一些实验,总结起来给大家看看. 最简单的页面 1 2 3 4 5 6 7 8 9 <!DOCTYPE html>