você está aqui: Home  → Arquivo de Mensagens

Contador de tempo para palestras

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 20 de outubro de 2015

Controlar o tempo em palestras é algo constrangedor, o palestrante geralmente fica bastante empolgado quando está chegando o final de seu tempo e fica difícil atrair sua atenção.

Um contador exibido em uma TV, que muda de cor frequentemente, alertando sobre a chegada do final do tempo, pode ser mais efetivo e menos intrusivo.

No portal da Universidade da Califórnia, encontramos um contador altamente configurável. Você pode determinar o tempo a ser usado, tamanho e cor das letras, e as mudanças de aspecto à medida que o tempo vai acabando.

Para criar o seu próprio contador visite o portal do Departamento de Ciência da Computação da Universidade da Califórnia.

Eu fiz um teste, configurando o contador para cinco minutos e alterei também o valor das cores das diferentes telas. O código gerado está abaixo:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en-US">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <title>Countdown Timer</title>
  </head>
  <body>
  </body>
  <script>
  <!--
  
  var timerFont = "sans-serif"
  var fontSize = 256
  var fontUnit = "pt"
  
  var normalBackColor = "palegreen";
  var normalForeColor = "navy";
  
  var warnBackColor = "yellow";
  var warnForeColor = "navy";
  
  var alarmBackColor = "red";
  var alarmForeColor = "white";
  
  var doneBlink = false;
  var blinkSwapped = false;       // True if blink state has colors swapped
                                  // ..at the moment
  
  var timeLeft = 300;
  var warnTime = 60
  var alarmTime = 30
  
  var roundTo = 10;
  var warnRoundTo = 5;
  var alarmRoundTo = 1;
  
  function update()
      {
      display()
      var now = new Date()
      now = now.getTime()
      var left = target - now
      if (left > 0  ||  doneBlink)
  	{
  	var nextUpdate = left % 1000
  	if (nextUpdate == 0)
  	    nextUpdate = 1
          else if (nextUpdate < 0)
              nextUpdate += 1000
  	setTimeout("update()", nextUpdate)
  	}
      }
  
  function display()
      {
      var now = new Date()
      now = now.getTime()
      var left = target - now
      // Round to nearest second
      if (left % 1000 < 500)
  	left = Math.floor(left / 1000);
      else
  	left = Math.ceil(left / 1000);
      if (left < 0)
  	left = 0
      // Round up to multiple of n
      var round = roundTo
      if (left <= alarmTime)
  	round = alarmRoundTo
      else if (left <= warnTime)
  	round = warnRoundTo
      var rounded = Math.floor((left + round - 1) / round) * round
      var minutes = Math.floor(rounded / 60)
      var seconds = rounded % 60
      var sec = seconds
      if (seconds < 10)
  	sec = "0" + seconds
      document.getElementById("countdown").innerHTML = minutes + ":" + sec
      if (left <= 0  &&  doneBlink)
  	{
  	// Blink every two seconds.  Blinking is done by swapping the
          // foreground and background colors.
          blinkSwapped = !blinkSwapped
          if (blinkSwapped)
              {
              document.getElementById("countdown").style.color = alarmForeColor
              document.getElementById("countdown").style.backgroundColor = alarmBackColor
              }
          else
              {
              document.getElementById("countdown").style.color = alarmBackColor
              document.getElementById("countdown").style.backgroundColor = alarmForeColor
              }
  	}
      else if (left <= alarmTime)
  	{
  	document.getElementById("countdown").style.color = alarmForeColor
  	document.getElementById("countdown").style.backgroundColor = alarmBackColor
  	}
      else if (left <= warnTime)
  	{
  	document.getElementById("countdown").style.color = warnForeColor
  	document.getElementById("countdown").style.backgroundColor = warnBackColor
  	}
      }
  
  //
  // Set up a dictionary that has all our default variables
  //
  var dictionary = []
  
  dictionary['timerFont'] = timerFont
  dictionary['fontSize'] = fontSize
  dictionary['fontUnit'] = fontUnit
  dictionary['normalBackColor'] = normalBackColor
  dictionary['normalForeColor'] = normalForeColor
  dictionary['warnBackColor'] = warnBackColor
  dictionary['warnForeColor'] = warnForeColor
  dictionary['alarmBackColor'] = alarmBackColor
  dictionary['alarmForeColor'] = alarmForeColor
  if (doneBlink)
      dictionary['doneBlink'] = "true"
  else
      dictionary['doneBlink'] = "false"
  dictionary['timeLeftMinutes'] = Math.floor(timeLeft / 60)
  dictionary['timeLeftSeconds'] = timeLeft % 60
  dictionary['warnTime'] = warnTime
  dictionary['alarmTime'] = alarmTime
  dictionary['roundTo'] = roundTo
  dictionary['warnRoundTo'] = warnRoundTo
  dictionary['alarmRoundTo'] = alarmRoundTo
  
  //
  // Parse name/value pairs from the URL.
  //
  // First, strip off the leading '?'
  var searchString = document.location.search;
  searchString = searchString.substring(1);
  
  var nvPairs = searchString.split("&");
  // Now loop through the pairs, and extract what we want
  for (i = 0; i < nvPairs.length; i++)
      {
      var nvPair = nvPairs[i].split("=");
      var name = nvPair[0];
      var value = nvPair[1];
      dictionary[name] = value
      }
  
  //
  // Pick out all variable values that we allow to be controlled from
  // the URL
  //
  timerFont = dictionary['timerFont']
  fontSize = dictionary['fontSize']
  fontUnit = dictionary['fontUnit']
  if (fontUnit == "pct")
      fontUnit = "%"
  normalBackColor = dictionary['normalBackColor']
  normalForeColor = dictionary['normalForeColor']
  warnBackColor = dictionary['warnBackColor']
  warnForeColor = dictionary['warnForeColor']
  alarmBackColor = dictionary['alarmBackColor']
  alarmForeColor = dictionary['alarmForeColor']
  if (dictionary['doneBlink'] == "true") 
      doneBlink = true
  else
      doneBlink = false
  timeLeft = +dictionary['timeLeftMinutes'] * 60 + (+dictionary['timeLeftSeconds'])
  warnTime = +dictionary['warnTime']
  alarmTime = +dictionary['alarmTime']
  roundTo = +dictionary['roundTo']
  warnRoundTo = +dictionary['warnRoundTo']
  alarmRoundTo = +dictionary['alarmRoundTo']
  
  var now = new Date();
  now = now.getTime()
  var target = now + timeLeft * 1000
  
  document.write("<center><span id='countdown' "
    + "style='background-color:" + normalBackColor
    + "; color:" + normalForeColor
    + "; font-size:" + fontSize + fontUnit
    + "; font-family: " + timerFont
    + "'></span></center>");
  
  setTimeout("update()", 1000)
  display()
  -->
  </script>
  </html>


Veja a relação completa dos artigos de Rubens Queiroz de Almeida