Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML I want to add a gif after the end of countdown timer....

tejask04

Coder
The code:-

HTML:
<!-- Display the countdown timer in an element -->

<p id="demo"></p>



<script>

// Set the date we're counting down to

var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();



// Update the count down every 1 second

var x = setInterval(function() {



// Get today's date and time

  var now = new Date().getTime();



// Find the distance between now and the count down date

  var distance = countDownDate - now;



// Time calculations for days, hours, minutes and seconds

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);



// Display the result in the element with id="demo"

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "

+ minutes + "m " + seconds + "s ";



// If the count down is finished, write some text

  if (distance < 0) {

clearInterval(x);

document.getElementById("demo").innerHTML = "EXPIRED";

  }

}, 1000);

</script>

THIS CODE IS FROM W3SCHOOLS......which I've modified. But wants to make a gif visible after the countdown ends.......plz help😓
 
Last edited by a moderator:
Solution
Is this what you want -
HTML:
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gif After Countdown</title>
   
    <style>
        .main {
            box-sizing: border-box;
            width: 40%;
            margin: 5rem auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid green;
        }
       
        .main p {
            padding: 1rem;
        }
       
        .main img {
            max-height: 10rem;
            padding: 1rem;
            display: none;
        }
    </style>
</head>...
Is this what you want -
HTML:
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gif After Countdown</title>
   
    <style>
        .main {
            box-sizing: border-box;
            width: 40%;
            margin: 5rem auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid green;
        }
       
        .main p {
            padding: 1rem;
        }
       
        .main img {
            max-height: 10rem;
            padding: 1rem;
            display: none;
        }
    </style>
</head>

<body>
    <!-- Display the countdown timer in an element -->
    <div class="main">
        <p id="demo"></p>
        <img id="demo-img" src="https://media.giphy.com/media/7kn27lnYSAE9O/giphy.gif" />
    </div>
   
    <script>
        // Set the date we're counting down to
        var countDownDate = new Date("July 6, 2021 22:54:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
                document.getElementById("demo-img").style.display = "block";
            }
        }, 1000);
    </script>
   
</body>

</html>
 
Solution
Hey! Is there a way to fix the gif scaling so that it doesn't go out of the outline (box). The issue is, the gif inserted in the box appears to be bigger than it in android device......while it appears OK when on large screen. So, what do I use to scale the gif to the box?
 
Yaa, problem solved. I increased the width of the box.....thanks:blush:
This isn't the best solution because a different, larger GIF could be bigger than the box.
What you really should use is style "max-width:100%;" on the GIF image itself. This will force the GIF to never be larger than 100% width, and then you can have height:auto so that it automatically scales. This is ideal so that your GIF is always perfect for almost any screen size. If you just make the box bigger there's still a chance the GIF won't look great on different devices.
 
Is this what you want -
HTML:
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gif After Countdown</title>
  
    <style>
        .main {
            box-sizing: border-box;
            width: 40%;
            margin: 5rem auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid green;
        }
      
        .main p {
            padding: 1rem;
        }
      
        .main img {
            max-height: 10rem;
            padding: 1rem;
            display: none;
        }
    </style>
</head>

<body>
    <!-- Display the countdown timer in an element -->
    <div class="main">
        <p id="demo"></p>
        <img id="demo-img" src="https://media.giphy.com/media/7kn27lnYSAE9O/giphy.gif" />
    </div>
  
    <script>
        // Set the date we're counting down to
        var countDownDate = new Date("July 6, 2021 22:54:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
                document.getElementById("demo-img").style.display = "block";
            }
        }, 1000);
    </script>
  
</body>

</html>
Can I make a sound play after the countdown is over? Like, preview of a google drive audio file.....🤔
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom