原生js实现简单日历的制作

最新推荐文章于 2023-10-13 15:00:14 发布
最新推荐文章于 2023-10-13 15:00:14 发布
阅读量1.8k 收藏 27
点赞数 11
分类专栏： 工具 文章标签： 日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43673669/article/details/87885695
版权

效果图

在这里插入图片描述

代码块

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script>
/*
var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间
*/
var weekday=new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var monthdays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var mydate=new Date();
var myyear=mydate.getFullYear();
var mymouth=mydate.getMonth();
var myday=mydate.getDate();//获取当前日期
var myweek=mydate.getDay();//获取当前星期几
if(myyear%4==0&&myyear%100==0||myyear%400==0){
	mouthdays[1]=29;
}
mydate.setDate(1);
var m=mydate.getDay();//获取当前月一号星期几
//document.write(mydate);
document.write(m);
document.write("<table width='400' border='1'>");
document.write("<tr align='center'><td colspan='7' >"+myyear+"年"+(++mymouth)+"月"+myday+"日"+" </td></tr>");
var n=1;
//var l=0
mymouth--;
document.write("<tr>");
for(var i=0;i<7;i++)
{
	document.write("<td>");
	document.write(weekday[i]);
	document.write("</td>");		
}
document.write("</tr>");
for(var i=0;i<5;i++){	
	if(m>0){
		document.write("<tr>");
		for(var j=0;j<m;j++){
			document.write("<td>");
			document.write("&nbsp;");
			document.write("</td>");	
		}
		for(var k=m;k<7;k++){
			if(n==myday){
				document.write("<td style='color:red'>");
				document.write(n);
				document.write("</td>");
			}
			else{
				document.write("<td >");
				document.write(n);
				document.write("</td>");
			}
			n++	
		}
		document.write("</tr>");
		m=0;
	}
	if(m==0){
		document.write("<tr>");
		for(var k=0;k<7;k++){
			if(n>monthdays[mymouth]){
				document.write("<td>");
				document.write("&nbsp;");
				document.write("</td>");
			}
			else{
				if(n==myday){
					document.write("<td style='color:red'>");
					document.write(n);
					document.write("</td>");
				}
				else{
					document.write("<td >");
					document.write(n);
					document.write("</td>");
				}
				n++;
			}		
		}
		document.write("</tr>");
	}
}
document.write("</table>");
</script>
</body>
</html>
时光丨荏苒
关注
  • 11
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现日历效果
12-09
本文实例为大家分享了js实现日历效果的具体代码，供大家参考，具体内容如下 <!doctype html> <html> <head> <meta charset="gb2312"> <title>万年历</title> [removed] var lunarInfo = new Array( 0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6,
js简单的日历
weixin_44645930的博客
06-18 444
实现简单的日历 HTML代码 上个月 2020 下个月 2月 日 一 二 三 四 五 六 css代码 主要是js代码 首先创建当月的日历 获取时间函数得到现在的年月日，获取到当月的天数，利用for循环创建标签 在利用点击事件调用setmonth函数获取下个月 ...
js实现日历 完整版
最新发布
bobringtheboys的博客
10-13 710
【代码】js实现日历 完整版。
原生JavaScript实现自定义日历
qq_41812656的博客
09-22 792
以下内容只返回js数据结构，css样式可以用grid布局自行开发，后续会把农历相关的数据也给补充上，如有错误，欢迎补充~~
JavaScript制作年历
weixin_63812273的博客
05-31 309
<td>日</td><td>一</td><td>二</td><td>三</td><td>四</td>';html += '<tr><th colspan="7">' +y +'年' + m +' 月</th></tr>';var year = parseInt(prompt('输入年份:','2018'));html += '<td>五</td><td>六</td>制作年历
【JavaScript】制作日历
m0_49442965的博客
10-13 1757
【代码】【JavaScript】制作日历。
【JavaScript实训】-- 制作年历
一只大数据专业的傻猪猪
05-24 3591
获取指定年份1月1日的星期数值；拼接每个月份的表格；获取月份m共有多少天；
用 JavaScript 编写日历
allway2的博客
05-27 4559
概述 在本教程中，我将介绍使用几行 JavaScript 将日历渲染到网页上。日历将包括仅使用普通旧 JavaScript的月份和年份的下拉列表。流程如下： 将月份渲染到下拉列表中 将年份渲染到下拉列表中 呈现当前选择的月/年组合的天数 更改月份/年份时重新绘制日历 更改月份和/或年份将重新绘制日历以匹配给定月份和年份的正确日期。 如果你是 JavaScript 的初学者，或者只是需要更多的洞察力，我强烈推荐你可以在亚马逊上购买的 JavaScript Ninja 的秘密。这是一本扎实的读物，本
javascript画全年日历
sdxjwkq01的博客
01-16 1299
drawDateByYear()方法画出全年的日历，也可以用drawDateByMonth()方法画出某个月的单月日历，默认将日历dom插入到body里，也可以通过传入parent修改日历容器，例如某个div，d.drawDateByYear(2023,5,function(v){高亮显示的是今天的日期和标记要高亮显示的日期，也添加了点击事件的钩子，自己可以实现钩子函数，从而操作点击的日期值。}为点击回调的钩子函数，这个是点击相应日期后alert()以下被点击的日期，这个自己根据业务需要实现。
原生js制作日历控件实例分享
10-22
主要为大家详细介绍了原生js制作日历控件的具体代码，一个日历控件实例，原生js开发，感兴趣的小伙伴们可以参考一下
js代码实现日历功能，超给力demo
06-17
超给力的日历demo，可以根据自己的需要灵活调整代码
js实现的日历控件(经典好用)
06-16
js实现的日历控件 js实现的日历控件 js实现的日历控件 js实现的日历控件
日历控件,完全用CSS+JS实现
03-26
NULL 博文链接：https://squll369.iteye.com/blog/1135733
用JavaScript制作的日历
03-24
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //创建一个数组,用于存放每个月的天数 function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11)  { this[0] = m0; this[1] = m1; this[2] = m2; this[3] = m3; this[4] = m4; this[5] = m5; this[6] = m6; this[7] = m7; this[8] = m8; this[9] = m9; this[10] = m10; this[11] = m11; } //实现月历 function calendar() { var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"; var today = new Date(); var thisDay; var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); year = today.getYear() +1900; thisDay = today.getDate(); if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; nDays = monthDays[today.getMonth()]; firstDay = today; firstDay.setDate(1); testMe = firstDay.getDate(); if (testMe == 2) firstDay.setDate(0); startDay = firstDay.getDay(); document.write("<div id='rili' style='position:absolute;width:140px;left:300px;top:100px;'>")  document.write("<TABLE width='217' BORDER='0' CELLSPACING='0' CELLPADDING='2' BGCOLOR='#0080FF'>") document.write("<TR><TD><table border='0' cellspacing='1' cellpadding='2' bgcolor='Silver'>"); document.write("<TR><th colspan='7' bgcolor='#C8E3FF'>"); var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); var now = new Date(); document.writeln("<FONT STYLE='font-size:9pt;Color:#330099'>" + "公元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>"); document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>日</FONT></TH>"); document.writeln("<th bgcolor='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>一</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>二</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>三</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>四</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>五</FONT></TH>"); document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:9pt;Color:White'>六</FONT></TH>"); document.writeln("</TR><TR>"); column = 0; for (i=0; i<startDay; i++) { document.writeln("\n<TD><FONT STYLE='font-size:9pt'> </FONT></TD>"); column++; } for (i=1; i<=nDays; i++) { if (i == thisDay) { document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:9pt;Color:#ffffff'><B>") } else { document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:9pt;font-family:Arial;font-weight:bold;Color:#330066'>"); } document.writeln(i); if (i == thisDay) document.writeln("</FONT></TD>") column++; if (column == 7) { document.writeln("<TR>");  column = 0; } } document.writeln("<TR><TD COLSPAN='7' ALIGN='CENTER' VALIGN='TOP' BGCOLOR='#0080FF'>") document.writeln("<FORM NAME='clock' onSubmit='0'><FONT STYLE='font-size:9pt;Color:#ffffff'>") document.writeln(" 现在时间:<INPUT TYPE='Text' NAME='face' ALIGN='TOP'></FONT></FORM></TD></TR></TABLE>") document.writeln("</TD></TR></TABLE></div>"); } </SCRIPT>
js日历控件实现及日程安排
08-07
js写的日历显示的控件，显示本月日历，及上一月下一月日历查看，可以扩展实现当月日程安排、
多样式js日历控件选择器代码
06-24
多样式js日历控件选择器代码是一款原生js制作的年月日时间选择器代码。
多样式js日历控件选择器特效代码
03-20
多样式js日历控件选择器代码是一款原生js制作的年月日时间选择器代码。
多样式js日历控件选择器代码.zip
07-05
多样式js日历控件选择器代码是一款原生js制作的年月日时间选择器代码。
js原生实现pc端日历组件
qq_23128255的博客
05-19 1536
原生js实现日历组件，不依赖其他插件
原生js实现一个简单的限时秒杀demo
05-30
好的，我可以提供一个简单的限时秒杀demo的原生JavaScript实现。以下是基本的HTML和CSS代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>限时秒杀</title> <style> .seckill-item { border: 1px solid #ccc; margin: 10px; padding: 10px; width: 200px; height: 200px; float: left; } .seckill-item img { width: 100%; height: 120px; } .seckill-item h3 { font-size: 16px; margin: 10px 0; } .seckill-item .price { font-size: 20px; color: red; margin: 10px 0; } .seckill-item .stock { margin: 10px 0; } .seckill-item .btn-seckill { background-color: #f00; color: #fff; border: none; padding: 5px 10px; margin-top: 10px; cursor: pointer; } </style> </head> <body> <div id="seckill-list"> <div class="seckill-item"> <img src="img/1.jpg" alt="商品1"> <h3>商品1</h3> <div class="price">￥99.00</div> <div class="stock">库存: 100</div> <button class="btn-seckill" data-id="1" data-price="99.00" data-stock="100" data-start="2022/01/01 00:00:00" data-end="2022/01/01 23:59:59">立即秒杀</button> </div> <div class="seckill-item"> <img src="img/2.jpg" alt="商品2"> <h3>商品2</h3> <div class="price">￥199.00</div> <div class="stock">库存: 50</div> <button class="btn-seckill" data-id="2" data-price="199.00" data-stock="50" data-start="2022/01/01 00:00:00" data-end="2022/01/01 23:59:59">立即秒杀</button> </div> </div> <script src="seckill.js"></script> </body> </html> ``` 在这个页面中，我们设置了两个商品的信息，包括商品名称、价格、库存量和秒杀活动的开始时间和结束时间。每个商品都有一个“立即秒杀”按钮，它包含了商品的相关信息，通过data-*属性来存储。 以下是JavaScript代码的实现： ```javascript // 获取秒杀按钮列表 var seckillBtns = document.querySelectorAll('.btn-seckill'); // 循环遍历秒杀按钮列表，为每个按钮添加点击事件 seckillBtns.forEach(function(btn) { btn.addEventListener('click', function() { // 获取秒杀商品的相关信息 var id = this.getAttribute('data-id'); var price = this.getAttribute('data-price'); var stock = this.getAttribute('data-stock'); var start = this.getAttribute('data-start'); var end = this.getAttribute('data-end'); // 判断当前时间是否在秒杀活动时间范围内 var now = new Date(); var startTime = new Date(start); var endTime = new Date(end); if (now < startTime || now > endTime) { alert('秒杀活动还未开始或已经结束！'); return false; } // 判断商品库存是否充足 if (stock <= 0) { alert('商品库存不足！'); return false; } // 发送秒杀请求 alert('恭喜，秒杀成功！'); // 更新商品库存 stock--; this.setAttribute('data-stock', stock); this.parentNode.querySelector('.stock').innerHTML = '库存: ' + stock; }); }); ``` 这段代码的主要功能是为每个“立即秒杀”按钮添加点击事件，当用户点击按钮时，首先获取商品的相关信息，然后判断当前时间是否在秒杀活动时间范围内，以及商品库存是否充足。如果满足条件，就发送秒杀请求，更新商品库存信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值