Skip to main content
Fim da Recompensa com 50 pontos de reputação concedidos por MarceloBoni
adicionou 6942 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

VotemReferente ao Problema 2:

Temos os blocos com 23px + 1px de padding + 1 px de borda, da 25px, mas eles estão espaçados por causa do table então tens que tirar o cellspacing deixa ele zerado, então teremos 25px por bloco, ai podemos começar a fazer uma formula e alguns testes ficaria assim:

"use strict";

var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;


window.onload = function () {
  areaMusica();

  var scroll = $(".area");

  $(":range").rangeinput({
    onSlide: function(ev, step)  {
      scroll.css({left: -step});
    },
    progress: true,
    change: function(e, i) {
      scroll.animate({left: -i}, "fast");
    },
    speed: 0
  });
  //iniciar( document.getElementById("teste") );
};

function areaMusica(){
  var k = 1; var tabela = '';
  tabela = '<table id="table" cellspacing="0">';
  for (var i = 0; i < 2; i++) {
    if(i < 1){
      tabela += '<tr class="containerFaixa">';
      for (var j = 1; j < 62; j++) {
        if(j == 1){
          tabela += '<td class="faixa" style="min-width: 13px;"></td>';
        }else{
          tabela += '<td class="container" id="td'+k+'"></td>';
          k++;
        }
      }
      tabela += '</tr>';
    }else{
      tabela += '<tr><td></td>';
      for(var j = 1; j < 61; j++) {
        if(j % 5 == 0){
          tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
        }
      }
      tabela += '</tr>' 
    }
  }
  tabela += '</table>';
  document.getElementById('area').innerHTML = tabela;
}

function seconds2time(seconds){
  var minutes = Math.floor((seconds ) / 60);
  var seconds = seconds - (minutes * 60);
  var time = "";

  if(minutes < 10){
    minutes = "0"+minutes;
  }
  if(seconds == 0){
    seconds = "0"+seconds;
  }

  time = minutes+":"+seconds;
  return time;
}

function iniciar(elemento){
  var icon = elemento.dataset.option;
  range.style.left = 0;
  if(icon === "play"){
    start();
    elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
    elemento.title = "Pausar";
    elemento.dataset.option = "pause";
  }else{
    stop();
    elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
    elemento.title = "Tocar";
    elemento.dataset.option = "play";
  }
}

function start() {
  if (cronometroAtivo) return;
  cronometroAtivo = true;
  counterms = setInterval(function () {
    range.style.left = range.style.left.substring(0, range.style.left.length-2) - 0.129;
    countms = countms + 1;
    id_label_ms.innerHTML = countms / 100 + " s";
  }, 10);
};

function stop(){
  range.style.left = 0;
  cronometroAtivo = false;
  countms = 0;
  id_label_ms.innerHTML = countms + " s";

  clearInterval(counterms);
  cronometroAtivo = false;
};
.containerArea{
  height: auto;
  width: 1030px;
  border: 1px rgb(89,89,89) solid;
  margin-top: 30px;
  background: rgb(173,234,234);
}

.slider {
  position:absolute;
  cursor:pointer;
  height:1px;
  border:2px solid rgb(179,179,179);
  width:1000px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}

#scrollwrap {
  margin-top:30px;  
  overflow:hidden;
  width: 1000px;  
  height:auto;
}

.container{
  min-width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
}

.containerFaixa{
  width: 1000px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(216,216,191);
  border-radius: 7px;
}

.faixa{
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: center;
  line-height: 1.85em;
}

.tempo{
  color: rgb(0, 0, 0);
  font-size: 10px;
  font-weight: inherit;
  font-family: 'Courier New', Courier, monospace;
  font-style: inherit;
  text-decoration: inherit;
}

.progress {
  background-color:rgb(179,179,179);
  height:3px;
  position:absolute;
  width:0;
}

.handle {
  position: absolute;
  z-index:4;
  width: 28px;
  height: 115px;
  background-position: top center;
  background-size: 25px 30px;
  background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
  background-repeat: no-repeat;
  left: 13px;
}

.area {
  position:relative;
  font:bold 90px  sans-serif;
  height:auto;
}

.range {
  display:none;
}
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<html>
<head>


<link type="text/css" rel="stylesheet" href="style-teste.css" />


</head>
<body>
  <input id="range" type="range" max="795" value="0" />

  <div class="containerArea">
    <div id="scrollwrap">
      <div id="area" class="area"></div>
    </div>
  </div>

  <table style="margin-top: 20px;" >
    <tr>
      <td name="btStart"><img id="teste" src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
    </tr>
  </table>

  <div>
    Count: <label id="count_label_ms"></label>
  </div>
  <script src="script-teste.js"></script>
</body>
</html>

eu testei e ficou quase lá com um tempo em torno de 0.12 a 0.13 lá na resposta somente referenteparte range.style.left.substring(0, range.style.left.length-2) - 0.13; // por exemplo agora sou ruim de matemática ao meu ver teria que ser uma formula tipo 2/25 = 0.08, talvez seja esse setInterval=10 que esteja bugando sua formula a cada 10 mms tanto para mais quanto para menos, minha contribuição sobre o problema 1seria isso, obrigado ;)os tamanhos dos blocos e o espaçamentos estava equivocado sobre eles.

Obs: Seu marcador esta mal posicionado no Start, ele tem que ficar encostado no primeiro bloco, fiz uma gambi ai removendo a palavra Start e mexi para posicionar ele ali rente ao primeiro bloco, vai de você ou deixar a palavra Start e posicionar ele, ou remover como eu fiz...

Votem na resposta somente referente ao problema 1, obrigado ;)

Referente ao Problema 2:

Temos os blocos com 23px + 1px de padding + 1 px de borda, da 25px, mas eles estão espaçados por causa do table então tens que tirar o cellspacing deixa ele zerado, então teremos 25px por bloco, ai podemos começar a fazer uma formula e alguns testes ficaria assim:

"use strict";

var id_label_ms = document.getElementById("count_label_ms");
var range = document.getElementById("area");
var cronometro = {};
var countms = 0;
var counterms;
var cronometroAtivo = false;


window.onload = function () {
  areaMusica();

  var scroll = $(".area");

  $(":range").rangeinput({
    onSlide: function(ev, step)  {
      scroll.css({left: -step});
    },
    progress: true,
    change: function(e, i) {
      scroll.animate({left: -i}, "fast");
    },
    speed: 0
  });
  //iniciar( document.getElementById("teste") );
};

function areaMusica(){
  var k = 1; var tabela = '';
  tabela = '<table id="table" cellspacing="0">';
  for (var i = 0; i < 2; i++) {
    if(i < 1){
      tabela += '<tr class="containerFaixa">';
      for (var j = 1; j < 62; j++) {
        if(j == 1){
          tabela += '<td class="faixa" style="min-width: 13px;"></td>';
        }else{
          tabela += '<td class="container" id="td'+k+'"></td>';
          k++;
        }
      }
      tabela += '</tr>';
    }else{
      tabela += '<tr><td></td>';
      for(var j = 1; j < 61; j++) {
        if(j % 5 == 0){
          tabela += '<td class="tempo" colspan="5">'+seconds2time((j*2)-10) +"min - "+seconds2time(j*2)+'min</td>';
        }
      }
      tabela += '</tr>' 
    }
  }
  tabela += '</table>';
  document.getElementById('area').innerHTML = tabela;
}

function seconds2time(seconds){
  var minutes = Math.floor((seconds ) / 60);
  var seconds = seconds - (minutes * 60);
  var time = "";

  if(minutes < 10){
    minutes = "0"+minutes;
  }
  if(seconds == 0){
    seconds = "0"+seconds;
  }

  time = minutes+":"+seconds;
  return time;
}

function iniciar(elemento){
  var icon = elemento.dataset.option;
  range.style.left = 0;
  if(icon === "play"){
    start();
    elemento.src = "http://cdn.flaticon.com/svg/70/70419.svg";
    elemento.title = "Pausar";
    elemento.dataset.option = "pause";
  }else{
    stop();
    elemento.src = "http://cdn.flaticon.com/svg/70/70409.svg";
    elemento.title = "Tocar";
    elemento.dataset.option = "play";
  }
}

function start() {
  if (cronometroAtivo) return;
  cronometroAtivo = true;
  counterms = setInterval(function () {
    range.style.left = range.style.left.substring(0, range.style.left.length-2) - 0.129;
    countms = countms + 1;
    id_label_ms.innerHTML = countms / 100 + " s";
  }, 10);
};

function stop(){
  range.style.left = 0;
  cronometroAtivo = false;
  countms = 0;
  id_label_ms.innerHTML = countms + " s";

  clearInterval(counterms);
  cronometroAtivo = false;
};
.containerArea{
  height: auto;
  width: 1030px;
  border: 1px rgb(89,89,89) solid;
  margin-top: 30px;
  background: rgb(173,234,234);
}

.slider {
  position:absolute;
  cursor:pointer;
  height:1px;
  border:2px solid rgb(179,179,179);
  width:1000px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}

#scrollwrap {
  margin-top:30px;  
  overflow:hidden;
  width: 1000px;  
  height:auto;
}

.container{
  min-width: 23px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
}

.containerFaixa{
  width: 1000px;
  height: 26px;
  border: 1px rgb(140, 173, 188) double;
  background: rgb(216,216,191);
  border-radius: 7px;
}

.faixa{
  color: rgb(0, 0, 0);
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-align: center;
  line-height: 1.85em;
}

.tempo{
  color: rgb(0, 0, 0);
  font-size: 10px;
  font-weight: inherit;
  font-family: 'Courier New', Courier, monospace;
  font-style: inherit;
  text-decoration: inherit;
}

.progress {
  background-color:rgb(179,179,179);
  height:3px;
  position:absolute;
  width:0;
}

.handle {
  position: absolute;
  z-index:4;
  width: 28px;
  height: 115px;
  background-position: top center;
  background-size: 25px 30px;
  background-image: url(http://cdn.flaticon.com/svg/17/17736.svg);
  background-repeat: no-repeat;
  left: 13px;
}

.area {
  position:relative;
  font:bold 90px  sans-serif;
  height:auto;
}

.range {
  display:none;
}
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<html>
<head>


<link type="text/css" rel="stylesheet" href="style-teste.css" />


</head>
<body>
  <input id="range" type="range" max="795" value="0" />

  <div class="containerArea">
    <div id="scrollwrap">
      <div id="area" class="area"></div>
    </div>
  </div>

  <table style="margin-top: 20px;" >
    <tr>
      <td name="btStart"><img id="teste" src="http://cdn.flaticon.com/svg/70/70409.svg" style="width: 30px;" onclick="iniciar(this)" data-option="play" title="Tocar" /></td>
    </tr>
  </table>

  <div>
    Count: <label id="count_label_ms"></label>
  </div>
  <script src="script-teste.js"></script>
</body>
</html>

eu testei e ficou quase lá com um tempo em torno de 0.12 a 0.13 lá na parte range.style.left.substring(0, range.style.left.length-2) - 0.13; // por exemplo agora sou ruim de matemática ao meu ver teria que ser uma formula tipo 2/25 = 0.08, talvez seja esse setInterval=10 que esteja bugando sua formula a cada 10 mms tanto para mais quanto para menos, minha contribuição sobre o problema seria isso, os tamanhos dos blocos e o espaçamentos estava equivocado sobre eles.

Obs: Seu marcador esta mal posicionado no Start, ele tem que ficar encostado no primeiro bloco, fiz uma gambi ai removendo a palavra Start e mexi para posicionar ele ali rente ao primeiro bloco, vai de você ou deixar a palavra Start e posicionar ele, ou remover como eu fiz...

Fonte Link
SneepS NinjA
  • 7,8mil
  • 13
  • 46
  • 92

Referente ao problema 1:

seu teste https://jsfiddle.net/xjyofffu/

meu teste https://jsfiddle.net/nq72w31a/

Ambos não funcionando porém da p/ ter uma idéia que a ordem de execução dos scripts faz diferença, e o jsfiddle esta arbitrando isso.

Outro ponto importante, dentro desse plugin jquery.tools.min.js tem implementado IFRAME coisa que o JSFiddle não aceita.

Votem na resposta somente referente ao problema 1, obrigado ;)