HMTL and JS issue with adding real time counter!

Discussion in 'HTML & JavaScript' started by Zoekban, Jan 29, 2015.

  1. Zoekban

    Zoekban Newbie

    Joined:
    Apr 23, 2013
    Messages:
    28
    Likes Received:
    0
    How can i add a real time counter so that the randomizing will be based on real time and will not start over from every refresh?
    Having trouble with finding a script that i can add to this to make this happen.
    Thanks from advanced!
    Code:
    <script class="jsbin" src="src">
      
    
    
    </script>
    <meta charset=utf-8 />
    <style>
      .rotator-wrapper{
        width: 0px;
        border: 0px solid black;
      }
      ul#rotator, ul#rotator li{
        float: left;
        width: x;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
      }
      ul#rotator li{
        width: 0px;
        position: relative;
      }
      .rotator-image{
        position: absolute;
        display: none;
        width: 69px;
        height: 69px;
      }
      .img1{
        background-color: red; 
      }
        .img2{
        background-color: green; 
        }
     
        
    </style>
    
    
    
    
    <div class="rotator-wrapper">
      <ul id="rotator">
        <li>
          <div class="rotator-image img1"><img src="src" /></div>
          <div class="rotator-image img2"><img src="src" /></div>
    
    
     
       
    
    
        </li>
      </ul>
    </div>
    <script>$(function(){
      // time between image rotate
      var delay = 1500;
      
      // for each list item in 
      // the rotator ul, generate
      // show a random list item
      $('#rotator > li').each(function(){
        // save images in an array
        var $imgArr = $(this).children();
        // show a random image
        $imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
      });
      // run the changeImage function after every (delay) miliseconds
      setInterval(function(){
        changeImage();
      },delay);
      
      function changeImage(){
        // save list items in an array
        var $liArr = $('#rotator > li');
        // select a random list item
        var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
        // get the currently visible image
        var $currImg = $('.rotator-image:visible', $currLi);
        if ($currImg.next().length == 1) {
          var $next = $currImg.next();
        } else {
          var $next = $('.rotator-image:first', $currLi);
        }
        $currImg.fadeOut();
        $next.fadeIn();
      }  
    });
    </script>