JS 调试倒计时功能

—

by

FeanLau
in

程序原始的代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>debug JS</title>
	<style type="text/css">
		h1 {
			font-size: 50px;
			text-align: center;
		}
	</style>
</head>
<body>
<h1>Time:<span>10</span></h1>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var el = $("h1 span").first();
		var i = 9;

		var interval = setInterval(function() {
			el.html(i);
			i--;
			if(i <= 0) {
				clearInterval(interval);
			}
		}, 1000);
	});
</script>

</body>
</html>

然后加入了一行代码，console.log (i) 在浏览器的控制台打印输出 i 的变量值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>debug JS</title>
	<style type="text/css">
		h1 {
			font-size: 50px;
			text-align: center;
		}
	</style>
</head>
<body>
<h1>Time:<span>10</span></h1>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var el = $("h1 span").first();
		var i = 9;

		var interval = setInterval(function() {
			el.html(i);
			i--;
			console.log(i);
			if(i <= 0) {
				clearInterval(interval);
			}
		}, 1000);
	});
</script>

</body>
</html>

运行的结果如下：

对与 console 调试的样式进行细化，          

            console.log(i);
            console.info(i);
            console.debug(i);
            console.warn(i);
            console.error(i); 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>debug JS</title>
	<style type="text/css">
		h1 {
			font-size: 50px;
			text-align: center;
		}
	</style>
</head>
<body>
<h1>Time:<span>10</span></h1>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var el = $("h1 span").first();
		var i = 9;

		var interval = setInterval(function() {
			el.html(i);
			i--;
			console.log(i);
			console.info(i);
			console.debug(i);
			console.warn(i);
			console.error(i);
			if(i <= 0) {
				clearInterval(interval);
			}
		}, 1000);
	});
</script>

</body>
</html>

调试的输出结果会有不同，运行结果如下:

chrome 浏览器这里还可以对输出的调试信息进行分类。

这里关键就是 console.log 的介绍，详细的还要看具体的 console 的方法