<!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{

            width: 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{

            width: 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;width: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 = 'width: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;width: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>

基于jQuery的H5调试条的更多相关文章

  1. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  2. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  3. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  4. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  5. 基于jQuery滑动分步式进度导航条代码

    分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=& ...

  6. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  8. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  9. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

随机推荐

  1. VC中常用的宏

        我们在VS环境中开发的时候,会遇到很多宏定义,这些宏可以应用到代码中,或用于编译.工程选项等设置,总之是我们开发中必不可少的工具,有必要做一个总结.有些宏是C/C++定义的,有些宏是VC环境预 ...

  2. satis 搭建 Composer 私有库的方法

    安装 satis 命令行下执行: php create-project composer/satis --stability=dev --keep-vcs . 配置 创建 satis.json 文件, ...

  3. PHP常用的数组相关处理函数

    [数组中常用的多种遍历方式] [for 和 foreach 略] [while() . list() .each() 组合循环遍历数组] each()函数 a. 需要一个数组作为参数 b. 返回来的也 ...

  4. SpringMVC项目，启动项目怎么总是报找不到log4j.properties文件

    具体操作:右键项目---->properties--->Java Build Path--->source--->Add Folder --->选择log4.proper ...

  5. 【转】MySQL5安装的图解（mysql-5.0.27-win32.zip）

    转载地址:http://blog.csdn.net/xssh913913/article/details/1713182 MySQL5安装的图解(最新版) http://hi.baidu.com/yu ...

  6. Linux下启动Oracle

    切换到oracle用户 su - oracle   启动监听 lsnrctl start   确认是不是想要启动的oracle实例 echo $ORACLE_SID   如果不是,切换SID  ora ...

  7. Semi-prime H-numbers(筛法)

    Semi-prime H-numbers Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8069 Accepted: 3479 ...

  8. 欧拉回路-Door Man 分类： 图论 POJ 2015-08-06 10:07 4人阅读 评论(0) 收藏

    Door Man Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2476 Accepted: 1001 Description ...

  9. 《python核心编程》读书笔记--第16章 网络编程

    在进行网络编程之前,先对网络以及互联网协议做一个了解. 推荐阮一峰的博客:(感谢) http://www.ruanyifeng.com/blog/2012/05/internet_protocol_s ...

  10. oneThink安装出错解决

    在Wampserver3.0.0(apache2.4.17+php5.6.15+mysql5.7.9)版本中oneThink安装用1.1github版,不要用1.1开发版,不然安装的时候数据库导入时b ...