javascript简易万年历

最新推荐文章于 2023-10-25 00:01:00 发布
最新推荐文章于 2023-10-25 00:01:00 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 2-Web 文章标签： javascript function 日历 date border object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuhan520/article/details/6635541
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 简单万年历 </title>
<script language="javascript">
<!--
	//构造Date对象，并返回当前的年月日
	var dDate = new Date();
	var dCurMonth = dDate.getMonth();
	var dCurDayOfMonth = dDate.getDate();
	var dCurYear = dDate.getFullYear();
	//创建Object对象
	var objPrevElement = new Object();
	//选择字体颜色
	function fToggleColor(myElement){
		var toggleColor = "#ff0000";
		if(myElement.id == "calDateText"){
			if (myElement.color == toggleColor){
				myElement.color = "";
			}else{
				myElement.color = toggleColor;
			}
		}else if (myElement.id == "calCell"){
			for (var i in myElement.children ){
				if (myElement.children[i].id == "calDateText"){
					if (myElement.children[i].color == toggleColor){
						myElement.children[i].color="";
					}else{
						myElement.children[i].color = toggleColor;
					}
				}
			}
		}
	}

	//鼠标单击日期时
	function fSetSelectedDay(myElement){
		if(myElement.id == "calCell"){
			if(!isNaN(parseInt(myElement.children["calDateText"].innerText))){
				myElement.bgColor = "#c0c0c0";
				objPrevElement.bgColor="";
				document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
				objPrevElement = myElement;
			}
		}
	}

	//返回一个月中第几天的值
	function fGetDaysInMonth(iMonth,iYear){
		var dPrevDate = new Date(iYear,iMonth,0);
		return dPrevDate.getDate();
	}

	//构造日历
	function fBuildCal(iYear,iMonth,iDayStyle){
		var aMonth = new Array();
		aMonth[0] = new Array(7);
		aMonth[1] = new Array(7);
		aMonth[2] = new Array(7);
		aMonth[3] = new Array(7);
		aMonth[4] = new Array(7);
		aMonth[5] = new Array(7);
		aMonth[6] = new Array(7);

		//设置星期的显示方式
		if(iDayStyle == 1){
			aMonth[0][0] = "Sun";
			aMonth[0][1] = "Mon";
			aMonth[0][2] = "Tue";
			aMonth[0][3] = "Wed";
			aMonth[0][4] = "Thu";
			aMonth[0][5] = "Fri";
			aMonth[0][6] = "Sat";
		}else{
			aMonth[0][0] = "Su";
			aMonth[0][1] = "Mo";
			aMonth[0][2] = "Tu";
			aMonth[0][3] = "We";
			aMonth[0][4] = "Th";
			aMonth[0][5] = "Fr";
			aMonth[0][6] = "Sa";
		}

		//构造日期函数
		var dCalDate = new Date(iYear , iMonth-1 ,1 );
		var iDayOfFirst = dCalDate.getDay();	//返回星期值
		//返回这个月中的第几天值
		var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
		var iVarDate = 1;
		var i,d,w;
		for (d = iDayOfFirst;d<7 ;d++ ){
			aMonth[1][d] = iVarDate;
			iVarDate++;
		}

		//向日历列表中添加数字
		for (w =2 ; w<7 ; w++ ){
			for (d = 0 ; d<7 ; d++ ){
				if (iVarDate<=iDaysInMonth){
					aMonth[w][d] = iVarDate;
					iVarDate++;
				}
			}
		}
		return aMonth;
	}

	//在页面中显示日历表格
	function fDrawCal(iYear , iMonth, iCellWidth , iCellHeight , sDateTextSize , sDateTextWeight ,iDayStyle){
		var myMonth;
		myMonth = fBuildCal(iYear,iMonth,iDayStyle);
		document.write("<table border='1'>");
		document.write("<tr>");
		document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][0] + "</td>");
		document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][1] + "</td>");
		document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][2] + "</td>");
		document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][3] + "</td>");
		document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][4] + "</td>");
		document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][5] + "</td>");
		document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px ; FONT-WEIGHT :bold'>" + myMonth[0][6] + "</td>");
		document.write("</tr>");
		for (w =1; w<6 ;w++ ){
			document.write("<tr>");
			for (d=0 ;d<7 ;d++ ){
				document.write("<td align='center' valign='top' width='"+iCellWidth+"' height='"+iCellHeight+"' id='calCell' style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)>");
				if(!isNaN(myMonth[w][d])){
					document.write("<font id='calDateText' style='CURSOR:Hand ; FONT+FAMILY:Arial ; FONT-SIZE:"+sDateTextSize+";FONT-WEIGHT:"+sDateTextWeight+"' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
				}else{
					document.write("<font id='calDateText' style='CURSOR:Hand ; FONT+FAMILY:Arial ; FONT-SIZE:"+sDateTextSize+";FONT-WEIGHT:"+sDateTextWeight+"' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' οnclick=fSetSelectedDay(this)> </font>");
				}
				document.write("</td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");
	}

	//刷新指定年月日的日历内容
	function fUpdateCal(iYear,iMonth){
		myMonth = fBuildCal(iYear,iMonth);
		objPrevElement.bgColor = "";
		document.all.calSelectedDate.value="";
		for (w =1;w<6 ;w++ ){
			for (d=0;d<7 ;d++ ){
				if (!isNaN(myMonth[w][d])){
					calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
				}else{
					calDateText[((7*w)+d)-7].innerText = "";
				}
			}
		}
	}

-->
</script>
</head>

<body bgcolor="f9fcff">
<script language="javascript" for=window event=onload>
<!--
	//页面加载时，则执行以下代码
	var dCurDate = new Date();
	//在日历列表中指定当前的月份
	frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
	//在日历列表中指定当前的年份
	for (i=0;i<frmCalendarSample.tbSelYear.length ;i++ ){
		if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear()){
			frmCalendarSample.tbSelYear.options[i].selected = true;
		}
	}
-->
</script>

<form name="frmCalendarSample" method="post" action="">
	<input type="hidden" name="calSelectedDate" value=""/>
	<table border="1">
		<tr>
			<td>
				<select name="tbSelMonth" οnchange='fUpdateCal(frmCalendarSample.tbSelYear.value,frmCalendarSample.tbSelMonth.value)'>
					<option value="1">January</option>
					<option value="2">February</option>
					<option value="3">March</option>
					<option value="4">April</option>
					<option value="5">May</option>
					<option value="6">June</option>
					<option value="7">July</option>
					<option value="8">August</option>
					<option value="9">September</option>
					<option value="10">October</option>
					<option value="11">November</option>
					<option value="12">December</option>
				</select>
				<select name="tbSelYear" οnchange='fUpdateCal(frmCalendarSample.tbSelYear.value,frmCalendarSample.tbSelMonth.value)'>
					<option value="2004">2004</option>
					<option value="2005">2005</option>
					<option value="2006">2006</option>
					<option value="2007">2007</option>
					<option value="2008">2008</option>
					<option value="2009">2009</option>
					<option value="2010">2010</option>
					<option value="2011">2011</option>
					<option value="2012">2012</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<script language="javascript">
				var dCurDate = new Date();	//构造当前Date对象
				//调用fDrawCal函数，在页面中显示当前日期的日历
				fDrawCal(dCurDate.getFullYear(),dCurDate.getMonth()+1,30,30,"12px","bold",1);
				</script>
			</td>
		</tr>
	</table>				
</form>
</body>
</html>

Sugite
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JavaScript代码制作网页年历
yechuan_wink的博客
06-17 5702
年历 使用js代码制作网页年历生成 <!doctype html> <html> <head> <meta charset="utf-8"> <title>年历</title> <script> var year = parseInt(prompt('输入年份：','2019')); document.write(calendar(year));
【JavaScript实训】-- 制作年历
一只大数据专业的傻猪猪
05-24 3694
获取指定年份1月1日的星期数值；拼接每个月份的表格；获取月份m共有多少天；
JavaScript最简单的方式写万年历
qq_57218752的博客
12-17 4590
万年历 话不多说，直接进入主题，刚开始想写万年历的时候也想过要不要写一个复杂一点的出来，后来哦脑子容量有限就不自作自受了，毕竟bug太容易写出来了调试也确实烦的一批。 下面先看看预想的效果图吧· 我想的是先弄出一个弹框，输入指定的年份，然后在实现万年历的日历，没有具体的功能，主要懒得写，就简简单单的出一个日历就好了。 下面就是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
JavaScript制作年历
m0_57202083的博客
08-22 2512
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>制作年历</title> <style> body{text-align:center;} .box{margin:0 auto;width:880px;} .title{background: #ccc;} table{height:200px;width:200p.
JavaScript的Date对象制作万年历
yinghanhanhan的博客
12-10 854
在页面上添加两个标签，用来显示年份和月份；同时添加两个标签，一个用来显示星期，另一个用来显示日期。在JavaScript脚本中动态添加年份和月份，获取当前日期的年份和月份，显示到标签上。根据标签上显示的value值，获取当前选中年月的第一天是星期几，并绘制空标签。获取当前选中的年月一共有多少天，并绘制对应的标签。为两个标签设置onchange时间。选择不同的年份和月份，在页面中显示当前月的日历。
javascript制作万年历
lanheit的博客
04-13 2958
万年历的制作 js代码块 注意’引号里面的html标签不能有多余的空格，否则程序会报错’ var year = prompt("请输入年份："); var content = document.getElementById("content"); var html = ''; for (let i = 0; i < 12; i++) { html += '<table class="table">'; html += '<tr class="title"> &l
Javascript实现万年历（日历表）
南 墙
12-09 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main { width: 800px; margin: 0 auto; } ...
javascript万年历控件
11-24
JavaScript万年历控件是一种基于Web的交互式日历组件，它允许用户在网页上方便地选择日期。这种控件通常由JavaScript编程语言编写，利用HTML和CSS进行样式设计，以实现动态显示和操作日期的功能。万年历控件不仅支持...
javascript简易购物车
10-14
JavaScript简易购物车是一种常见的Web应用功能，用于模拟真实世界中的购物体验。在Web开发中，JavaScript扮演着关键角色，因为它负责处理用户交互、动态更新页面内容以及与服务器进行异步通信。在这个项目中，我们将...
JavaScript日历
04-27
一款原生JavaScript，手写的日历功能。具体上下翻页以及点击日历事件等
JavaScript 实现农历（万年历）
01-17
几个用JavaScript实现的万年历。
JavaScript网页版万年历
11-12
在实现JavaScript万年历的过程中，开发者会遇到一些关键知识点，主要包括： 1. **DOM操作**：JavaScript万年历的界面构建依赖于HTML文档对象模型（DOM）。开发者需要使用JavaScript来动态创建和修改HTML元素，如...
JavaScript开发万年历源代码
最新发布
05-29
本例子设计一个即可以查看公历，又可以查看农历的万年历，并且在日期的下面显示了公历与农历的各个节日以及农历的节气 本例子主要利用Data对象来获取日期的相关信息,并用lunar对象指定日期转化成相应的农历日期.
JavaScript万年历.zip
08-28
JavaScript万年历是一个基于JavaScript编程实现的动态日历控件，它可以用于网页中展示日期，并提供各种日期操作功能。在JavaScript中，万年历通常利用DOM操作、事件处理以及时间对象来实现。以下是对这个主题的详细...
JavaScript实现万年历(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-25 641
JavaScript实现万年历(附完整源码)
笔记4：用JavaScript做万年历
m0_48263770的博客
04-22 491
【代码】笔记4：用JavaScript做万年历。
JS简易日历实现
热门推荐
sixteen_cicle的博客
11-01 3万+
效果图 实现点 01.表格行数问题 首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列 getDay()方法了，该方法返回数组[0-6]中的一个数字，0代表星期天，1代表星期一，2代表星期二，以此类推。并不是每个月都是31天，所以我们得创建一个包含12个月份的数组，每个元素代表每个月份所包含的天数。但是2月份比较特殊，闰年的2月份有29天
JavaScript实现简单日历
滴滴滴的博客
08-08 9424
实现效果： 根据所选择的年月，列出当月对应是周几，效果图如下： 实现思路： 1、使用select标签保存年月的所选菜单。使用table标签保存当月天数，表头为固定的周日周一等。 2、使用option对象，给年月循环赋值。 3、将每月的天数保存到数组中，根据所选的年月获取当月的天数，以及当月一号对应周几，对应周几就在第一行先打印几个空格，然后从一号开始依次打印当月天数。 4、刷新年月...
javascript打印万年历
11-05
使用JavaScript编写代码可以实现打印万年历的功能。 首先，我们可以创建一个函数来打印一个指定年份的万年历。这个函数需要接收一个参数，即要打印的年份。 在函数内部，我们可以使用JavaScript的Date对象来获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值