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.
Something like that? http://jsfiddle.net/6td2sqf4/1/ Not sure what you mean by "between two figures".
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
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):
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?
Then, there's the official poop from the group: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink