Soy muy nuevo en Javascript/HTML y estoy intentando crear un dispositivo de seguimiento manual para partidos de fútbol/fútbol. (Usando otros ejemplos) He llegado tan lejos como he podido crear un programa para rastrear/puntear los movimientos de mi mouse en mi pantalla y registrar las coordenadas posicionales en la consola, pero tengo problemas con 2 problemas.
¿Hay alguna forma de cambiar el color de mi rastreador usando métodos abreviados de teclado para indicar un cambio de posesión?
Si es así, ¿también es posible hacer corresponder el color de mi rastreador/punto con las coordenadas en la consola para un análisis posterior?
Aquí está mi código hasta ahora. Siéntase libre de romperlo y editarlo como mejor le parezca.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <style> body { height: 1000px; } .dot { width: 2px; height: 2px; background-color: black; position: absolute; } </style> </head> <body> <script> (function() { "use strict"; var mousePos; document.onmousemove = handleMouseMove; setInterval(getMousePosition, 100); // setInterval repeats every X ms function handleMouseMove(event) { var eventDoc, doc, body; event = event || window.event; // IE-ism // If pageX/Y aren't available and clientX/Y are, // calculate pageX/Y - logic taken from jQuery. // (This is to support old IE) if (event.pageX == null && event.clientX != null) { eventDoc = (event.target && event.target.ownerDocument) || document; doc = eventDoc.documentElement; body = eventDoc.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0 ); } mousePos = { x: event.pageX, y: event.pageY }; } function getMousePosition() { var pos = mousePos; console.log("mouse location:", pos); if (!pos) { // We haven't seen any movement yet, so don't add a duplicate dot } else { // Use pos.x and pos.y // Add a dot to follow the cursor var dot; dot = document.createElement('div'); dot.className = "dot"; dot.style.left = pos.x + "px"; dot.style.top = pos.y + "px"; document.body.appendChild(dot); } } })(); </script> </body> <img src="Soccer_Template.png"></img> </html>No estoy seguro de entender tu pregunta, pero voy a tratar de responder.
1 - puedes cambiar el color de tu rastreador usando element.style.background
var dot = document.createElement('div'); dot.style.background = "red"; // Or any color, rgb, HEX you want2 - Es posible cambiar el color de su rastreador dinámicamente para que corresponda con las coordenadas. Solo agrega algo como
if(pos.x > 1 && pos.y > 1){ dot.style.background = "red"; } else{ dot.style.background = "blue"; }Espero que sea de ayuda