• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Tim Cooke
  • Devaka Cooray
Sheriffs:
  • Liutauras Vilda
  • paul wheaton
  • Rob Spoor
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Piet Souris
  • Mikalai Zaikin
Bartenders:
  • Carey Brown
  • Roland Mueller

Countdown timer and Pagination using Javascript

 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

In this code I want an alert to appear “times up”, when time reaches 0 mins and 0 secs and forward to next page. For that I have written the code but the problem is time just stops at 0 mins and 0 secs. Can you let me know where I am going wrong in this particular code.


<html version="-//W3C//DTD HTML 4.01 Transitional//EN">

<head>
<style type="text/css">
.pg-normal {
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected {
color: black;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
</style>

<script type="text/javascript">
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;

this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}

this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}

var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';

this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';

var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}

this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}

this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}

this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}

this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);

var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';

element.innerHTML = pagerHtml;
}
}


var tim;

var min = 0;
var sec = 10;
var f = new Date();
function f1() {
f2();
document.getElementById("starttime").innerHTML = "Your started your Exam at " + f.getHours() + ":" + f.getMinutes();


}
function f2() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes ," + sec+" Seconds";
tim = setTimeout("f2()", 1000);
}
else {
if (parseInt(sec) == 0 && parseInt(min) != 0 ) {
min = parseInt(min) - 1;
if (parseInt(min) == 0) {
clearTimeout(tim);
alert("times up");
location.href = "default5.aspx";
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes ," + sec + " Seconds";
tim = setTimeout("f2()", 1000);
}
}

}
}

</script>
</head>
<body onload="f1()">
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<table id="results">
<div id="starttime"></div><br />
<div id="endtime"></div><br />
<div id="showtime"></div>
<tr>
<th>#</th>
<th>field</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="field-name" value="rec2"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="field-name" value="rec2"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="field-name" value="rec3"></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="field-name" value="rec4"></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="field-name" value="rec5"></td>
</tr>
<tr>
<td>6</td>
<td><input type="text" name="field-name" value="rec6"></td>
</tr>
<tr>
<td>7</td>
<td><input type="text" name="field-name" value="rec7"></td>
</tr>
<tr>
<td>8</td>
<td><input type="text" name="field-name" value="rec8"></td>
</tr>
<tr>
<td>9</td>
<td><input type="text" name="field-name" value="rec9"></td>
</tr>
<tr>
<td>10</td>
<td><input type="text" name="field-name" value="rec10"></td>
</tr>
</table>
<div id="pageNavPosition"></div>
<div><input type="submit" onClick="alert('Hey, this is just a sample!'); return false;" /> <input type="reset" /></div>

</form>

<script type="text/javascript"><!--
var pager = new Pager('results', 4);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>

</body>
</html>
 
My honeysuckle is blooming this year! Now to fertilize this tiny ad:
We need your help - Coderanch server fundraiser
https://coderanch.com/wiki/782867/Coderanch-server-fundraiser
reply
    Bookmark Topic Watch Topic
  • New Topic