在学习web过程中需要输出的时候,如果使用alert()弹出框,往往觉得麻烦,特别是
需要查看多个输出的时候,所以自己写了个简单的页面输出控制台显示需要的内容。
当需要显示内容的时候,调用toConsole(data) 便可以方便的显示需要的内容,便于检查程序的运行状态。
注:在ie中无法正常显示,我是js的初学者,希望知道原因的
朋友提些改进的建议。
一:js源代码
二: 测试页面代码
三:测试效果

需要查看多个输出的时候,所以自己写了个简单的页面输出控制台显示需要的内容。
当需要显示内容的时候,调用toConsole(data) 便可以方便的显示需要的内容,便于检查程序的运行状态。
注:在ie中无法正常显示,我是js的初学者,希望知道原因的
朋友提些改进的建议。
一:js源代码
- //信息控制台
- var infoConsole = null;
- //信息索引
- var infoIndex = 0;
- window.addEventListener("onload", createConsole, false);
- /**
- * 将信息显示在控制台上
- */
- function toConsole(data){
- if(infoConsole == null){
- createConsole();
- }
- var newLine = document.createElement("div");
- infoConsole.appendChild(newLine);
- var txt = document.createTextNode(++infoIndex + " : "+ data);
- newLine.appendChild(txt);
- }
- /**
- * 创建控制台
- */
- function createConsole(){
- if(infoConsole != null){
- return;
- }
- //创建控制台,并初始化控制台的样式样式
- infoConsole = document.createElement("div");
- var con_top_pos = window.innerHeight - 168;
- var con_width = window.innerWidth - 20;
- var icStyle = "font-family : arial, helvetica; " +
- "font-size : 16px; " +
- "color : nary; " +
- "background-color : white; " +
- "border : ridge navy 3px; " +
- "width : "+ con_width +"px; " +
- "height : 150px; " +
- "top :" + con_top_pos + "px; " +
- "left : 0px; " +
- "margin : 2px; " +
- "position : absolute; " +
- "overflow : auto;";
- infoConsole.setAttribute("style", icStyle);
- //显示控制台标题
- var conTitle = document.createElement("div");
- conTitle.innerHTML = "<div align = 'center'>控制台输出</div>"
- var titleStyle = "font-family : 宋体, normal, bold; "+
- "color : blue; " +
- "background-color : silver";
- conTitle.setAttribute("style", titleStyle);
- infoConsole.appendChild(conTitle);
- document.body.appendChild(infoConsole);
- }
- <%--
- Document : TestCusConsole
- Created on : 2008-9-13, 18:15:35
- Author : Administrator
- --%>
- <%@page contentType="text/html" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>JSP Page</title>
- <script src= "CusConsole.js"></script>
- </head>
- <body>
- <h2 >Hello World!</h2>
- <input type="button" value="我是一个按钮" onclick="toConsole('我想要的输出 1')">
- <script>
- var output= "我想要的输出 2";
- toConsole(descripe)
- </script>
- </body>
- </html>
