function showCoords(event) {
var x = event.clientX - 10;
var y = event.clientY - 10;
var coords = "X coordinates: " x ", Y coordinates: " y;
document.getElementById('showCoords').innerHTML = coords;
}
uj5u.com熱心網友回復：
好的，首先你可以為紅點創建一個 CSS 類：
<style>
.red-dot {
position:absolute;
width:5px;
height:5px;
background:red;
}
</style>
然后嘗試修改showCoords()方法：
function showCoords(event) {
// Calculate the position of the nearest grid intersection:
var x = (Math.floor(event.clientX/10) * 10) - 2;
var y = (Math.floor(event.clientY/10) * 10) - 2;
var coords = "X coordinates: " x ", Y coordinates: " y;
document.getElementById('showCoords').innerHTML = coords;
// Create a new red dot:
let newDot = document.createElement('span');
// Add the CSS class:
newDot.className = 'red-dot';
// Set coordinates:
newDot.style.top = y 'px';
newDot.style.left = x 'px';
// Add the new element to the end of the body:
document.body.appendChild(newDot);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/453248.html
標籤：javascript html css