1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Make a rectangle blink at a set rate

Discussion in 'HTML & Website Design' started by horseygirl, Dec 12, 2019.

  1. #1
    Im looking all over and need to work out how to make a rectangle blink on and then off at a set rate then change colour at a random time set between two figures.
     
    horseygirl, Dec 12, 2019 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    qwikad.com, Dec 12, 2019 IP
  3. horseygirl

    horseygirl Well-Known Member

    Messages:
    534
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    143
    #3
    hey thanks for that ...

    I want it to blink at about 1.5 sec intervals and every now and again go black.

    maybe hire you to help me
     
    horseygirl, Dec 12, 2019 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,487
    Likes Received:
    4,455
    Best Answers:
    123
    Trophy Points:
    665
    #4
    This needs more work but it gives you something to play with.
    I took the code that @qwikad.com and messed with it.

    The main issue is that even though the classname is changed and then there's a delay for the next change the new class isn't shown properly on the browser. Not something I've tackled before.

    I've used a few more variables & functions than I normally would, hopefully makes it more newbie friendly.

    <html>
    <head>
    <style>
    .mc-ylw-blk {
      background: #000;
      color: white;
    }
    
    .mc-blk-red {
      background: #000;
      background: red;
    }
    
    .mc-blk-ylw {
      color: #000;
      background: yellow;
    }
    
    .animation {
      text-align: center;
      font-size: 21px;
      height: 50px;
      width: 180px;
      padding: 5px;
      border: 1px solid silver;
      margin: 0;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div class="animation" data-change-state=0>
        Click Me!
      </div>
    </div>
    
    <script><!--
    // Catches the clicks and changes the attribute so the do loop knows when to stop
    function clickCatcher() {
      var changer = this.getAttribute('data-change-state');
    
      if (changer == 0) {
        this.setAttribute("data-change-state", 10);
        runChanger(this);
      } else {
        this.setAttribute("data-change-state", 0);
      }
    }
    
    // This controls the timing of the changes 
    function runChanger(obj) {
      console.log(obj.getAttribute('data-change-state'));
      var lower_bound = 1000;
      var upper_bound = 4000;
    
      do {
        classChanger(obj);
        var r1 = getRandomNumber(lower_bound, upper_bound);
       
        obj.setAttribute("data-change-state", obj.getAttribute('data-change-state')-1);
        console.log(obj.getAttribute('data-change-state'));
        sleep(r1);
      }
      while (obj.getAttribute('data-change-state') > 0);
    }
    
    function classChanger(obj) {
      var classes = ["mc-blk-ylw", "mc-ylw-blk", "mc-blk-red"];
      var r2 = getRandomNumber(0, classes.length);
      var newClass = "animation " + classes[r2];
      obj.className = newClass;
      console.log(newClass);
    }
    
    // Puts the maths into one place so that runChanger is more readable.
    function getRandomNumber(lower_bound, upper_bound) {
      var random_number = Math.floor(Math.random() * (upper_bound - lower_bound) + lower_bound);
      return random_number;
    }
    
    function sleep(milliseconds) {
      const date = Date.now();
      let currentDate = null;
      do {
        currentDate = Date.now();
      } while (currentDate - date < milliseconds);
    }
    
    // This kicks it off
    console.log('start');
    var elements = document.getElementsByClassName("animation");
    for (i = 0; i < elements.length; i++) {
      elements[i].addEventListener("click", clickCatcher);
    }
    --></script>
    <body>
    </html>
    Code (markup):
     
    sarahk, Dec 12, 2019 IP
  5. horseygirl

    horseygirl Well-Known Member

    Messages:
    534
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    143
    #5
    thanks, will have a play and see how it works. x
     
    horseygirl, Dec 12, 2019 IP
  6. horseygirl

    horseygirl Well-Known Member

    Messages:
    534
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    143
    #6
    cant get this to run
     
    horseygirl, Dec 13, 2019 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,487
    Likes Received:
    4,455
    Best Answers:
    123
    Trophy Points:
    665
    #7
    Use console.log to test what is breaking it.
     
    sarahk, Dec 13, 2019 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Honestly, not even sure this is JavaScript's job. If there's no user interaction and it's not completely random, you might be able to do this with just CSS "keyframe" animations.

    But honestly without knowing the semantics, the why, or if it has user interactions, none of us really have much business providing code.

    The why in particular is important... just TRYING to piss off users with something distracting 1990's style?
     
    deathshadow, Dec 13, 2019 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    28,487
    Likes Received:
    4,455
    Best Answers:
    123
    Trophy Points:
    665
    #9
    I know, right!
     
    sarahk, Dec 13, 2019 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    kk5st, Dec 14, 2019 IP