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

最新推荐文章于 2025-07-08 10:00:00 发布

J.Wong

最新推荐文章于 2025-07-08 10:00:00 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小工具文章标签： JavaScript 日志工具移动端APP日志

本文链接：https://blog.youkuaiyun.com/wofei145/article/details/89040904

小工具专栏收录该内容

2 篇文章

订阅专栏

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

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

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

使用方法：

引入JQuery任意版本
复制此段代码到页面（本人习惯新建一个script标签存放代码，方便删除）
在需要打印日志的地方使用(tools.log(‘这是一条日志’))
页面上会fixed定位一个按钮，按钮可以拖动，点击按钮可打开关闭全屏的日志信息
效果如图所示

直接上代码，比较简单，欢迎大神们留言做出优化~谢谢

// 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);