javascript单体问题,求解答


出现如图的错误,代码贴在下面


 //单例模式
var desk = (function(){
    var unique;
    function getInstance(){
        if(unique === undefined){
            unique = new Desk();
        }
        return unique;
    }

    //getInstance();
    return {
        getInstance:getInstance
    };


    /*
    桌面类
     */
    function Desk(){
        this.desk_main = document.getElementsByClassName('desk_main')[0];
        this.desk_top_navbar = document.getElementsByClassName('desk_top_navbar')[0];//顶部导航
        this.sub_desk = document.getElementsByClassName('sub_desk');//子桌面
        //alert(desk_main);
        this.desk_num = 5;//子桌面个数
        this.desk_index = this.desk_oldindex = 0;//当前字桌面索引
        this.pageNumber = document.getElementsByClassName('pageNumber')[0];
        this.aA = this.pageNumber.getElementsByTagName('a');//顶部导航数字按钮
        this.desk_top_navbar_wrap = document.getElementsByClassName('desk_top_navbar_wrap')[0];
        this.tool = document.getElementsByClassName('tool')[0];
        this.user = document.getElementsByClassName('user')[0];
        this.iTop = 30;
        this.iRight = 40;
        this.appSelector = 'desk_app';
        this.appHeight = 88;
        this.appWidth = 88;
        this.sortType = 0;//图标排列方式0竖排 1横排
        this.deskHeight = this.sub_desk[0].offsetHeight;
        this.deskWidth = this.sub_desk[0].offsetWidth;
        this.minZIndex = 100;
        this.textMenuHtml = '';//暂时不用
        this.textMenu = document.getElementsByClassName('textMenu')[0];//右键菜单
        this.appTextMenu = document.getElementsByClassName('appTextMenu')[0];//app右键菜单
        this.appName = 'app_name';
        this.appImg = 'app_img';
        this.sideBar = document.getElementsByClassName('side_bar')[0];
        //this.skinDiv = document.getElementsByClassName('skin')[0];    //皮肤设置区域
        //this.skinSetBtn = document.getElementsByClassName('pannel')[0];//皮肤设置按钮
        this.isAcitive = false;//用来判断背景设置弹窗是否被激活
        this.scrollBar_item = null;//背景设置弹窗滚动条
        this.bg = null;//背景设置弹窗滚动条控制区域
        this.scrollSpeed = 10;
        //console.log(this)
        this.doInit();
    }
    Desk.prototype = {
        constructor:'Desk',
        doInit:function(){
            this.setLayer();
            this.setNumNavBar();
            this.setScroll();
            this.setAppPos();
            this.setAppDrag();
            this.setTextMenu();
            this.blind();
            this.setSkin();
            this.sideBarPop();
        },
        /*
        桌面整体布局
         */
        setLayer:function(){
            //布局转换
            var _this = this;
            var top = _this.desk_main.offsetTop;
            with(_this.desk_main.style){
                position = 'absolute';
                width = this.desk_num*100+'%';
                left = 0;
                top = top + 'px';
                height = viewH() - _this.desk_top_navbar.offsetHeight-_this.desk_top_navbar.offsetTop + 'px';
            }
            var width = parseInt(1/_this.desk_num*100);
            for(var i=0;i<_this.sub_desk.length;i++){
                _this.sub_desk[i].style.width = width +'%';
            }
            //for()
        },
        /*
        设置app的排列方式
         */
        setAppPos:function(){
            var _this = this;
            var rows = Math.floor(_this.deskHeight/(_this.iTop+_this.appHeight));
            var cols = Math.floor(_this.deskWidth/(_this.iRight+_this.appWidth));
            for(var i=0;i<_this.sub_desk.length;i++){
                var apps = _this.sub_desk[i].getElementsByClassName(_this.appSelector);
                //console.log(apps);
                var pos = [];
                for(var j=0;j<apps.length;j++){
                    apps[j].style.position = 'absolute';
                    //drag(apps[j]);
                    if(_this.sortType == 0){
                        pos.push({
                            'left':Math.floor(j/rows)*(_this.appWidth+_this.iRight),
                            'top':(j%rows)*(_this.appHeight+_this.iTop)
                        });
                    }else{
                        pos.push({
                            'left':(j%cols)*(_this.appWidth+_this.iRight),
                            'top':Math.floor(j/cols)*(_this.appHeight+_this.iTop)
                        });
                    }
                }
                for(var j=0;j<apps.length;j++){
                    startMove(apps[j],pos[j],300,'Linear');
                }
            }
                //console.log(pos)
        },
        /*
        顶部导航设置
         */
        setNumNavBar:function(){
            var _this = this;
            //顶部导航长度实现自适应
            _this.desk_top_navbar_wrap.style.width = _this.user.offsetWidth + _this.pageNumber.offsetWidth+_this.tool.offsetWidth + 'px';
            /*
            数字导航点击事件
             */
            for(var i=0;i<_this.aA.length;i++){
                _this.aA[i].onclick = (function(i){
                    return function(){
                        //alert(i)
                        _this.aA[_this.desk_oldindex].className = '';
                        _this.aA[i].className = 'on';
                        _this.desk_index = i;
                        _this.desk_oldindex = _this.desk_index;
                        startMove(_this.desk_main,{
                            'left':-viewW()*i
                        },300,'Linear');
                    }
                })(i);
            }
        },
        /*
        桌面滚动
         */
        setScroll:function(){
            var _this = this;
            /*
            添加滚轮事件
             */
            addEvent(document,'mousewheel',function(e){
                if(_this.isAcitive){
                    scrollEvent(e);
                }else{
                    delay_till_last('id',function(){
                        scrollEvent(e);
                    },300);
                }
            });
            addEvent(document,'DOMMouseScroll',function(e){
                if(_this.isAcitive){
                    scrollEvent(e);
                }else{
                    delay_till_last('id',function(){
                        scrollEvent(e);
                    },300);
                }
            });
            /*
            滚轮事件函数
             */
            function scrollEvent(e){
                var e = e || window.event;
                var cur = 0;
                //alert(e.wheelDelta)
                var detail = -e.wheelDelta/120 || e.detail/3;
                //console.log(detail);
                if(_this.isAcitive){
                    //背景设置弹窗滚轮事件
                    console.log(detail)
                    cur = _this.scrollBar_item.offsetTop;
                    if(detail>0){
                        cur += _this.scrollSpeed;
                        //scrollBar_item.sty
                        //_this.bg.style.top = 
                    }else{
                        cur -= _this.scrollSpeed;
                    }
                    if(cur<0){
                            cur=0
                    }else if(cur>_this.scrollBar_item.parentNode.offsetHeight-_this.scrollBar_item.offsetHeight){
                        cur = _this.scrollBar_item.parentNode.offsetHeight-_this.scrollBar_item.offsetHeight
                    }
                    var scale = cur/(_this.scrollBar_item.parentNode.offsetHeight-_this.scrollBar_item.offsetHeight);
                    _this.bg.style.top = -(_this.bg.offsetHeight-_this.scrollBar_item.parentNode.offsetHeight)*scale+'px';
                    _this.scrollBar_item.style.top = cur+'px';
                }else{
                    if(detail>0){
                        _this.desk_index++;
                        if(_this.desk_index==_this.desk_num){
                            _this.desk_index = 0;
                        }
                    }else{
                        _this.desk_index--;
                        if(_this.desk_index<0){
                            _this.desk_index = _this.desk_num-1;
                        }
                    }
                    _this.aA[_this.desk_oldindex].className = '';
                    _this.aA[_this.desk_index].className = 'on';
                    _this.desk_oldindex = _this.desk_index;
                    startMove(_this.desk_main,{
                        'left':-viewW()*_this.desk_index
                    },300,'Back easeOut');
                }
            }
            /*
            防止某一事件连续触发
             */
            var _timer = {};
            function delay_till_last(id,fn,wait){
                if(_timer[id]){
                    clearTimeout(_timer[id]);
                    delete _timer[id];
                }
                return _timer[id] = setTimeout(function(){
                    fn();
                    delete _timer[id];
                },wait);
            }
        },
        setAppDrag:function(){
            var _this = this;
            for(var i=0;i<_this.sub_desk.length;i++){
                var apps = _this.sub_desk[i].getElementsByClassName(_this.appSelector);
                var pos = [];
                for(var j=0;j<apps.length;j++){
                    drag(apps[j],apps,true);
                }
            }
        },
        setTextMenu:function(){
            var _this = this;
            document.oncontextmenu = function(e){
                //alert(1);
                var e = e || window.event;
                var target = e.target || e.srcElement;
                console.log(target);
                var x = e.clientX;
                var y = e.clientY;

                if(target.parentNode.className == _this.appImg || target.className == _this.appName){
                    _this.textMenu.style.display = 'none';
                    _this.appTextMenu.style.display = 'block';
                    _this.appTextMenu.style.left = x+'px';
                    _this.appTextMenu.style.top = y+'px';
                    _this.appTextMenu.style.zIndex = _this.minZIndex++;
                }else{
                    _this.appTextMenu.style.display = 'none';
                    _this.textMenu.style.display = 'block';
                    _this.textMenu.style.left = x+'px';
                    _this.textMenu.style.top = y+'px';
                    _this.textMenu.style.zIndex = _this.minZIndex++;
                }
                return false;
            };
        },
        blind:function(){
            var _this = this;
            document.onclick = function(e){
                var e = e || window.event;
                var target = e.target || e.srcElement;

                if(target != _this.textMenu){
                    _this.textMenu.style.display = 'none';
                }
                if(target != _this.appTextMenu){
                    _this.appTextMenu.style.display = 'none';
                }
            };
        },
        /*
        设置背景图片
         */
        setSkin:function(){
            var _this = this;
            var skinDiv = document.getElementsByClassName('skin')[0];    //皮肤设置区域
            var skinSetBtn = document.getElementsByClassName('pannel')[0];//皮肤设置按钮
            var items = skinDiv.getElementsByClassName('bg_item');
            var oClose = skinDiv.getElementsByClassName('close')[0];
            var scrollBar = skinDiv.getElementsByClassName('scrollBar')[0];
            _this.scrollBar_item = skinDiv.getElementsByClassName('scrollBar_item')[0];
            _this.bg = skinDiv.getElementsByClassName('bg')[0];
            var pos = [];
            //布局转换
            for(var i=0;i<items.length;i++){
                pos.push({
                    'left':items[i].offsetLeft,
                    'top':items[i].offsetTop
                });
            }
            //垂直和水平居中
            //一定不能用css直接控制.skin{width:540px;height:380px;position:absolute;left:50%;margin-left:-270px;top:50%;margin-top:-190px;overflow:hidden;一定要在js中进行布局转换} 
            //skinDiv.style.top = (viewH()-skinDiv.offsetHeight)/2 + 'px';

            skinDiv.style.left = (viewW()-skinDiv.offsetWidth)/2 + 'px';//重新布局,因为后面调用drag函数设置的left,top的值
            skinDiv.style.top = (viewW()+skinDiv.offsetWidth) + 'px';
            skinSetBtn.onclick = function(){
                startMove(skinDiv,{
                    //'left':(viewW()-skinDiv.offsetWidth)/2,
                    'top':(viewH()-skinDiv.offsetHeight)/2
                },300,'Back easeInOut',function(){
                    _this.isAcitive = true;//滚轮效果出现在弹窗上
                });
            };
            oClose.onclick = function(){
                startMove(skinDiv,{
                    //'left':skinDiv.offsetLeft,
                    'top':(viewW()+skinDiv.offsetHeight)
                },300,'Back easeInOut',function(){
                    _this.isAcitive = false;
                });
            };
            //背景预览图片布局转换
            for(var i=0;i<items.length;i++){
                with(items[i].style){
                    position = 'absolute';
                    left = pos[i].left + 'px';
                    top = pos[i].top + 'px';
                }
                /*图片放大,层级增大*/
                items[i].onmouseover = function(){
                    this.style.zIndex = _this.minZIndex++;
                };
            }
            _this.bg.style.height = items[items.length-1].offsetHeight+items[items.length-1].offsetTop+'px';
            drag(skinDiv,null,false,function(){
                _this.isAcitive = true;//背景弹窗被激活
            });
            /*drag(scrollBar_item,null,false,true,{
                'direction':'vertical',
                'from':0,
                'to':scrollBar.offsetHeight-scrollBar_item.offsetHeight
            });*/
            //滚动条拖动
            _this.scrollBar_item.onmousedown = function(e){
                var e = e || window.event;
                var disX = e.clientX - this.offsetLeft;
                var disY = e.clientY - this.offsetTop;

                _this.isAcitive = true;//背景弹窗被激活
                stopBubble();//阻止事件冒泡,防止拖拽的时候拖动整个框
                document.onmousemove = function(e){
                    var e = e || window.event;
                    var l = e.clientX - disX;
                    var t = e.clientY - disY;

                    if(t<0){
                        t = 0;
                    }else if(t>scrollBar.offsetHeight-_this.scrollBar_item.offsetHeight){
                        t = scrollBar.offsetHeight-_this.scrollBar_item.offsetHeight;
                    }
                    scale = t/(scrollBar.offsetHeight-_this.scrollBar_item.offsetHeight);
                    _this.bg.style.top = -(_this.bg.offsetHeight-scrollBar.offsetHeight)*scale+'px';
                    //scrollBar_item.style.left = l + 'px';
                    _this.scrollBar_item.style.top = t + 'px';
                };
                document.onmouseup = function(){
                    this.onmousemove = null;
                    this.onmouseup = null;
                }
            };
        },
        sideBarPop:function(){
            var _this = this;
            var btn = _this.sideBar.getElementsByClassName('q')[0];
            var popMenu = _this.sideBar.getElementsByClassName('side_bar_menu')[0];
            var oExit = _this.sideBar.getElementsByClassName('exit')[0];

            btn.onclick = function(){
                startMove(popMenu,{
                    'left':popMenu.parentNode.offsetWidth + 10
                },300,'Back easeInOut');
            };
            oExit.onclick = function(){
                startMove(popMenu,{
                    'left':-popMenu.offsetWidth
                },300,'Back easeInOut');
            };
        }
    };
})();

node.js css HTML html5 JavaScript

人类皆天才 9 years, 1 month ago

Your Answer