Используя JS необходимо изменять цвет элемента div, в зависимости от положения на экране

Question

Прошу помощи, у меня есть элемент div(квадрат), который можно перетаскивать по экрану браузера, необходимо "условно" поделить экран на 4 части, и менять цвет перетаскиваемого объекта в зависимости от положения на экране, то есть, мой квадрат должен иметь 4 состояния цвета и менять их в зависимости от координат окна браузера. Вот код, который есть на данный момент, не судите строго.

<html>
<head>

</head>
<body onmousemove="mouseMoveFunction()">
<div id="test" style="width: 150px;height: 150px; border: 1px solid red; background-color: black; position: absolute"></div>
<script>

   clicked = false;
   document.addEventListener('mousedown', function (e){
       clicked = true;
   });
   document.addEventListener('mouseup', function (e){
       clicked = false;
   });


    document.addEventListener('mousemove', function (e){
        //console.log(e);
        if (clicked) {
            a = document.querySelector('#test');
            a.style.top = e.clientY;
            a.style.left = e.clientX;
        }
    });

   document.addEventListener('mousemove',function changeBackground() {
       if ($(window).innerHeight<500){
      document.getElementById('test').style.backgroundColor='#aa1151';
       }
   });    



</script>
</body>
</html>

Answer 1

let isPresed = false;
let colors = ['#000', '#f00', '#0f0', '#00f'];
let root = document.documentElement;
root.style.setProperty('--bg', colors[0]);

root.addEventListener('mousedown', () => isPresed = true);
root.addEventListener('mouseup', () => isPresed = false);

root.addEventListener('mousemove', (e) => {
  if (isPresed) {
    const isBottom = window.innerHeight / 2 < e.clientY;
    const isRight = window.innerWidth / 2 < e.clientX;
    const index = !isRight && isBottom ? 3 : isBottom + isRight;
    root.style.setProperty('--x', e.clientX);
    root.style.setProperty('--y', e.clientY);
    root.style.setProperty('--bg', colors[index]);
  }
});

#test {
  width: 30px;
  height: 30px;
  background-color: var(--bg);
  transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px));
}

<div id="test"></div>

БЛОГ НА HUSL

Используя JS необходимо изменять цвет элемента div, в зависимости от положения на экране

Ответы (1 шт):