<!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. PHP获取不了React Native Fecth参数的解决办法是怎么样呢？

    fetch('https://mywebsite.com/endpoint/', { method: 'POST',headers: {'Accept': 'application/json','Co ...

  2. AngularJS 用 Interceptors 来统一处理 HTTP 请求和响应

    Web 开发中,除了数据操作之外,最频繁的就是发起和处理各种 HTTP 请求了,加上 HTTP 请求又是异步的,如果在每个请求中来单独捕获各种常规错误,处理各类自定义错误,那将会有大量的功能类似的代码 ...

  3. 过滤器（Filter）案例：检测用户是否登陆的过滤器

    *****检测用户是否登陆的过滤器:不需要用户跳转到每个页面都需要登陆,访问一群页面时,只在某个页面上登陆一次,就可以访问其他页面: 1.自定义抽象的 HttpFilter类, 实现自 Filter ...

  4. javaScript去除空格或换行

    js 去掉空格.回车.换行 1 releaseDesc = releaseDesc.replace(/\ +/g,"").replace(/[\r\n]/g,"" ...

  5. Unity-Animato深入系列---FloatValue阻尼

    回到 Animator深入系列总目录 Animator的SetFloat接口可以设置阻尼,并且4种类型变量只有float是支持阻尼的. public void SetFloat(int id, flo ...

  6. google prettify 代码高亮显示

    引入js和css文件 下载地址 http://files.cnblogs.com/jaday/prettify.zip js文件代码 !function(){var q=null;window.PR_ ...

  7. CentOS 安装SolrCloud

    1.什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时候是不 ...

  8. HTML 的 <div> 和 <span> 标签

    这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...

  9. for循环以及复杂if else 例题

    for循环语句 例一. 请输入一个整数,求1加到这个整数的和 例二 请从1到100 以内和7 有关的数字 例三,请设计一个游戏,前20关每关的分数是本身,21到30 是10分每关.31到40是20分每 ...

  10. Http 请求

    public static string HttpGet(string url) { HttpWebRequest request = (HttpWebRequest)WebRequest.Creat ...