What is the process for creating a blinking, overlapping image using Javascript?

Question

What is the process for creating a blinking, overlapping image using Javascript?

I'm trying to achieve a visually appealing effect with this countdown. The goal is to have it count into negative numbers, at which point a skull and crossbones image should become visible and start flashing. To do this, I am utilizing JavaScript functionality...

var img = document.getElementById('Image1');
var interval = window.setInterval(function() {
    if (img.display == 'hidden'){
        img.style.visibility = 'visible';
    } else {
        img.style.visibility = 'hidden';
    }
}, 1000);

Once the flashing effect is in place, what is the best way to make sure it overlaps the countdown span? http://jsfiddle.net/2Lufxs2t/3/

javascript html css

Answer 1

Answer №1

Following the line

var img = document.getElementById('Image1');

, include

document.getElementById('countdown').style.display='none';

to conceal your timer.

Eliminate the second interval in your code:
```
var interval = window.setInterval(function(){
```
. Keep only the if statement that controls visibility. The issue lies in the fact that secondPassed() is running every second, and then your second interval is also being executed every second. This results in the inner interval running twice per second and toggling itself repeatedly.

Answer 2

Following the line

var img = document.getElementById('Image1');

, include

document.getElementById('countdown').style.display='none';

to conceal your timer.

Eliminate the second interval in your code:
```
var interval = window.setInterval(function(){
```
. Keep only the if statement that controls visibility. The issue lies in the fact that secondPassed() is running every second, and then your second interval is also being executed every second. This results in the inner interval running twice per second and toggling itself repeatedly.

Answer 3

Answer №2

JSFiddle This solution worked perfectly for my needs.

<html>
    <head>
    <title>Timer</title>
    <script type="text/javascript">
    var seconds = 10;

function stopTimer() {
    clearTimeout(countdownTimer)
}

function floor(x) {
    return x | 0;
}

function pad(n) {
    if (n < 0) {
        n = -n;
    }
    if (n < 10) {
        return '0' + n.toString();
    }
    return n.toString();
}

function secondPassed() {
    var minutes = pad(floor(seconds / 60));
    if (seconds < 0) {
        minutes = '-' + minutes;
    }
    var remainingSeconds = pad(seconds % 60);

    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds > 0) {
        seconds--;
        if (seconds > 8) {
            document.body.style.backgroundColor = "green";
        } else if (seconds == 5) {
            document.body.style.backgroundColor = "yellow";
        } else if (minutes == 0 & seconds == 0) {
            document.body.style.backgroundColor = "red";

            if (seconds%2 == 0) {
            document.getElementById('skull').style.display="none";  
            } 

            if (seconds%2 != 0) {
            document.getElementById('skull').style.display="block";             
            }


        }
    } else {

                if (seconds%2 == 0) {
            document.getElementById('skull').style.display="block";  
            } 

            if (seconds%2 != 0) {
            document.getElementById('skull').style.display="none";              
            }

        seconds--;
    }
}
    </script>
    </head>
    <body>
     <img id="skull" src="http://s15.postimg.org/es5w3xpob/skull.gif"style="position:absolute;  z-index: -1;display:none;">
     <div style=" z-index:10;">
    <p align ="center">
    <span id="countdown" style="color:black; font-size: 450px; font-weight: bold;" ></span>
    </br>
    <button onclick="countdownTimer = setInterval('secondPassed()', 1000)">Start</button>
    <button onclick="stopTimer()">Stop</button>



        </p>

        </div>
    </body>
    </html>

Answer 4

JSFiddle This solution worked perfectly for my needs.

<html>
    <head>
    <title>Timer</title>
    <script type="text/javascript">
    var seconds = 10;

function stopTimer() {
    clearTimeout(countdownTimer)
}

function floor(x) {
    return x | 0;
}

function pad(n) {
    if (n < 0) {
        n = -n;
    }
    if (n < 10) {
        return '0' + n.toString();
    }
    return n.toString();
}

function secondPassed() {
    var minutes = pad(floor(seconds / 60));
    if (seconds < 0) {
        minutes = '-' + minutes;
    }
    var remainingSeconds = pad(seconds % 60);

    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds > 0) {
        seconds--;
        if (seconds > 8) {
            document.body.style.backgroundColor = "green";
        } else if (seconds == 5) {
            document.body.style.backgroundColor = "yellow";
        } else if (minutes == 0 & seconds == 0) {
            document.body.style.backgroundColor = "red";

            if (seconds%2 == 0) {
            document.getElementById('skull').style.display="none";  
            } 

            if (seconds%2 != 0) {
            document.getElementById('skull').style.display="block";             
            }


        }
    } else {

                if (seconds%2 == 0) {
            document.getElementById('skull').style.display="block";  
            } 

            if (seconds%2 != 0) {
            document.getElementById('skull').style.display="none";              
            }

        seconds--;
    }
}
    </script>
    </head>
    <body>
     <img id="skull" src="http://s15.postimg.org/es5w3xpob/skull.gif"style="position:absolute;  z-index: -1;display:none;">
     <div style=" z-index:10;">
    <p align ="center">
    <span id="countdown" style="color:black; font-size: 450px; font-weight: bold;" ></span>
    </br>
    <button onclick="countdownTimer = setInterval('secondPassed()', 1000)">Start</button>
    <button onclick="stopTimer()">Stop</button>



        </p>

        </div>
    </body>
    </html>

What is the process for creating a blinking, overlapping image using Javascript?

Answer №1

Answer №2

Similar questions

Is it possible to update a Rails element using an AJAX request?

Is it possible that the div's height is not being set to 0 pixels

What are the reasons for validation failure when it is moved into a method?

`Something to keep in mind: Chartist in jspm does not import CSS files`

What is the best way to retrieve the last 3 elements that have a specific name value using JMESPATH and JavaScript?

Implementing Default Language in Next.js 14 for Static Export without URL Prefix: A Step-by-Step Guide

Showing user data in a div using JavaScript ajax without the use of jQuery

Type parameter in express.js route

What is the reason for replace() not working with the word "my"?

Retrieving the checkbox value from a dropdown selection

Tips for utilizing the simple-peer module within a Node.js environment?

The CSS grid-template-areas feature is not performing as anticipated

Issue with ng-bind not functioning correctly within a custom directive on a label

The div just won't stay the size I want, no matter what

Scatter chart in highcharts showcasing data in 4 quadrants

What is the best way to show the current value of a checkbox element in the future?

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

Issue with Bootstrap 4 navbar functionality on smaller screens

The usage of $http.post in combination with TypeScript accessors

Tips on extracting information from Chrome's network console feature