自定义的简单输出控制台

这个博客介绍了如何创建一个自定义的控制台,用于在网页中显示信息。通过JavaScript函数`toConsole`将数据输出到页面上的一个具有特定样式的div元素中,该元素在页面加载后由`createConsole`函数创建。博客还包含一个简单的HTML页面示例,展示了如何使用按钮点击和内联JavaScript触发控制台输出。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

    一:js源代码
  1. //信息控制台
  2. var infoConsole = null;
  3. //信息索引
  4. var infoIndex = 0;
  5. window.addEventListener("onload", createConsole, false);
  6. /**
  7.  * 将信息显示在控制台上
  8.  */
  9. function toConsole(data){
  10.     if(infoConsole == null){        
  11.         createConsole();
  12.     }     
  13.     var newLine = document.createElement("div");
  14.     infoConsole.appendChild(newLine);
  15.     var txt = document.createTextNode(++infoIndex + " : "+ data);
  16.     newLine.appendChild(txt);
  17. }
  18. /**
  19.  * 创建控制台
  20.  */
  21. function createConsole(){
  22.     if(infoConsole != null){
  23.         return;
  24.     }
  25.     
  26.     //创建控制台,并初始化控制台的样式样式
  27.     infoConsole = document.createElement("div");
  28.     var con_top_pos = window.innerHeight - 168;
  29.     var con_width = window.innerWidth - 20;
  30.     var icStyle = "font-family : arial, helvetica; " +
  31.         "font-size : 16px; " +
  32.         "color : nary; " +
  33.         "background-color : white; " + 
  34.         "border : ridge navy 3px; " + 
  35.         "width : "+ con_width +"px; " +
  36.         "height : 150px; " +
  37.         "top :" + con_top_pos + "px; " + 
  38.         "left : 0px; " + 
  39.         "margin : 2px; " + 
  40.         "position : absolute; " + 
  41.         "overflow : auto;";
  42.     infoConsole.setAttribute("style", icStyle);
  43.     
  44.     //显示控制台标题
  45.     var conTitle = document.createElement("div");    
  46.     conTitle.innerHTML = "<div align = 'center'>控制台输出</div>"
  47.     var titleStyle = "font-family : 宋体, normal, bold; "+
  48.         "color : blue; " + 
  49.         "background-color : silver";
  50.     conTitle.setAttribute("style", titleStyle);    
  51.     
  52.     infoConsole.appendChild(conTitle);
  53.     document.body.appendChild(infoConsole);    
  54. }
    二: 测试页面代码
  1. <%-- 
  2.     Document   : TestCusConsole
  3.     Created on : 2008-9-13, 18:15:35
  4.     Author     : Administrator
  5. --%>
  6. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  8. "http://www.w3.org/TR/html4/loose.dtd">
  9. <html>
  10.     <head>
  11.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  12.         <title>JSP Page</title>
  13.         <script src"CusConsole.js"></script>        
  14.     </head>
  15.     <body>
  16.         <h2 >Hello World!</h2>
  17.         <input type="button" value="我是一个按钮" onclick="toConsole('我想要的输出 1')"> 
  18.         <script>
  19.             var output= "我想要的输出 2";
  20.             toConsole(descripe)
  21.         </script>       
  22.     </body>
  23. </html>
   三:测试效果
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值