一个用js实现控制台控件的代码

 更新时间:2007年09月04日 11:46:04   作者:  
复制代码 代码如下:

<body margin="0">
</body>
<script>
    function Console(width,height,command)
    {
        var container=document.createElement("div");
        this.container=container;

        container.runtimeStyle.width=(width);
        container.runtimeStyle.height=(height);
        container.runtimeStyle.margin="0px";
        container.runtimeStyle.backgroundColor="black";
        container.runtimeStyle.fontFamily="Terminal";
        container.runtimeStyle.color="white";
        container.runtimeStyle.fontSize="16px";
        this.output=document.createElement("div");
        container.appendChild(this.output);
        container.innerHTML+="js>"
        this.input=document.createElement("input");
        container.appendChild(this.input);
        this.input.runtimeStyle.backgroundColor="black";
        this.input.runtimeStyle.borderWidth="0px";
        this.input.runtimeStyle.color="white";
        this.input.runtimeStyle.fontFamily="Terminal";
        this.input.runtimeStyle.width="90%"
        this.input.runtimeStyle.fontSize="16px"
        this.input.runtimeStyle.position="relative";
        this.input.runtimeStyle.top="2px";
        command=command||function(str)
        {

            var e;
            try{
                var r=eval(str);
            } catch(e) {
                return "Bad command";
            }
            return r;

        }

        this.input.command=function()
        {
            this.parentNode.childNodes[0].innerHTML+=this.value+'<br/>'
            this.parentNode.childNodes[0].innerHTML+=(command(this.value)+"<br/>")

        }
        this.input.onkeyup=new Function("e","e=e||event;if(e.keyCode!=13)return;this.command();this.value='';");
        this.appendto=function(parent)
        {
            parent.appendChild(this.container);
        }
        container=null;
    }

    //var db=new DrawingBoard(100,100)
    //db.drawLine([5,5],[36,44],"red")
    //document.body.appendChild(db.container);
    var c=new Console("100%","100%");
    c.appendto(document.body);

</script>

相关文章

  • JS中产生20位随机数以0-9为例也可以是a-z A-Z

    JS中产生20位随机数以0-9为例也可以是a-z A-Z

    本节主要介绍了JS如何产生随机数,本例产生20位随机数以0-9为例也可以是a-z A-Z,需要的朋友可以参考下
    2014-08-08
  • JavaScript查看数据返回值的方法

    JavaScript查看数据返回值的方法

    console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法,它们的主要区别在于目的、使用场景以及展示方式,本文将给大家介绍JavaScript 中怎么看数据返回值,需要的朋友可以参考下
    2024-07-07
  • Javascript非构造函数的继承

    Javascript非构造函数的继承

    本文给大家介绍的是不使用构造函数实现"继承",非常的简单,小伙伴们仔细了解下就可以非常熟悉了。
    2015-04-04
  • 在layui下对元素进行事件绑定的实例

    在layui下对元素进行事件绑定的实例

    今天小编就为大家分享一篇在layui下对元素进行事件绑定的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript如何接收并显示字节流中的图片

    JavaScript如何接收并显示字节流中的图片

    这篇文章主要介绍了JavaScript如何接收并显示字节流中的图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 基于Typescript与Axios的接口请求管理详解

    基于Typescript与Axios的接口请求管理详解

    接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法,这篇文章主要给大家介绍了基于Typescript与Axios的接口请求管理的相关资料,需要的朋友可以参考下
    2021-09-09
  • javascript实现设置、获取和删除Cookie的方法

    javascript实现设置、获取和删除Cookie的方法

    这篇文章主要介绍了javascript实现设置、获取和删除Cookie的方法,涉及javascript操作cookie的常用技巧,非常简单实用,需要的朋友可以参考下
    2015-06-06
  • JS异步宏队列微队列原理详解

    JS异步宏队列微队列原理详解

    这篇文章主要介绍了JS异步宏队列微队列原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • OpenLayers3实现鼠标移动显示坐标

    OpenLayers3实现鼠标移动显示坐标

    这篇文章主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 利用threejs实现一个简易的泊车功能

    利用threejs实现一个简易的泊车功能

    这篇文章主要为大家详细介绍了如何利用threejs实现一个简易的泊车功能,文中的示例代码讲解详细,对大家的学习和工作有一定的帮助,感兴趣的小伙伴可以动手尝试一下
    2024-01-01

最新评论