极客观点
项目管理
HarmonyOS
如何再一次点击按钮OK键，让弹出层消失？
<!DOCTYPE html>
<html lang="en">
<head>
<title>弹出层2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Alert2.css">
<script type="text/javascript">
function show() {
var contentObj = document.createElement("div");
contentObj.setAttribute("class","content");
//设定contentobj 的 innerHTML
var html = '<div class="first">';
html += '<div class="second">接下来就是见证奇迹的时刻！</div>';
html += '<div class="third">';
html += '<input type="button" value="OK" onclick="ok()">';
html += '<input type="button" value="NO" onclick="no()">';
html += '</div>';
html += '</div>';
contentObj.innerHTML = html;
document.body.appendChild(contentObj);
contentObj.style.display ="block";
}
function ok() {
var content = document.getElementsByClassName('content')[0].style;
content.display = "none";
var i=0;
var changeColor = function (node) {
node.style.backgroundColor = "#99" + i.toString(16);
if(i<16){
i++;
setTimeout(function () {changeColor(node)},200)
}
// else{
// i=0;
// setTimeout(function () {changeColor(node)},400)
// }
};
changeColor(document.body);
}
function no() {
var content = document.getElementsByClassName('content')[0].style;
content.display = "none";
}
</script>
</head>
<body>
<input type="button" value="start" onclick="show()">
</body>
</html>接下来是css代码
body{
/*background-color:#cccc00;*/
background-color: #99FF00;
margin: 0;
padding: 0;
}
.content{
display: none;
}
.first{
width: 350px;
height: 200px;
/*margin-top: 60px;*/
margin: 0 auto;
background-color: cyan;
border:4px solid purple;
text-align: center;
}
.second{
font-size: 24px;
margin-top: 50px;
color: red;
}
.third{
margin-top: 50px;
}
.third > input{
margin-left: 20px;
}
将
改为
也就说将：获取contentObj的方式
contentObj上升为全局变量
通过Dom操作获取content
通过函数参数，传递点击的事件（事件中有触发事件的对象input）
通过上述其中的一个方法可解决上述的问题.