Flashing background colors on a website

Question

Flashing background colors on a website

Can anyone explain why this code won't alternate the background color of my website between two different colors?

<script type="text/javascript">
function blinkit() {
    intrvl = 0;
    for (nTimes = 0; nTimes < 3; nTimes++) {
        intrvl += 1000;
        setTimeout("document.bgColor='#0000FF';", intrvl);
        intrvl += 1000;
        setTimeout("document.bgColor='#FFFFFF';", intrvl);
    }
}
</script>

jquery html css background-color

Answer 1

Answer №1

Give this a try:

function pulseColor() {
    interval = 0;
    window.setInterval(function(){
        interval += 1000;
        setTimeout("document.bgColor='#FF0000';", interval);
        interval += 1000;
        setTimeout("document.bgColor='#FFFFFF';", interval);
    }, interval);
}

Answer 2

Give this a try:

function pulseColor() {
    interval = 0;
    window.setInterval(function(){
        interval += 1000;
        setTimeout("document.bgColor='#FF0000';", interval);
        interval += 1000;
        setTimeout("document.bgColor='#FFFFFF';", interval);
    }, interval);
}

Answer 3

Answer №2

Avoid passing strings to the setTimeout function, as it is just as risky as using eval.

Instead, consider implementing a function like this:

function blinkEffect(repetitions, callback) {
    var toggle = repetitions*2, timer = setInterval(function() {
            document.body.style.backgroundColor = toggle%2 ? "#0000FF" : "#FFFFFF";
            toggle--;
            if( !toggle) {
                clearInterval(timer);
                callback && callback();
            }
        },1000);
    return timer;
}
var flashing = blinkEffect(3);
// The background will flash three times.
// You can also stop it with `clearInterval(flashing);`

Using the provided code snippet, you have the option to specify an action to be taken upon completion:

var flashing = blinkEffect(3,function() {alert("Hello!");});

Answer 4

Avoid passing strings to the setTimeout function, as it is just as risky as using eval.

Instead, consider implementing a function like this:

function blinkEffect(repetitions, callback) {
    var toggle = repetitions*2, timer = setInterval(function() {
            document.body.style.backgroundColor = toggle%2 ? "#0000FF" : "#FFFFFF";
            toggle--;
            if( !toggle) {
                clearInterval(timer);
                callback && callback();
            }
        },1000);
    return timer;
}
var flashing = blinkEffect(3);
// The background will flash three times.
// You can also stop it with `clearInterval(flashing);`

Using the provided code snippet, you have the option to specify an action to be taken upon completion:

var flashing = blinkEffect(3,function() {alert("Hello!");});

Flashing background colors on a website

Answer №1

Answer №2

Similar questions

Specify the title attribute by using a language-based string

Loading 3D models in Three.js from the cache

Dropdown sidebar with collapsible sections

Safari on the iPad does not support opening debugging through the HTML tag

Validation of PO Box Addresses Using Regular Expressions

Guide to importing a JSON file into Vue.js and HTML

Displaying the age figure in JSX code with a red and bold formatting

Struggling to retrieve Ajax data and assign it to a PHP variable?

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

Styling with CSS in a React component

Divide and Insert a Gap in Phone Number

Troubleshooting: JQuery anchor scrolling malfunctioning in Internet Explorer

A problem arises when trying to showcase the content in a responsive manner on the hamburger menu, particularly when viewing on mobile

The Navbar Button is having trouble with vertical alignment

Issue with onblur and focus while returning back from external window

Using DataTables with PHP and AJAX allows for the ability to modify the data before it is displayed

How to play audio with a source path that includes the special character "%" in JavaScript

Interacting with a RESTful Service on a separate server

What does "SPAN CLASS="SKYPE_C2C_FREE_TEXT_SPAN" refer to?

JavaScript and the importance of using commas in arrays