jQuery.blinker demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-blinker/

HTML

<script src="http://pioul.fr/ext/jquery_blinker/jquery.blinker.min.js"></script>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>

<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>

<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>

<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>
<div class="cuadro">
  <div class="hrbg"></div>
  <div class="label"></div>
</div>

SCSS

body {
    background-color: black;    
}

.cuadro{  
  position: relative;
  width: 110px;
  height: 240px;  
  float: left;
  border: solid 1px #666; 
  .hrbg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #222;
  }
  .label{
    position: absolute;
    color: #ddd;
    font-family: Verdana;
    font-size: 12px;
    font-weight: 100;
    z-index: 10;    
  }
}

JavaScript

var maxPulsaciones = 170;

//$(".cuadro").blinker({
//    timeHidden: (1000*60/maxPulsaciones)-100,
//    intervalRangeStart: 100,
//    intervalRangeStop: 100
//});

//$(".cuadro").blinker({
//    timeHidden: ( 1000 * 60 / Math.floor((Math.random() * (maxPulsaciones - 60)) + 60) ) - 100,
//    intervalRangeStart: 100,
//    intervalRangeStop: 100
//});

$(".cuadro").each(function() {
  var hr = Math.floor((Math.random() * (maxPulsaciones - 90)) + 90);
  $(this).find(".label").html(hr);
  $(this).find(".hrbg").blinker({
    timeHidden: (1000 * 60 / hr) - 100,
    intervalRangeStart: 100,
    intervalRangeStop: 100
  })
});