時間很晚了，就不說廢話了，今天完成了homework5，但是狀態很不好，在家裡還是不能完全靜下心來學習 具體的就不說了，就是在目的坐標的位置那裡卡了很久很久，編程不專心，而且精神恍惚，不是看看這個，就是點點那個，找了這麼久才找到這個bug也是自己該死…… 今天又晚睡了，狀態不對，一定要調過來！ ...
時間很晚了，就不說廢話了，今天完成了homework5，但是狀態很不好，在家裡還是不能完全靜下心來學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homewrok5</title>
<style>
html, body{
margin: 0;
padding: 0;
width: 100%;
}
#box {
height: 100px;
width: 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也是自己該死……
今天又晚睡了，狀態不對，一定要調過來！
