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

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

新老客户大回馈,云服务器低至5折

  时间很晚了,就不说废话了,今天完成了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也是自己该死……

  今天又晚睡了,状态不对,一定要调过来!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS原型学习之旅(一)之一图了解原型链关系

下一篇:JavaScript正则表达式模式匹配(1)——基本字符匹配