时间戳

首页 > 解决方案 > 创建键盘快捷键来更改足球/足球追踪器的颜色？

javascript - 创建键盘快捷键来更改足球/足球追踪器的颜色？

问题描述

我对 Javascript/HTML 非常陌生，我正在尝试为足球/足球比赛创建手动跟踪设备。（通过使用其他示例）我已经能够创建一个程序来跟踪/点我的鼠标在我的屏幕上的移动并记录控制台中的位置坐标，但我正在努力解决两个问题。

  1. 有没有办法通过使用键盘快捷键来更改我的跟踪器上的颜色来指示所有权变化？

  2. 如果是这样，是否也可以将我的跟踪器/点的颜色与控制台中的坐标对应起来以供以后分析？

到目前为止，这是我的代码。请随意撕开并编辑它，但你认为合适。

<!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>

标签： javascripthtml

解决方案

我不确定我是否理解您的问题，但我会尝试回答。

1 - 您可以使用更改跟踪器的颜色element.style.background

var dot = document.createElement('div');
dot.style.background = "red"; // Or any color, rgb, HEX you want

2 - 可以动态更改跟踪器的颜色以对应坐标。只需添加类似

if(pos.x > 1 && pos.y > 1){
    dot.style.background = "red";
}
else{
    dot.style.background = "blue";
}

希望它有帮助

推荐阅读