1

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

var num = document.getElementById('views_number').value * 1;
var line = document.getElementById('line');


function update() {
  num = document.getElementById('views_number').value * 1;
  line.style.width = (num * 175) / 100 + "px"; // 175 - максимальная ширина, 100 - проценты
}
.wrap {
  padding: 10px;
  background: #eee;
  display: inline-block;
  position: relative;
  top: 100px;
  left: 200px;
}
#line {
  height: 3px;
  width: 175px;
  background: #1abc9c;
  position: relative;
  top: 5px;
}
<div class="wrap">
  <input type="text" placeholder="Views num" id="views_number">
  <button onclick="update();">OK</button>
  <div id="line"></div>
</div>

1
  • 2
    Вы говорите о линии, которая под счетчиком просмотров? Если да, то это отношение голосов за/против. Если нет, тогда поясните, что за линия?
    – ThisMan
    20 апр 2015 в 11:20

1 ответ 1

5

Насколько я понял вы имели ввиду шкалу нравится/не нравится около счётчика просмотров. Для её реализации нужно 2 числа: количество людей, которым ролик понравился и которым он не понравился. Попробовать можно в приведённом примере.

var green= document.getElementById('line-green');
var red= document.getElementById('line-red');

function update() {
  likes= document.getElementById('likes_number').value * 1;
  dislikes= document.getElementById('dislikes_number').value * 1;
  green.style.width = (likes * 175) / (likes + dislikes) + "px"; // 175 - максимальная ширина
  red.style.width = (dislikes* 175) / (likes + dislikes) + "px";
}
.wrap {
  padding: 10px;
  background: #eee;
  display: inline-block;
  position: relative;
  top: 100px;
  left: 200px;
}
.line{
  height: 3px;
  width: 87px;
  position: relative;
  top: 5px;
  display: inline-block;
}
#line-green {
  background: #1abc9c;      
}
#line-red{
  background: red;
}
<div class="wrap">
  <input type="text" placeholder="Likes num" id="likes_number">
  <input type="text" placeholder="Dislikes num" id="dislikes_number">
  <button onclick="update();">OK</button>
  <div>
    <div id="line-green" class="line"></div>
    <div id="line-red" class="line"></div>
  </div>     
</div>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.