时间很晚了，就不说废话了，今天完成了homework5，但是状态很不好，在家里还是不能完全静下心来学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homewrok5</title>
<style>
html, body{
margin: 0;
padding: 0;
100%;
}
#box {
height: 100px;
100px;
background-color: purple;
position: absolute;
}
</style>
</head>
<body>
<!--
/**
*
* @author: xiaoliu
* @type: NO.17-homework5
* @data: 2018-01-29
* @finished: 2018-01-30
*
*/
-->
<div id="box"></div>
<script>
window.onload = function () {
var box = document.getElementById("box");
box.onmouseover = function () {
box.style.backgroundColor = "#210038";
}
// 鼠标被按下
box.onmousedown = function (event) {
// 源坐标
var SL = box.style.left * 1;//待会儿看下单位是不是有问题
var ST = box.style.top * 1;
var SX = event.clientX + "px";
var SY = event.clientY + "px";
console.log(SL)
console.log(ST)
console.log(SX)
console.log(SY)
box.onmousemove = function (event) {
// 目的坐标
var DX = event.clientX - parseInt(SX);
var DY = event.clientY - parseInt(SY);
box.style.left = DX + "px";
box.style.top = DY + "px";
/*console.log("DX = " + DX + " DY = " + DY)*/
// 鼠标被抬起
box.onmouseup = function () {
box.onmousemove = function (event) {
box.style.left = DX + "px";
box.style.top = DY + "px";
}
}
}
}
box.onmouseout = function () {
box.style.backgroundColor = "purple";
}
}
</script>
</body>
</html>
具体的就不说了，就是在目的坐标的位置那里卡了很久很久，编程不专心，而且精神恍惚，不是看看这个，就是点点那个，找了这么久才找到这个bug也是自己该死……
今天又晚睡了，状态不对，一定要调过来！