2017-7-20

作者: 毛毛i | 来源:发表于2017-07-20 22:30 被阅读0次

    收获到了什么?

    • 定时器的使用方法 setInterval(函数,时间) 使用之前可以把定时器封装在一个变量里面 var timer = setInterval()
    • 停止定时器的方法 clearInterval() 括号里面直接写变量名称就好了 clearInterval(timer)
    • Math.random() 方法,只能随机0-1之间的浮点数字
    • Math.floor() 向下取整方法 Math.floor(Math.random() * 7) 这样取的数字就是不小于7大于0的整数
    • 昨天的项目做完了,最后一块状态切换的代码没有按照教程来,用的是自己的方法
    • 用到了阻止事件冒泡方法

    对于收获的想法?

    • 学习到了很多,基础又扎实了一些
    • 很有成就感

    明天的打算?

    • 继续找JavaScript项目来做
    • JavaScript 的键盘事件
    • 用jQuery再把今天的项目写一遍

    项目的原js代码:

     window.onload = function(){
    //拖曳效果
    var otitle = document.getElementById("title"),
        colse = document.getElementById("colse");
    otitle.onmousedown = darg;
    colse.onclick = function(){
         document.getElementById("box").style.display = 'none';
    }
    
    
    //下拉效果
    var obox = document.getElementById("select"),
        omenu = document.getElementById("select_menu"),
        olis = omenu.getElementsByTagName("li"),
        otext = document.getElementById("select_text"),
        oicon = document.getElementById("icon");
        obox.onclick = function(event){
            event = event || window.event;
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble;
            }
            omenu.style.display = 'block';
        }
        
        for(i = 0;i<olis.length;i++){
            olis[i].onclick = function(){
                var olis_text = this.innerText,
                    olis_class = this.className;
                otext.innerText = olis_text;
                oicon.className = "icon "+olis_class;
                omenu.style.display = 'none';
            }
        }
        
        document.onclick = function(){
            omenu.style.display = 'none';
        }
    }
    
      //单击的时候触发的操作
      function darg(event){
    var box = document.getElementById("box"),
        x = event.clientX - box.offsetLeft,
        y = event.clientY - box.offsetTop;
    
    document.onmousemove = function(event){
        fnMove(event,x,y);
    }
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
    }
    }
    
      //移动的时候触发的操作
      function fnMove(event,postX,postY){
    var box = document.getElementById("box"),
        l = event.clientX - postX,
        t = event.clientY - postY,
        winW = document.documentElement.clientWidth,
        winH = document.documentElement.clientHeight;
        maxW = winW - box.offsetWidth,
        maxH = winH - box.offsetHeight;
        
    if(l<0){
        l=0;
    }else if(l>maxW){
        l=maxW;
    };
    
    if(t<0){
        t=0;
    }else if(t>maxH){
        t=maxH;
    }
    
    box.style.left = l + 'px';
    box.style.top = t + 'px';
      } 
    

    相关文章

      网友评论

          本文标题:2017-7-20

          本文链接:https://www.haomeiwen.com/subject/kkajkxtx.html