一个简单的移动端APP日志打印工具

本文介绍了一款基于jQuery的移动端日志打印工具,该工具能够实现在页面中固定位置显示可拖动的日志按钮,并通过点击按钮来查看或隐藏日志信息。日志内容包括时间戳及具体消息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个简单的移动端APP日志打印工具
使用说明:依赖jQuery,如果不希望有此依赖,可以自己修改代码,只是比较繁琐

使用方法:

  1. 引入JQuery任意版本
  2. 复制此段代码到页面(本人习惯新建一个script标签存放代码,方便删除)
  3. 在需要打印日志的地方使用(tools.log(‘这是一条日志’))
  4. 页面上会fixed定位一个按钮,按钮可以拖动,点击按钮可打开关闭全屏的日志信息
  5. 效果如图所示
    截图
    直接上代码,比较简单,欢迎大神们留言做出优化~谢谢
// an Easy Logging Tool
;(function($,window,undefined){
    try{

     function Drag(id) {
        var _this = this;
        //var oDiv = document.getElementById(id);
        var oDiv = document.querySelector(id);
        
        var bodyW = (document.body && document.body.clientWidth)  || window.innerWidth || window.outerWidth;
        var bodyH = (document.body && document.body.clientHeight) || window.innerHeight || window.outerHeight;
        var inX = 0;
        var inY = 0;
        _this.dragDistance = {x:0,y:0}
        _this.down = function(point){
            _this.start_left = _this.move_left = point.clientX;
            _this.start_top  = _this.move_top  = point.clientY;
            inX = _this.start_left - oDiv.offsetLeft;
            inY = _this.start_top  - oDiv.offsetTop;
            _this.dragDistance = {x:0,y:0}
        }
        _this.move = function(point){
                _this.move_left = point.clientX;
                _this.move_top  = point.clientY;
                _this.left = _this.move_left - inX;
                _this.top  = _this.move_top  - inY;
                oDiv.style.left = _this.left + 'px';
                oDiv.style.top  = _this.top  + 'px';

                _this.dragDistance = {
                    x : Math.abs(_this.move_left - _this.start_left),
                    y : Math.abs(_this.move_top  - _this.start_top),
                }
        };
        _this.up = function(point){
            document.ontouchmove = null;
            document.ontouchend = null;

            document.onmousemove = null;
            document.onmouseup = null;

            if(_this.left < 50) _this.left = 0,oDiv.style.left = _this.left + 'px';
            if(_this.top  < 50) _this.top  = 0,oDiv.style.top  = _this.top  + 'px';
            if(_this.left > (bodyW - 50 - 50)) _this.left = bodyW - 50,oDiv.style.left = _this.left + 'px';
            if(_this.top  > (bodyH - 50 - 50)) _this.top  = bodyH - 50,oDiv.style.top  = _this.top  + 'px';
        }
        //移动端点击
        oDiv.ontouchstart = function (e) {
            var oEvent = e || event,point = oEvent.touches[0];
            _this.down(point);
            document.ontouchmove = function (e) {
                var oEvent = e || event,point = oEvent.touches[0];
                _this.move(point);
            }
            document.ontouchend = function (e) {
                var oEvent = e || event,point = oEvent.touches[0];
                _this.up(point);
            }
            return false;
        };
        //PC端点击
        oDiv.onmousedown = function (e) {
            var oEvent = e || event,point = oEvent;
            _this.down(point);
            document.onmousemove = function (e) {
                var oEvent = e || event,point = oEvent;
                _this.move(point);
            }
            document.onmouseup = function (e) {
                var oEvent = e || event,point = oEvent;
                _this.up(point);
            }
            return false;
        }
    }
    var tools = {};
    tools.initLog = function(){
        if($('#logRecord').length == 0){$('body').append('<div id="logRecord" class="hid"></div>');};
        if($('#logRecordBtn').length == 0){$('body').append('<div id="logRecordBtn" class="logRecordBtn"></div>');};
        //设置按钮和日志DIV样式
        $('#logRecordBtn').css({
            display : 'block',
            position : 'fixed',
            border: "11px solid rgba(255, 255, 255, 0.4)",
            left : '0',
            top : '0',
            width : '50px',
            height : '50px',
            "z-index" : '999999999999',
            "background-color": "rgba(159, 159, 159,0.4)",
            "border-radius": "50%"
        });
        $('#logRecord').css({
            display : 'none',
            position : 'fixed',
            left : '0',
            top : '0',
            width : '100%',
            height : '100%',
            "z-index" : '99998',
            "background-color" : 'rgba(250, 250, 250, 0.9)',
            "padding" : "5px",
            "overflow" : "auto",
            "z-index": "9999999999999999999"
        });
        $('body').on('touchmove','.logRecordBtn',function(){
            window.recBtnHasMoved = true;
        });
        $('body').on('mousemove','.logRecordBtn',function(){
            window.recBtnHasMoved = true;
        });
        $('body').on('touchend','.logRecordBtn',function(){
            //tools.log(JSON.stringify(drag_btn.dragDistance))
            if(drag_btn.dragDistance.x < 10 && drag_btn.dragDistance.y < 10){
                $('#logRecord').toggleClass("hid");
                if($('#logRecord').hasClass('hid')){
                    $('#logRecord').css("display","none");
                }else{
                    $('#logRecord').css("display","block");
                }
            }
            window.recBtnHasMoved = false;
            
        });
        $('body').on('mouseup','.logRecordBtn',function(){
            //tools.log(JSON.stringify(drag_btn.dragDistance))
            if(drag_btn.dragDistance.x < 10 && drag_btn.dragDistance.y < 10){
                $('#logRecord').toggleClass("hid");
                if($('#logRecord').hasClass('hid')){
                    $('#logRecord').css("display","none");
                }else{
                    $('#logRecord').css("display","block");
                }
            }
            window.recBtnHasMoved = false;
            
        });
        var drag_btn = new Drag('#logRecordBtn');
    };
    tools.log = function(str,a,b,c,d){
        str = '' + str + (a?a:'') + (b?b:'') + (c?c:'') + (d?d:'');
        console.log(str);
        if(true){
            var time = new Date(),
                hours = time.getHours(),
                minutes = time.getMinutes(),
                seconds = time.getSeconds(),
                millis = time.getMilliseconds();
            if(hours < 10)hours = '0'+hours;
            if(minutes < 10)minutes = '0'+minutes;
            if(seconds < 10)seconds = '0'+seconds;
            var logRecordEle = $('#logRecord'), randomColor,spanStr,randomColor_1 = '#'+tools.getRandomByL(6,6),
                randomColor_2 = 'rgb('+tools.getRandomBetween(0,220)+','+tools.getRandomBetween(0,220)+','+tools.getRandomBetween(0,220)+')';
            randomColor = randomColor_1 || randomColor_2;
            spanStr = '<span style="color:'+randomColor+'">'+ hours + ':'+minutes + ':'+seconds + '.'+millis + ' ==> '+ str + '</span><br/>'
            logRecordEle.append(spanStr);
        }
    };
//获取一个长度最小为a,最大长度为b的随机数字符串,最大16位 by J.Wong
    tools.getRandomByL = function(a,b){
        var r = Math.round(Math.abs((!b?(b=a,b):b)-a)*(Math.random())),
            l = a<0?(a=-a):1 && b<0?(b=-b):1 && a<b?a+r:b+r;
        return (''+Math.random()).substring(2,2+(l>16?16:l));
    };
//获取a~b之间的整数
    tools.getRandomBetween = function(a,b){
        return Math.round((b-a)*(Math.random())+a);
    };

    tools.initLog();
    tools.log('<span style="font-size:12px;font-weight:800;color:white;background-color:black;">日志工具说明:<--点击这里打开关闭日志</span>');
    window.tools = tools;
//对日志的支持 end
    }catch(e){
        alert(e)
    }
})($,window);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值