カウントダウンタイマーの終了後に画像を表示するには？

私はjQueryのカウントダウンタイマーが終了した後に、フルスクリーン画像を表示しようとしていますが、私は次のように私のjQueryのコードがある私のjQuery/CSS/HTMLスクリプト内にこれを行うにはどのように混乱しています：カウントダウンタイマーの終了後に画像を表示するには？

//Sets the date and time the clock is counting down to 
var countDownDate = new Date("August 23, 2017 17:43:00").getTime(); 

//Updates the counter every second 
var x = setInterval(function() { 

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

    // Finding the length of time between now and 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); 

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

    // if the count down is over, write some text 
    if (distance < 0) { 
    clearInterval(x); 
    document.getElementById("demo").innerHTML = " you've been screwed over by  Theresa May"; 
    function myFunction() { 
     var m = document.getElementsByClassName("image"); 
     m[0].innerHTML = "image"; 
    } 
    } 
}, 1000);

マイ私は単にdisplしたい冒頭で述べたようにfollows-

p { 
    text-align: center; 
    font-size: 80px; 
} 
h1 { 
    text-align: center; 
    font-size: 200px; 
}

として

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Brexit Countdown 2</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href ="Brexit2.css" rel="stylesheet" type="text/css"/> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> 
<script src="Brexit2.js"></script> 
</head> 
<body> 
<h1>Brexit Countdown</h1> 
<p id="demo"></p> 

</body> 
</html>

私のCSSは次のようにHTMLであります最終的にカウントダウンが終了した後のステートメントとともに画像が表示されます。私は本当にここでいくつかの助けに感謝します。どうもありがとう。

出典

2017-08-23 Roger Hart

//Consider this function to display the image and the <p> 
 
function myFunction() { 
 
    document.getElementById("displayImage").style="display:block"; 
 
} 
 

 
//This calls the myFunction() in the set time. 
 
setInterval(myFunction, 5000); 
 

 
//5000 is in milliseconds, which is 5 seconds.

<div id="displayImage" style="display:none"> 
 
    <img src="https://www.google.co.in/images/branding/googleg/1x/googleg_standard_color_128dp.png"> 
 
    <p>Assume that this is the image you wanna display...</p> 
 
</div>

出典

2017-08-23 17:56:35

参考としてこのJSFiddleを使用してください。 countDownDateを将来の時刻に設定してください。それ以外の場合は動作しません。

デモ：here

コード：

//Sets the date and time the clock is counting down to 
var countDownDate = new Date("August 23, 2017 23:29:00").getTime(); 

//Updates the counter every second 
var x = setInterval(function() { 

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

    // Finding the length of time between now and 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); 

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

    // if the count down is over, write some text 
    if (distance < 0) { 
    clearInterval(x); 
    document.getElementById("demo").innerHTML = " you've been screwed over <br> by Theresa May"; 
     var m = document.getElementsByClassName("image"); 
     m[0].src = "https://upload.wikimedia.org/wikipedia/commons/7/79/Operation_Upshot-Knothole_-_Badger_001.jpg"; 
    } 
}, 1000);

出典

2017-08-23 18:00:38

ワンダフル！確かに多くのありがとう！ –

@RogerHartあなたも大丈夫です –

一般的な方法は、HTMLに画像を追加することですが、CSSクラスを使用して、それを隠すために。

HTML：

<img id="hiddenImage" class="hiddenClass" src="someSource.jpg">

はCSS：

.hiddenClass { 
    display: none; 
}

次に、jQueryのか、バニラJSを使用して、あなたが何か他のものにCSSクラスを変更、またはクラスを削除しますか。

jQueryの：

// find by id, the jQuery way 
var image = $('#hiddenImage'); 
// remove the class that was hiding the image before 
// this will make it visible by default 
image.removeClass('hiddenClass');

JsFiddleデモ：https://jsfiddle.net/jonahe/rxprv1c0/

出典

2017-08-23 18:11:31 jonahe

うわー本当に助けてくれてありがとうございました:) –

心配はいりません。 PS。回答の1つを受け入れたものとしてマークすることを忘れないでください。そうでなければ、新しい人はこの質問に答えるために不必要に時間を費やすかもしれません。 – jonahe

カウントダウンタイマーの終了後に画像を表示するには？

答えて

関連する問題