Bilder angezeigt basierend auf geraden oder ungeraden Minuten

Question

Ich bin ein Neuling und habe viel Zeit damit verbracht, herauszufinden, dies auf eigene Faust. Überprüfen Sie diese page. Es zeigt zwei Bilder in Wordpress. Mein Ziel ist es, die Hälfte der Besucher auf dieser Seite zu haben, um die Bilder so zu sehen, wie Sie sie sehen. Welches ist Ad1 zuerst und Ad2 Sekunde. Und die andere Hälfte der Besucher Ad2 zuerst und Ad1 Sekunde zu sehen. Der Ansatz, den ich versuche, ist Minuten der Stunde zu verwenden. Sogar Minuten rendern die Seite in eine Richtung. Ungerade Minuten rendern in die andere Richtung. Wenn eine Seite geladen wird, kann ich die aktuelle Minute mit dem folgenden Code finden:

var d = new Date() 
var n = d.getMinutes() 

An dieser Stelle ich die ISEVEN oder ISODD Javascript-Funktion verwenden werde. Ich versuche herauszufinden, wie ich mit If Else die Bilder anzeigen kann. Ich weiß nicht, wie zu trennen war, um das Javascript zu setzen und den HTML-Body zu setzen. Hier ist, womit ich gespielt habe. Dies ist wahrscheinlich sehr einfach, aber ich kann es einfach nicht herausfinden. Ich habe die if-Anweisung auf viele verschiedene Arten ausprobiert. Ich denke, dass die Bilder HTML außerhalb des Javascriptabschnitts sein müssen. Wie kann ich die Bilder basierend auf einem If Else rendern?

Jede Hilfe würde sehr geschätzt werden. Ich bin sehr verwirrt. Ich habe versucht, den Code hier einzugeben, aber lief ein Problem damit auf. Finden Sie meinen Code here.

Vielen Dank im Voraus.

Answer 1

Sie können nicht einfach nur HTML-Code in JS platzieren, dass wie ...

Platzieren Sie Ihre Elemente in Ihrer Seite „normal“ - und fügen Sie einige ID-Selektor

als in einem <script> Tag, vor dem Schließen </body> Tag Ziel Ihr ID-Element Suffix 0 oder 1 je nach Minuten Erinnerung % 2 - und fügen Sie eine .hidden Klasse zu diesem Element.

<style> 
 
.hidden{display:none;} 
 
</style> 
 

 

 
<div id="ads_0">ONE (visible when minutes are odd)</div> 
 
<div id="ads_1">TWO (visible when minutes are even)</div> 
 

 

 
<script> 
 
var min = new Date().getMinutes() % 2; // 0, 1, 0, 1.... 
 
document.getElementById("ads_"+ min).classList.add("hidden"); 
 
</script>