首页 > 代码库 > 在手机网页上模拟 js 控制台
在手机网页上模拟 js 控制台
在手机上模拟 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 控制台
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。