在手機網頁上類比 js 控制台

標籤：style   blog   io   ar   color   os   sp   on   div   

在手機上類比 console  做一些簡單代碼調試

在工作機上編輯好代碼用QQ 之類的工具傳到 手機上在調試
當然你也可以嘗試用一隻手指寫代碼的壯舉

/****mobiDebuggerHelper.jsby cnblogs.com/ecalf*****/var mobiDebug = {    init:function(lauch){        var holder = document.createElement(‘div‘);        var toolbar = document.createElement(‘div‘);        var content = document.createElement(‘div‘);        var editor = document.createElement(‘div‘);        var board = document.createElement(‘div‘);                var textarea = document.createElement(‘textarea‘);        holder.appendChild(toolbar);        holder.appendChild(content);        content.appendChild(editor);        content.appendChild(board);            editor.appendChild(textarea);        holder.style.cssText = ‘position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;background:black;padding:30px 5px;display:none;font-size:14px;font-family:"Courier New";text-align:left;‘;        toolbar.style.cssText = ‘position:absolute;top:0;height:30px;text-align:right;line-height:30px;‘;        toolbar.innerHTML = ‘<button id="btnDebugClose">關閉</button><button id="btnDebugReload">重新整理</button><button id="btnDebugClear">清除</button><button id="btnDebugInput">編輯</button><button id="btnDebugSubmit">執行</button>‘;        content.style.cssText = ‘position:absolute;line-height:150%;top:30px;left:0;bottom:5px;right:0;background:white;color:black;‘;        board.style.cssText = ‘position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;display:none;‘;        textarea.style.cssText = ‘position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;‘;                document.body.appendChild(holder);        this.holder = holder;        this.editor = editor;        this.board = board;        var host = this;        var count = 0,timer=0;                //啟動調試        if(!lauch){            lauch = document.body;        }else if(typeof(lauch)==‘string‘){            lauch = document.getElementById(lauch);        }                lauch.onclick = function(){            if(host.holder.style.display!=‘none‘){ return;}                        if(!timer){                timer = setTimeout(function(){                    count = 0;                },5000);            }                        count+=1;            if(count==4){                host.show();                count = 0;                clearTimeout(timer);            }        };        document.querySelector(‘#btnDebugClose‘).onclick = function(){            host.show(false);        };        document.querySelector(‘#btnDebugReload‘).onclick = function(){            location.reload();        };        document.querySelector(‘#btnDebugInput‘).onclick = function(){            host.showEditor();        };        document.querySelector(‘#btnDebugSubmit‘).onclick = function(){            host.test();        };        document.querySelector(‘#btnDebugClear‘).onclick = function(){            if(host.editor.style.display!=‘none‘){                textarea.value=‘‘;            }else{                host.board.innerHTML=‘‘;            }        };                return this;    },        show:function(frag){        this.holder.style.display=frag===false?‘none‘:‘block‘;        return this;    },    showEditor:function(frag){        this.editor.style.display=frag===false?‘none‘:‘block‘;        this.board.style.display=frag===false?‘block‘:‘none‘;                return this;    },    showLog:function(frag){        this.board.style.display=frag===false?‘none‘:‘block‘;        this.editor.style.display = frag===false?‘block‘:‘none‘;        return this;    },    log:function(){// var mobiConsole = this; mobiConsole.log(‘hello world‘,‘color:red‘); the scope this is mobiConsole,not window         var p = document.createElement(‘p‘);        var args = arguments;        var color = args[args.length-1];        if((/^colou?r:/i).test(color)){            p.style.color = color.split(‘:‘)[1];            args = [].slice.apply(args,[0,-1]);        }else{            args = [].slice.apply(args,[0]);        }        var s = args.join(‘ ‘).replace(/[<>]/g,function(s){ return ‘&#‘+s.charCodeAt(0);});                p.innerHTML = s;        this.board.appendChild(p);        return this;    },    getCode:function(){        var code = this.editor.querySelector(‘textarea‘).value;        return new Function(code);    },    test:function(){        var fun = this.getCode();        fun.call(this);        this.showEditor(false).showLog();        return this;    }};


use like this...

mobiDebug.init($(".header .menu").get(0));

 

在手機網頁上類比 js 控制台