Question

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

正如开头所提到的，我只想在倒计时结束后显示图像和声明。我真的很感激这里的一些帮助。非常感谢。

Answer 1

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

Answer 2

请使用此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);

Answer 3

一种常见的方法是将图像添加到html中，但使用css类隐藏它。

HTML ：

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

<强> CSS ：

.hiddenClass {
  display: none;
}

然后，使用jQuery或vanilla 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/

倒数计时器结束后如何显示图像？

3 个答案: