控制台输入获取屏幕坐标

最新推荐文章于 2025-05-15 16:49:18 发布

原创最新推荐文章于 2025-05-15 16:49:18 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这段代码创建了一个固定定位的div元素，设置其样式并添加到文档中。它监听鼠标的移动事件，实时更新div的位置，显示鼠标坐标。

var temp_div = document.createElement("div");
temp_div.className = "client_position";
temp_div.style.position = "fixed";
temp_div.style.zIndex = "9999";
temp_div.style.width = "100px";
temp_div.style.height = "20px";
temp_div.style.background = "rgba(0,0,0,0.4)";
temp_div.style.color = "white";
temp_div.style.textAlign = "center"
document.body.insertBefore(temp_div, document.body.lastChild);

function changeClient(event) {
    temp_div.style.left = (event.clientX-30).toString()+"px";
    temp_div.style.top = (event.clientY-30).toString()+"px";
    temp_div.innerText = "x: "+event.clientX.toString()+" y: "+event.clientY.toString();
}

document.addEventListener("mousemove",changeClient);