<!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节点
function renderNode() {
let calendar = document.createElement('div')
calendar.className = 'calendar-box'
return calendar
}
然后还要有样式文件
.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。这样理解就知道如何引入了。