A Program in Jquery for Excercise - Jquery

A Program in Jquery for Pity - Jquery:

Style to be Define (CSS):

body { margin:0px; padding:0px;background:#cc0000; }
.container { margin:0px auto; padding:10px; background:#0f0f0f; position:relative; min-height:100%; width:350px; text-align: center; }
.container img { display:none; max-width:100%; }
.container h3 { background: #cc0000; color: aqua; padding: 5px 5px; font-size: 35px; font-weight: normal; font-family: arial; }

Script to be Define (.js file):
/* A JQuery Program to run a Excercise */
function startpity()
{
$("#gamestatus").val('1');
}
function stoppity()
{
$("#gamestatus").val('0');
}

var runningtimer = 0;
var starttimer = 0;
var stoptimer = 0;

function runthepity()
{
runningtimer++;
var gamestatus = $("#gamestatus").val();
if( gamestatus ==1  )
{
starttimer++;
console.log('pity is run for '+starttimer+ "seconds");
var runningslide = $("#runningslide").val();
runningslide = Number(runningslide)+1;
if(runningslide>4)
{
runningslide = 1;
}
$("#runningslide").val(runningslide);
$(".container img").css('display','none');
$("#img"+runningslide).css('display','block');
} else {
stoptimer++;
console.log('pity is stop for '+stoptimer+ "seconds");
}
console.log('page is loaded for '+runningtimer+ "seconds");
}
/* A JQuery Program to run a Excercise */

HTML
 <div class="container">
<h3>A JQuery Program to run a Excercise</h3>
<img src="img/pity/img1.jpg" style="margin:0px auto;display:block;" id="img1" />
<img src="img/pity/img2.jpg" style="margin:0px auto;" id="img2"/>
<img src="img/pity/img3.jpg" style="margin:0px auto;" id="img3"/>
<img src="img/pity/img4.jpg" style="margin:0px auto;" id="img4"/>
<img src="img/pity/5.jpg" style="margin:0px auto;" id="img5"/>




<br/>
<input type="hidden" id="gamestatus" value="0" />
<input type="hidden" id="runningslide" value="1" />
<button type="button" onclick="startpity();">Start the Pity</button>
<button type="button" onclick="stoppity();">Stop the Pity</button>

</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>

<script>
jQuery(document).ready
(
function()
{
setInterval(runthepity,700);
}
);

</script>

View Output here