Блог

Главная - Вопросы по программированию - Создание калькулятора соотношения сторон

Создание калькулятора соотношения сторон

#javascript #html #css

#javascript #HTML #css — файл

Вопрос:

Я пытаюсь заставить это работать без использования обновления размера проигрывателя, которое можно удалить.

Принцип работы заключается в том, что вы вводите числа со стороны ширины, а высота должна изменяться мгновенно.

Код:https://jsfiddle.net/xyju2bpn/1 /

введите описание изображения здесь

Повторяем, как это работает:

Я не смог найти здесь код javscript.

https://developers.google.com/youtube/youtube_player_demo

 <td class="player-demo-group-options">
  <div class="player-demo-option-row">
    <label for="aspectRatio">Aspect ratio:</label>
    <select class="kd-button kd-menubutton kd-select player-demo-tooltip-zindex" id="aspectRatio" name="aspectRatio" onchange="setPlayerHeight(document.getElementById('aspectRatio').value, document.getElementById('playerWidth').value); return false;">
              <option value="widescreen">16x9</option>
              <option value="standard">4x3</option>
            </select>
  </div>
  <div class="player-demo-option-row">
    <label for="playerWidth">Dimensions:</label>
    <input id="playerWidth" type="text" class="player-demo-text-input" size="2" value="720" onkeyup="setPlayerHeight(document.getElementById('aspectRatio').value, document.getElementById('playerWidth').value); return false;">amp;nbsp;xamp;nbsp;<span id="playerHeight">180</span>amp;nbsp;amp;nbsp;amp;nbsp;
    <button
      class="button-blue button" onclick="setPlayerSize(document.getElementById('playerWidth').value, document.getElementById('playerHeight').innerHTML); return false;">Update player size</button>
  </div>
</td>

Комментарии:

1. setPlayerHeight не определено», где это javascript

2. Как бы мне найти это здесь? developers.google.com/youtube/youtube_player_demo

3. @RayeesAC Это не OP собственный код. Это из ссылки OP, упомянутой выше. Итак, на данном этапе нет JS.

4. Существует javascript, но я не смог точно определить, где здесь находится точный код. developers.google.com/youtube/youtube_player_demo Я попытался просмотреть «просмотреть исходный код страницы» и не смог найти нужный код.

5. Где находится JS-код, который вы написали? Не setPlayerSize код, который, как вы сказали, мы можем игнорировать, а код для выполнения вычислений?

Ответ №1:

Пожалуйста, попробуйте это,

высота рассчитывается по соотношению if (4/3)

   ratio = 3/4;
  document.getElementById('playerHeight').textContent = width *ratio;

высота, рассчитанная с помощью коэффициента if(16/9)

   ratio = 9/16;
  document.getElementById('playerHeight').textContent = width *ratio;
  

 function setPlayer(width, height) {
    var ratio;
    var asratio =  document.getElementById('aspectRatio').value;
    if(asratio == 'standard'){
      ratio = 3/4;
      document.getElementById('playerHeight').textContent = width *ratio;
    }
   else{
      ratio = 9/16;
      document.getElementById('playerHeight').textContent = width * ratio;
    }
}  
 <td class="player-demo-group-options">
  <div class="player-demo-option-row">
    <label for="aspectRatio">Aspect ratio:</label>
    <select class="kd-button kd-menubutton kd-select player-demo-tooltip-zindex" id="aspectRatio" name="aspectRatio" onchange="setPlayer(document.getElementById('playerWidth').value, document.getElementById('playerHeight').textContent)">
              <option value="widescreen">16x9</option>
              <option value="standard">4x3</option>
            </select>
  </div><br>
  <div class="player-demo-option-row">
    <label for="playerWidth">Dimensions:</label>
    <input id="playerWidth" type="text" class="player-demo-text-input" size="2" value="720" oninput="setPlayer(document.getElementById('playerWidth').value, document.getElementById('playerHeight').textContent)">amp;nbsp;xamp;nbsp;<span id="playerHeight">405</span>amp;nbsp;amp;nbsp;amp;nbsp;
    <button
      class="button-blue button" onclick="setPlayer(document.getElementById('playerWidth').value, document.getElementById('playerHeight').textContent)">Update player size</button>
  </div>
</td>