小刘同学的第三十八篇博文

2018-06-24 01:27:57来源：未知阅读 ()

　　时间很晚了，就不说废话了，今天完成了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>