1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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:
    18
    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>