js开发的日历组件如何引入需要的html页面呢？

南漂一时2024-08-16 16:19

javascript 复制代码

<!DOCTYPE html>
<html>

<head>
	<title>日历页面</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="./dialoge.css">
	<script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
	<script src="./dialoge.js"></script>
	<!-- <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script> -->
	<!-- <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
	<style type="text/css">
		.today {
			width: 500px;
			text-align: center;
			margin-top: 10px;
			margin-bottom: 10px;
			/* border: solid 1px red; */
		}

		#container {
			position: relative;
		}
	</style>
</head>

<body>
	<div class="today" id="today">
		今天是那天？
		<input type="text" id="myInput" value="ceshi" onblur="handleBlur()">
	</div>
</body>
<script type="text/javascript">


	function onload(params) {
		// 获取input元素
		var input = document.getElementById('myInput');

		// 添加聚焦事件监听器
		input.addEventListener('focus', function () {
			let div = renderNode()
			console.log('Input is focused!');
			console.log(div);
			var myInput = document.getElementById('today');
			myInput.appendChild(div);
		});

	}
	function handleBlur(params) {
		var parentDiv = document.getElementById('today');
		var childDiv = document.querySelector('.calendar-box');
		if (childDiv && childDiv.parentNode) {
			parentDiv.removeChild(childDiv);
		}
	}
	onload()
</script>

</html>

这是需要引入的html页面

然后还需要一个js函数。这个函数，负责渲染生成dom节点

javascript 复制代码

function renderNode() {
   let calendar = document.createElement('div')
   calendar.className = 'calendar-box'
   return calendar
}

然后还要有样式文件

css 复制代码

.calendar-box{
    width: 400px;
    height: 400px;
    border: solid 1px red;
    background-color: gray;
    position: absolute;
    top: 50px;
    left: 50px;
}


/* #floating-div {
    position: absolute;
    top: 0;
    left: 0;
} */

复制代码

<link rel="stylesheet" href="./dialoge.css">
<script src="./dialoge.js"></script>

把生成的文件，在需要日历的页面引入即可。

相当于react中，有类组件和函数组件，这里就相当于函数组件，用函数生成的组件，就是函数生成的dom。这样理解就知道如何引入了。