<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta charset="utf-8"> <title>H5输出条</title> <style> /*.samConsole{ 100%; height: 300px; overflow: hidden; position: fixed; top: 0; left: 0; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.8); } .samConsole-p{ 100%; padding: 6px; border-top: 1px solid rgba(255,255,255,0.1); margin: 0; margin-top: -1px; }*/ </style> </head> <body> 需求： 在移动端网页输出调试信息。 包括字符串，数组，对象。 对外提供的接口： 弹出/隐藏输出框；普通，警告，错误信息不同样式。 用例： samConsole.log("普通信息"); samConsole.warn("警告信息"); samConsole.error("错误信息"); samConsole.html("自定义html"); samConsole.open(); 打开输出框 samConsole.close(); 关闭输出框 samConsole.clear(); 清除输出信息 samConsole.config = { "maxHeight":"300" }; <!--<div class="samConsole"> <p class="samConsole-p"> aaaa </p> <p class="samConsole-p"> aaaa </p> </div>--> </body> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript"> var samConsole = (function(){ var $samConsole = $('<div class="samConsole"></div>'), $samConsole_p = $('<div class="samConsole-p"></div>'), $toggle = $('<div class="samConsole-toggle"">切换</div>'); var samConsole_style = '-webkit-transition:all 0.5s ease;transition:all 0.5s ease;100%;height:300px;overflow:hidden;-webkit-overflow-scrolling:touch;overflow-y:scroll;position:fixed;top:0;left:0;z-index:999999;font-size:14px;color:#fff;background:rgba(0,0,0,0.8);', samConsole_p_style = '100%;padding:6px;border-top:1px solid rgba(255,255,255,0.1);margin:0;margin-top:-1px;box-sizing: border-box;', toggle_style = 'position:fixed;right:0;top:0;100px;height:30px;border:1px solid #ddd;border-radius:6px;text-align:center;line-height:30px;'; var $body = $("body"); (function(){ $samConsole.attr("style",samConsole_style); $samConsole_p.attr("style",samConsole_p_style); $toggle.attr("style", toggle_style); $toggle.appendTo($samConsole); $toggle.on("click",function(){ if($samConsole.height() == 30){ $samConsole.height(300); } else{ $samConsole.height(30); } }); })(); var _samConsole = {}; _samConsole.log = function(info,style){ var $clone_samConsole_p = $samConsole_p.clone(); $clone_samConsole_p.text(JSON.stringify(info)); $clone_samConsole_p.appendTo($samConsole); if(typeof(style) !=="undefined"){ $(".samConsole-p").last().css(style); } $samConsole.scrollTop($samConsole.prop("scrollHeight")); }; _samConsole.warn = function(info){ _samConsole.log(info,{"color":"#faa732"}); }; _samConsole.error = function(info){ _samConsole.log(info,{"color":"#bd362f"}); }; _samConsole.html = function(info){ var $clone_samConsole_p = $samConsole_p.clone(); $clone_samConsole_p.html(info); $clone_samConsole_p.appendTo($samConsole); }; _samConsole.open = function(){ $body.prepend($samConsole); }; _samConsole.close = function(){ $body.remove($samConsole); }; _samConsole.clear = function(){ $samConsole.find(".samConsole-p").remove(); }; return _samConsole; })(); samConsole.open(); samConsole.log("normal"); samConsole.warn("warn"); samConsole.error("error"); samConsole.log([{"array":"yes"},{"object":"yes"}]); samConsole.log(999); samConsole.html('<div style="padding-left:30px">this is html code</div>'); samConsole.log('<div style="padding-left:30px">this is html code</div>'); $("body").on("click",function(){ samConsole.log("normal"); }); $("html").on("dbclick",function(){ samConsole.clear(); }); </script> </html>