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

最新推荐文章于 2024-09-18 15:54:57 发布

wxh_无香花自开

最新推荐文章于 2024-09-18 15:54:57 发布

阅读量536

点赞数

分类专栏： javascript 文章标签： js javascript

本文链接：https://blog.csdn.net/qdx411324962/article/details/50901149

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>Test Confirm</title>
</head>
<body>
	<h1>Test Confirm</h1>
	
	Hello
	<button οnclick="hide(this, true)">Hide1</button>
	<button οnclick="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>