自定义的简单输出控制台

最新推荐文章于 2025-05-14 16:47:46 发布

ckcs49

最新推荐文章于 2025-05-14 16:47:46 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： newline div button null border 测试

本文链接：https://blog.youkuaiyun.com/ckcs49/article/details/2954352

web 专栏收录该内容

2 篇文章

订阅专栏

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

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

在学习web过程中需要输出的时候，如果使用alert()弹出框，往往觉得麻烦，特别是
需要查看多个输出的时候，所以自己写了个简单的页面输出控制台显示需要的内容。
当需要显示内容的时候，调用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>

三:测试效果