Javascript 如何在倒计时结束后显示图像？_Javascript_Jquery_Html_Css

Javascript 如何在倒计时结束后显示图像？

javascript jquery html css

Javascript 如何在倒计时结束后显示图像？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在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(f

我试图在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);

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

正如前面提到的，我只想在倒计时结束后显示一个图像和一条语句。我真的很想在这里得到一些帮助。非常感谢。

//考虑使用此函数来显示图像和
函数myFunction（）{
document.getElementById（“displayImage”）.style=“display:block”；
}
//这将在设置的时间内调用myFunction（）。
设置间隔（myFunction，5000）；
//5000以毫秒为单位，即5秒。


假设这是您要显示的图像

请使用此JSFIDLE作为参考。请将

倒计时日期设置为将来的时间，否则它将无法工作
演示：
代码：
//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);

//设置时钟倒计时的日期和时间
var countDownDate=新日期（“2017年8月23日23:29:00”）.getTime（）；
//每秒钟更新一次计数器
var x=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//查找从现在到倒计时日期之间的时间长度
var距离=倒计时日期-现在；
//天、小时、分钟和秒的时间计算
变量天数=数学楼层（距离/（1000*60*60*24））；
可变小时数=数学楼层（（距离%（1000*60*60*24））/（1000*60*60））；
var分钟=数学楼层（（距离%（1000*60*60））/（1000*60））；
var秒=数学楼层（（距离%（1000*60））/1000）；
//在id为“demo”的元素中输出结果
document.getElementById（“demo”）.innerHTML=days+“d”+hours+“h”+minutes+“m”+seconds+“s”；
//如果倒计时结束，写一些文字
如果（距离<0）{
净间隔（x）；
document.getElementById（“demo”）.innerHTML=“你被特里萨·梅骗了”；
var m=document.getElementsByClassName（“图像”）；
m[0]。src=”https://upload.wikimedia.org/wikipedia/commons/7/79/Operation_Upshot-Knothole_-_Badger_001.jpg";
}
}, 1000);
一种常见的方法是将图像添加到html中，但使用css类将其隐藏
HTML：
<img id="hiddenImage" class="hiddenClass" src="someSource.jpg">

然后，使用jQuery或vanilla JS，您可以将CSS类更改为其他类，或者删除该类
jQuery：
.hiddenClass {
  display: none;
}

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

jsiddle演示：不用担心。另外，别忘了将其中一个答案标记为已接受。否则，新人可能会毫无必要地花时间来回答这个问题。
<img id="hiddenImage" class="hiddenClass" src="someSource.jpg">