Hi everyone, I am 梅巴哥er. This article shares a few simple interview questions.
A thinking problem
<!--
案例要求：
1，点击show按钮，隐藏提示框，再点击，显示提示框
2，点击提示框的确定按钮，提示“我要退出了”，过3秒后提示框消失
3，点击取消按钮，清除提示框
-->
<!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>提示框案例</title>
<style>
.modal {
width: 200px;
height: 200px;
border: 1px solid pink;
margin-top: 10px;
}
</style>
</head>
<body>
<button class="on-off">Show</button>
<div class="modal">
<header>提示框</header>
<section>这里是提示内容</section>
<footer>
<button class="define">确定</button>
<button class="cancel">取消</button>
</footer>
</div>
<script type="text/javascript">
var show = document.querySelector('.on-off')
var modal = document.querySelector('.modal')
var define = document.querySelector('.define')
var cancel = document.querySelector('.cancel')
var flag = true
// show的点击事件
show.addEventListener('click', function() {
flag ? modal.style.display = 'none' : modal.style.display = 'block'
flag = !flag
})
function delay() {
// 点击确定按钮的回调函数
setTimeout(() => {
console.log('bye-bye');
modal.style.display = 'none'
},3000)
}
function quit(callback) {
console.log('我要退出了')
callback()
}
// 确定按钮的点击事件
define.addEventListener('click', function() {
quit(delay)
})
// 取消按钮的点击事件
cancel.addEventListener('click', function() {
modal.remove() // 删除自身节点
})
</script>
</body>
</html>
the above.