console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.modal {
width: 200px;
height: 180px;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
border: solid #333 2px;
text-align: center;
border-radius: 5px;
}
</style>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div>点击显示按钮次数：<span id='showCount'>0</span></div>
<div>创建弹框次数：<span id='createCount'>0</span></div>
<script>
let showNum = 0,createNum = 0;
let getSingle = function(fn) {
let reuslt = null;
return function() {
return reuslt || (reuslt = fn.apply(this, arguments));
};
};
let createModal = function() {
// 创建统计
createNum = createNum + 1
createCount.innerHTML = createNum + '';
// 创建弹框
let div = document.createElement("div");
div.innerHTML = `
<h2>登录弹窗</h2>
<input type="text" placeholder="用户名">
<br>
<input type="password" placeholder="密码">
<br>
<button>登录</button>
`;
div.className = "modal";
document.body.appendChild(div);
return div;
};
let modal = getSingle(createModal);
show.onclick = function() {
// 点击按钮统计
showNum = showNum + 1
showCount.innerHTML = showNum + '';
// 弹框显示
let div = modal();
div.style.display = "block";
};
hide.onclick = function() {
let div = modal();
div.style.display = "none";
};
</script>
</body>
</html>