Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="New Spinning Circles 2.2.9">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button id='start'>Start</button>
<button id='stop'>Stop</button>
<div id='timing'></div>
  
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//canjs.com/release/2.2.9/can.jquery.js"></script>
<script src="//canjs.com/release/2.2.9/can.stache.js"></script>
</body>
</html>
 
p {
          font: 12px/16px Arial;
          margin: 10px 10px 15px;    
        }
        
        button {
          font: bold 14px/14px Arial;  
          margin-left: 10px;
        }
        
        #grid {
          margin: 10px;
        }
        
        #timing {
          clear: both;
          padding-top: 10px;
        }
        
        .box-view {
          width: 20px; height: 20px;
          float: left;
          position: relative;
          margin: 8px;    
        }
        
        .box {
          border-radius: 100px;
          width: 20px; height: 10px;
          padding: 5px 0;
          color: #fff;
          font: 10px/10px Arial;
          text-align: center;
          position: absolute;
        }
 
var template = can.stache(
            "{{#each boxes}}"+
                "<div class='box-view'>"+
                    "<div class='box' id='box-{{number}}'  style='{{style}}'>"+
                        "{{content}}"+
                    "</div>"+
                "</div>"+
            "{{/each}}");
            
            
var boxes = new can.List(),
    Box = can.Map.extend({
      top: 0,
      left: 0,
      content: 0,
      count: 0,
​
      tick: function() {
        var count = this.attr('count') + 1;
​
        this.attr('count', count);
        this.attr('top', Math.sin(count / 10) * 10);
        this.attr('left', Math.cos(count / 10) * 10);
        this.attr('color', count % 255);
        this.attr('content', count % 100);
        this.attr('style', this.computeStyle());
​
      },
​
      computeStyle: function() {
        return 'top: ' + this.attr('top') + 'px; left: ' +  this.attr('left') +'px; background: rgb(0,0,' + this.attr('color') + ');';
      }
    });
        
for(var i =0; i < 100; i++) {
  var box = new Box({ number: i });
  box.tick();
  boxes.push( box );
}
​
var frag = template({boxes: boxes});
var div = document.createElement("div")
document.body.appendChild(div)
div.appendChild(frag)
​
var count = 0;
​
​
var run = function(){
  can.batch.start();
  for(var n = 0 ; n < boxes.length; n++) {
    boxes[n].tick();
  }
  can.batch.stop();
};
​
$("#start").click(function(){
  loopCount = 0;
  totalTime = 0;
  console.profile("loops");
  benchmarkLoop(run);
});
​
​
​
window.timeout = null;
window.totalTime = null;
window.loopCount = null;    
window.benchmarkLoop = function(fn) {
  var startDate = new Date();
  fn();
  var endDate = new Date();
  totalTime += endDate - startDate;
  loopCount++;
  if (loopCount % 100 === 0) {
    $('#timing').text('Performed ' + loopCount + ' iterations in ' + totalTime + ' ms (average ' + (totalTime / loopCount).toFixed(2) + ' ms per loop).');
  }
  if(loopCount < 1000) {
    timeout = setTimeout(function(){
      benchmarkLoop(fn);
    },1);
  } else {
    console.profileEnd("loops");
  }
​
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x