JS实现控件跟随鼠标移动

显示一个div,div内显示当前的时间。

让这个div随着鼠标的移动而移动。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <script type="text/javascript">
                function mobile(){
                    var x = event.clientX;
                    var y = event.clientY;
                    //alert("fujichao");
                    document.getElementById("topid").style.left = x+"px";
                    document.getElementById("topid").style.top = y+"px";
                }
                function showTime(){
                    var date = new Date();
                    document.getElementById("topid").innerHTML= date.toLocaleString();
                }
                setInterval("showTime()",1000);    
                
            </script>
    </head >
    <body onload="showTime()" onmousemove="mobile()"  style="height: 800px; width: 1000px; background-color: aquamarine;">
        
        <div id="topid"  style="border: 2px red solid;height: 200px; width: 300px;position: absolute;left: 200px; top: 200px;"></div>
    </body>
</html>

JS实现控件跟随鼠标移动_第1张图片

你可能感兴趣的:(JS事件监听,控件跟随鼠标移动)