js案例--简易日历

最新推荐文章于 2022-11-22 03:43:31 发布

柠檬可乐@

最新推荐文章于 2022-11-22 03:43:31 发布

阅读量435

点赞数

分类专栏： js基础

本文链接：https://blog.youkuaiyun.com/weixin_45393981/article/details/97611677

版权

本文展示了一个使用JavaScript实现的简易日历案例。点击日历中的日期，不仅可以改变日期块的样式，还能在文本框中显示出所选日期的备注信息。涉及到的技能包括DOM操作、事件监听以及CSS样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
初始1的样式如图，之后点击每个小块样式发生同样变化，且在文本框中会显示对应的备注信息。

在这里插入图片描述

css样式：
< type=“text/css”>
body,
ul,
li,
h2,
p {
margin: 0px;
padding: 0px;
}

		#div1 {
			width: 200px;
			height: 200px;
			background: #ccc;
		}
		
		.calendar {
			width: 240px;
			height: 345px;
			background: #ccc;
			margin: auto;
		}
		
		.calendar ul {
			list-style: none;
			width: 232px;
			height: 260px;
			margin: 0px;
			padding: 0px;
		}
		
		.calendar ul li {
			width: 45px;
			height: 65px;
			background: #333;
			float: left;
			display: inline;
			margin-left: 11px;
			margin-top: 10px;
			border: 1px solid #ccc;
			text-align: center;
			color: #FFF;
		}
		
		.calendar ul li:hover {
			border: 1px solid #000;
		}
		
		.text {
			background: #fff;
			margin: 10px;
			padding-bo

最低0.47元/天解锁文章