Как увеличить размер смайликов с помощью 'ArrowUp' в Javascript - PullRequest
Новая
       1

Как увеличить размер смайликов с помощью 'ArrowUp' в Javascript

0 голосов
/ 27 декабря 2018

Я пытаюсь постоянно увеличивать размер шарика смайликов на 10 пикселей, когда пользователь нажимает стрелку вверх, а также уменьшать размер на 10 пикселей стрелкой вниз на клавиатуре.

Я пытался установить: 

let size = para.style.fontSize;

, чтобы получить переменную для размера и затем скорректировать это значение, добавив +/- 10px в моей функции.Тем не менее, я попробовал этот метод, и кажется, что вы не можете установить: 

para.style.fontSize = size +10;

У кого-нибудь есть какие-либо предложения, чтобы заставить это работать?

Примечание: я не включилПеременная размера в коде ниже, как я обнаружил, не работает. 

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <style>
    p {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <p>?</p>

  <script>
    let para = document.querySelector('p');


    window.addEventListener("keydown", e => {
    if (e.key == "ArrowUp") {
      para.style.fontSize = '60px';
    } else {
      para.style.fontSize = '40px';
    }
  });



  </script>

</body>

</html>

Ответы [ 3 ]

0 голосов
/ 27 декабря 2018

Обратите внимание, что если вы возьмете size, а затем выполните console.log(size), вы получите пустой результат для первого раунда (потому что он изначально не установлен), и во всех последующих раундах вы получите размер с добавлением px кконец.Таким образом, size + 10 с начальным размером 40px даст вам 40px10.Это приводит к нежелательному поведению.

Чтобы это исправить, вам нужно удалить px, преобразовать в число, а затем снова добавить px: 

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <style>
    p {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <p>?</p>

  <script>
    let para = document.querySelector('p');

    window.addEventListener("keydown", e => {
    let size = para.style.fontSize.replace('px', '');
    size = size == '' ? '50' : size; // size may not be initialized, so default to our intended starting value!
    size = parseInt(size);
    if (e.key == "ArrowUp") {
      para.style.fontSize = (size + 10) + 'px';
    } else {
      para.style.fontSize = (size - 10) + 'px';
    }
  });



  </script>

</body>

</html>
0 голосов
/ 27 декабря 2018

Чтобы добиться увеличения / уменьшения поведения для нескольких keydown событий, вам нужно увеличивать / уменьшать para.style.fontSize для каждого события.Один раз это можно сделать следующим образом: 

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <style>
    p {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <p>?</p>

  <script>
    let para = document.querySelector('p');

    window.addEventListener("keydown", e => {

      let currentSize = parseInt(para.style.fontSize);

      // If unable to determine current fontSize, default to 50
      if (isNaN(currentSize)) {
        currentSize = 50;
      }

      // Define the rate of change
      let changeAmount = 5;

      if (e.key == "ArrowUp") {
        para.style.fontSize = (currentSize + changeAmount) + 'px';
      } else {
        // Protect againt zero or negative font sizes via Math.max() 
        para.style.fontSize = Math.max(changeAmount, currentSize - changeAmount) + 'px';
      }
    });
  </script>

</body>

</html>
0 голосов
/ 27 декабря 2018

Проблема в том, что текущее свойство fontSize было нулевым, поэтому вы не можете добавить к нулевому значению.Вторая проблема заключается в том, что свойство fontSize на самом деле является строкой с «px».Поэтому, если вы хотите увеличить или уменьшить значение, вам нужно разобрать целочисленное значение.Затем, когда вы назначаете его обратно в para.style.fontSize, вам нужно добавить «px» обратно.

Вот ваш код с изменениями, описанными выше. 

<!DOCTYPE html>
<html>

<head>
  <title>Title of the document</title>
  <style>
    p {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <p>?</p>

  <script>
    let para = document.querySelector('p');
    // Set to default size
    para.style.fontSize = '24px';


    window.addEventListener("keydown", e => {
    var sizeAsInteger = parseInt(para.style.fontSize, 10);
    if (e.key == "ArrowUp") {
      sizeAsInteger += 10;
    } else {
      sizeAsInteger -= 10;
      
    }
    para.style.fontSize = sizeAsInteger + 'px';
  });



  </script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...