Dom的高级操作（苹果菜单，拖拽）

1.获取行内样式和非行内样式的兼容性写法

/*
domObj指的是dom对象 
attribute指的是属性，例如：width
*/
function getCompatibilityStyle(domObj, attribute) {
  if (window.getComputedStyle) {
    return getComputedStyle(domObj, null)[attribute];
  }
  return domObj.currentStyle[attribute];
}
cosole.log(getCompatibilityStyle(oBox, "width"));

2.简易的进度条

//html
<div class="outsideProBar">
  <div class="insideProBar"></div>
</div>
//css
<style type="text/css">
  .outsideProBar {
     width: 500px;
     height: 10px;
     background: #c3cec3;
     margin: 100px 0;
     padding: 5px 0;
    }
  .insideProBar {
    width: 0px;
    height: 10px;
    background: red;
    }
</style>
//js
      let outsideProBar = document.getElementsByClassName("outsideProBar")[0];
      let insideProBar = document.getElementsByClassName("insideProBar")[0];
      //1.定义一个定时器
      let timer = setInterval(() => {
        //2.用parseInt（）对字符串进行过滤，转换成数字类型
        //3.**特别注意**由于某种方法只能获取行内样式的数据，所以用了上面的函数
        insideProBar.style.width =
          parseInt(getCompatibilityStyle(insideProBar, "width")) + 1 + "px";
        //4.或者是insideProBar.style.width=insideProBar.clientWidth+1+"px";也是一样的
        //5.再或者你定义一个变量，定时器进行累加，然后也行
        //6.进行边界判断，临界时停止定时器
        if (
          parseInt(getCompatibilityStyle(insideProBar, "width")) ==outsideProBar.offsetWidth
        ) {
          clearInterval(timer);
        }
      }, 20);

3.简易的回到顶部的效果

//html
<button onclick="clickBackTop()" class="clickBackTop">
  ^
</button>;
//JavaScript
//1.监听滚动条事件;
window.onscroll = function() {
  let clickBackTop = document.getElementsByClassName("clickBackTop")[0];
  //2.距离页面顶部的兼容性写法
  let ST = document.documentElement.scrollTop || document.body.scrollTop;
  if (ST > 150) {
    clickBackTop.style.display = "block";
  } else {
    clickBackTop.style.display = "none";
  }
};
clickBackTop = function() {
  document.documentElement.scrollTop = document.body.scrollTop = 0;
};

4.简易的输入框数据表格展示

<input type="text" />
<input type="text" />
<button class="clickTable" onclick="clickTable()">点击</button>
<table></table>

let oInput = document.querySelectorAll("input");
let oTable = document.querySelectorAll("table")[0];
clickTable = function() {
  // console.log("object");
  //点击的时候创建tr存放输入框的值
  let oTr = document.createElement("tr");
  for (let i = 0; i < oInput.length; i++) {
    let oTd = document.createElement("td");
    //把输入框的值循环放到td里面
    if (oInput[i].value == "") {
      return;
    } else {
      oTd.innerHTML = oInput[i].value;
    }
    //td节点插入到tr节点里面
    oTr.appendChild(oTd);
  }
  //创建一个新的td存放删除按钮
  let oTd = document.createElement("td");
  let cBtn = document.createElement("button");
  cBtn.innerHTML = "点我删除";
  oTd.appendChild(cBtn);
  oTr.appendChild(oTd);
  oTable.appendChild(oTr);
  cBtn.onclick = function() {
    oTable.removeChild(oTr);
  };
};

5.简单的拖拽 demo

<div id="drag"></div>
<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }
  #drag {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
  }
</style>

let oDiv = document.getElementById("drag");
let dw = document.documentElement.clientWidth; //document的宽度
let dh = document.documentElement.clientHeight; //document的高度
let cw = oDiv.offsetWidth; //拖拽盒子的宽度
let ch = oDiv.offsetHeight; //拖拽盒子的高度
let mw = dw - cw; //获取剩余宽度
let mh = dh - ch; //获取剩余高度
//拖拽三要素，onmousedown（鼠标按下）onmousemove（鼠标移动） onmouseup（鼠标抬起）
oDiv.onmousedown = function(event) {
  //1.事件对象的兼容性写法
  let evt = window.event || event;
  //2. 点下时鼠标距离盒子左面和上面的距离；
  let _x = evt.offsetX;
  let _y = evt.offsetY;
  //鼠标移动事件
  document.onmousemove = function(event) {
    let evt = window.event || event;
    //3.在这里减去鼠标按下时的坐标，不然的话会出现跳顿的现象
    let x = evt.clientX - _x;
    let y = evt.clientY - _y;
    //4.临界值判断
    x = x <= 0 ? 0 : x >= mw ? mw : x;
    y = y <= 0 ? 0 : y >= mh ? mh : y;
    //5.赋值
    oDiv.style.left = x + "px";
    oDiv.style.top = y + "px";
  };
  //鼠标抬起事件
  document.onmouseup = function() {
    //6.松开鼠标，清除移动事件
    document.onmousemove = null;
  };
};

6.苹果菜单的实现

<div id="apple_menu">
  <img src="images/1.png" />
  <img src="images/2.png" />
  <img src="images/3.png" />
  <img src="images/4.png" />
  <img src="images/5.png" />
</div>
//css
<style type="text/css">
  body {
    margin: 0;
    padding: 0;
  }
  #apple_menu {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    text-align: center;
  }
  #apple_menu img {
    width: 100px;
    height: 100px;
    margin: 0 20px;
  }
</style>

// 1.承载图片的盒子
let apple_menu = document.getElementById("apple_menu");
//2.所有的图片
let imgList = apple_menu.children;
//3.鼠标的移动事件
document.onmousemove = function(event) {
  //4.事件对象
  let evt = window.event || event;
  let X = evt.clientX;
  let Y = evt.clientY;
  //5.循环比较距离，判断放大比例
  for (let i = 0; i < imgList.length; i++) {
    let disx = X - imgList[i].offsetLeft - imgList[i].offsetWidth / 2;
    let disy =Y -imgList[i].offsetTop -apple_menu.offsetTop -imgList[i].offsetHeight / 2;
    //6.根据勾股定理判断鼠标距离当前哪一个图片的直线距离是最近的
    let dis = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2));
    //7.自己定义的临界值
    if (dis <= 300) {
      //判断他们的放大的比例
      imgList[i].style.width = 100 + 100 * (1 - dis / 300) + "px";
      imgList[i].style.height = 100 + 100 * (1 - dis / 300) + "px";
    } else {
      imgList[i].style.width = "100px";
      imgList[i].style.height = "100px";
    }
  }
};

• 边界理解为浏览器边界
  

7.js 实现简易的计算器模型

代码是挺多的，但是超级简单

<div id="oDiv">
  <input type="text" id="input" value="" /><br />
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>+</button><br />
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>-</button><br />
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>*</button><br />
  <button>退格</button>
  <button>0</button>
  <button>.</button>
  <button>/</button><br />
  <button id="equ">=</button>
  <button>清零</button>
</div>

• css 样式

<style type="text/css">
  #oDiv {
    text-align: center;
    border: solid 1px;
    width: 300px;
    border-radius: 10px;
    background-color: #000;
  }
  #input {
    border: solid 1px;
    width: 260px;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
  }
  button {
    border-radius: 5px;
    width: 55px;
    height: 30px;
    margin: 2px;
  }
  #equ {
    width: 180px;
    margin-bottom: 10px;
  }
</style>

• js 代码

var oBtn = document.querySelectorAll("button");
var oInput = document.getElementById("input");
for (let i = 0; i <= 15; i++) {
  oBtn[i].onclick = function() {
    if (i != 12) {
      oInput.value += this.innerHTML;
    }
  };
}
//删除一个
oBtn[12].onclick = function() {
  oInput.value = oInput.value.substring(0, oInput.value.length - 1);
};
//数据结算
oBtn[16].onclick = function() {
  oInput.value = eval(oInput.value);
};
//删除全部
oBtn[17].onclick = function() {
  oInput.value = "";
};