仿TheNorthFace官網 購物車效果
阿新 • • 發佈：2021-11-11
<!DOCTYPE html>
<html>
<head>
<title>千鋒教育——做真實的自己,用心做教育</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<style>
div {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button>點我</button>
<div></div>
</body>
</html>
<script>
let oBtn = document.querySelector('button')
let oDiv = document.querySelector('div')
let flag = false;
let f = false;
oBtn.onmouseover = function () {
oDiv.style.display = 'block'
}
oBtn.onclick = function () {
oDiv.setAttribute('index', 1)
if (oDiv.getAttribute('index') == 1) {
this.onmouseout = null;
}
flag = !flag;
if (flag) {
oDiv.style.display = 'none'
flag = true;
} else {
oDiv.style.display = 'block'
falg = false;
}
}
oBtn.onmouseout = function () {
oDiv.style.display = 'none'
}
</script>