JSFiddle - React, Tailwind, and code Playground

by nicomiceli

HTML

<h1>Image test</h1>
<p>This is a quick and dirty image comparison.</p>
<button id="b1">start timer</button>
<div id='txt'><div>
<div id="pic"> </div>

JavaScript

//add the amount of seconds you want the image shown
var countdown = 5
//put the url of the 1st image
var imgurl1 = 'http://content.screencast.com/users/JHTScherck/folders/Jing/media/1515a4fa-8deb-42b4-bb34-ed1f82ceb00f/2014-07-31_1241.png'

//put the url of the 2nd image
var imgurl2 = 'http://content.screencast.com/users/JHTScherck/folders/Jing/media/1c05a809-73ee-475f-9fed-ae3246ac4b32/2014-07-31_1241.png'

function loadpics(){
    $('#pic').append("<img src="+imgurl1+">");
    $('#pic').append("<img src="+imgurl2+">");
    $('#pic').hide();
}
loadpics()
$('#b1').click(function(){
    $('#pic').show()
    setInterval(function(){
        $('#pic').hide()
        },countdown * 1000);
})