<!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. 编程之美_1.1 让CPU占用率曲线听你指挥

    听到有人说让要写一个程序,让用户来决定Windows任务管理器的CPU占用率. 觉得很好奇.但第一个想法就是写个死循环.哈哈.不知道具体的占用率是多少,但至少能保证在程序运行时,CPU的占用率终会稳定 ...

  2. 正确配置Linux系统ulimit值的方法【转】

    转自:http://www.cnblogs.com/ibook360/archive/2012/05/11/2495405.html 在Linux下面部署应用的时候,有时候会遇上Socket/File ...

  3. Centos6.5和Centos7 php环境搭建如何实现呢

    首先我们先查看下centos的版本信息 代码如下: #适用于所有的linux lsb_release -a#或者cat /etc/redhat-release#又或者rpm -q centos-rel ...

  4. PHP中Array关于数组的用法

    使用函数array_keys(),得到数组中所有的键,参数:数组 $arr=array();$arr['one']="one";$arr['two']="two" ...

  5. ACM题目————食物链

    题目描述 Description 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A吃B,B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并 ...

  6. ASP.net 上传

    if (FileUpload1.HasFile) { string filename = FileUpload1.PostedFile.FileName; string dir_file = &quo ...

  7. setprecision(int n)等格式函数用法 分类： POJ 2015-06-11 10:56 17人阅读 评论(0) 收藏

    **这些用法前最好用 #include <iostream>    //不要用iostream.h ,会出现好多问题 #include <iomanip> // io 流控制头 ...

  8. Uva 725 除法

    紫书P182 直接枚举 0~9 的全排列会超时,枚举fghij就可以了,计算出 abcde ,这里有一个新的函数,也可以不用咯,把每一位数据提取出来,while循环可以做到,这里的新的函数是,spri ...

  9. protobuf安装

    Protocol Buffers - Google's data interchange format 一.简介 名字已经很好的说明它是什么,这里还是要简单的介绍一下,protobuf是protoco ...

  10. linux后台开发排错常用工具

    一.前言 二.工具介绍 1.ps 查看进程信息 2.gstack 查看进程堆栈 3.pmap 查看程序分配的内存 4.ldd 查看程序用到的动态链接库 5.strace 用来跟踪和监视程序的每一个系统 ...