HTML & JS 动态日历表

最新推荐文章于 2024-07-10 23:14:41 发布

我要搭一班会爆炸的飞机

最新推荐文章于 2024-07-10 23:14:41 发布

阅读量4.9k

点赞数 6

分类专栏： HTML JS CSS 文章标签： HTML JS CSS

本文链接：https://blog.csdn.net/weixin_42213195/article/details/102700928

版权

这篇博客展示了如何利用HTML和JavaScript实现一个动态的日历表。通过提供的代码示例，包括HTML结构、JS逻辑以及CSS样式，读者可以了解并实践创建这样一个交互式的日历功能。完成后的日历不仅具有基本的展示功能，还能进行动态更新。

摘要由CSDN通过智能技术生成

使用HTML和JS 创建一个动态日历表

先看效果图
在这里插入图片描述
Html + JS 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/Canlendar.css"/>
		<title>动态显示日历</title>
	</head>
	<body>
		<table>
			<td style="width:9%" onclick="ShowCalendar(\''20210401'\')">
				<table style="background-color: #408080;color:#FFFFFF;">
					<tr>
						<td id="showCalendar" onclick="clickCanlendar()">点击显示</td>  
					</tr>
				</table>
			</td>
		</table>
	
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script>
			function clickCanlendar(){
    
				var date = new Date();
				var month = date.getMonth();
				var day = date.getDate();
				if(month >= 1 && month <= 9){
    
					month = '0' + month
				}
				if(day >= 1 && day <= 9){
    
					day = '0' + day;
				};
				var currentDate = date.getFullYear() + month + day;
				alert(date);
				ShowCalendar(currentDate);
			}
			
			
			function ShowCalendar(SY_OPERATION){
    
				//判断exit 节点是否存在
				if($("#exit").length > 0){
    
					console.log(1);
					$("#exit").detach();
					return;
				}else{
    
					console.log(2);
					var Calendar = '<div id= "exit" class="main clearfix" style="position: absolute;background:white;">' +
								       '<div class="menu clearfix tomove"> '+
								           ' <a class="select-prev fl" href="javascript:;">&lt;</a>' + 
								           ' <div class="select month fl pr">' + 
								                '<div class="select-text"><span class="year-text" value="2016">2016年</span><span class="month-text" value="">1月</span></div>' + 
								           ' </div>' + 
								            '<a class="select-next fl" href="javascript:;">&gt;</a>' + 
								            '<a class="select-today fl" href="javascript:;">返回今天</a>' + 
								            '<div class="time fl">10:40:05</div>' + 
								        '</div>' + 
								        '<ul class="title">' + 
								           ' <li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li>' + 
								        '</ul>' + 
								        '<ul class="table">' + 
								           ' <li><span>1</span></li><li><span>2</span>' + 
								       ' </ul>' + 
								    '</div>';
									
				    $(Calendar).insertBefore("#showCalendar");
					console.log(3);
											    
			        $(function(){
    
				        var init =

最低0.47元/天解锁文章

我要搭一班会爆炸的飞机

关注

6
点赞
踩
46

收藏

觉得还不错? 一键收藏
7
评论
HTML & JS 动态日历表

使用HTML和JS 创建一个动态日历表先看效果图先看效果图Html代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/Canlendar.css"/> <t...
复制链接

扫一扫

专栏目录