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';
  } 

相关文章

  • nodejs 初探

    nodejs 初探 2017-7-20,于简书 http://www.jianshu.com/p/8e20037e...

  • 简易博客(7日实训)

    2017-7-20 htmldiv+css可用表格进行排版 tr td 2017-7-21 jsp:request...

  • 2017-7-20

    1.乖乖六点准点把我叫醒,完成了三十分钟原地抬腿跑步练习,出了很多汗,感觉很好。 感恩美丽的清晨,温柔的朝阳,感恩...

  • 2017-7-20

    农历六月二十六,阳历18号是爷爷生日,身在重庆的我,已经4年没有回去陪他过生了,不知不觉间爷爷已经75岁了。 时间...

  • 2017-7-20

    每次想到我亲爱的简书都是自己出现了问题或者错误,越来越讨厌自己了。 公司年中会作为接待人员的我第一次参加公司的会议...

  • 2017-7-20

    做了 1.后台的项目输入 2.山东混改项目的导入 3.数据分析模板的初步定型 4.知乎账号申请 明天 1.文章格式...

  • 2017-7-20

    收获到了什么? 定时器的使用方法 setInterval(函数,时间) 使用之前可以把定时器封装在一个变量里面 v...

  • 2017-7-20

    感恩父母亲带我来到这个美好的世界 感恩我的租房为我遮风挡雨了那么多年 感恩我的床陪伴了我那么旧 感恩御天的一事一物...

  • 2017-7-20

    早上来的迟了……居然没有菜包子了!诶! 不得不说,腿好吃!!炒的大白菜也好吃!很满意! 嘿嘿嘿嘿!在考研教室挖西瓜...

  • 西瓜

    买块西瓜等你来。 你来却又去, 西瓜依旧在, 青皮红瓤。 不知几时被消灭, 惨留伴孤灯。 2017-7-20

网友评论

      本文标题:2017-7-20

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