gpt4 book ai didi

javascript - 倒计时结束后如何显示图像?

转载 作者:太空宇宙 更新时间:2023-11-04 15:55:46 24 4
gpt4 key购买 nike

我想在 jQuery 倒数计时器结束后显示全屏图像,但我很困惑如何在我的 jQuery/css/html 脚本中执行此操作我的 jQuery 代码如下:

//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);

我的HTML如下:

<!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如下-

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

如开头所述,我只想在倒计时结束后显示一张图片和一条声明。我真的很感激这里的一些帮助。非常感谢。

最佳答案

//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>

关于javascript - 倒计时结束后如何显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45846021/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com