您的位置:首页 > Web前端 > JavaScript

JavaScript学习笔记:1、调试和隐藏元素

2016-03-15 23:45 609 查看
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Test Confirm</title>
</head>
<body>
<h1>Test Confirm</h1>

Hello
<button onclick="hide(this, true)">Hide1</button>
<button onclick="hide(this, false)">Hide2</button>
world
</body>
<script>
function moveon(){
var answer = confirm("Confirm ?"); //弹出确认框
console.log("answer:"+answer);
if (answer) {
hide(document.getElementById("debuglog"),true);
}
}
//定时器,毫秒为单位
setTimeout(moveon, 6000);

function hide(e, reflow) {
if (reflow) {
e.style.display = "none"; //隐藏元素,其所占用的空间也随之消失
} else {
e.style.visibility = "hidden"; //仅仅是让元素不可见,空间还在
}
}

//给页面添加调试信息
function debug(msg) {
var log = document.getElementById("debuglog");
if (!log) {
log = document.createElement("div");
log.id = "debuglog";
log.style.color = "red";
log.innerHTML = "<h1>Debug log</h1>";
document.body.appendChild(log);
}
var pre = document.createElement("pre");
var text = document.createTextNode(msg);
pre.appendChild(text);
log.appendChild(pre);
}
debug("Test debug");
</script>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: