Menu
Hi All,
I have an interesting task to do.
I want to display in my screen that
1) it’s break time for 30 Min with a blinking Text….. And this Text should keep blinking for 2 Minutes.
2) After that once time is over, it should redirect to another page with a count down timer starting from 30:00 (Min:Sec)
Then when it reaches 1 Min before it completes 30 Min, it should display a message “BREAK OVER. Please Login Now”.
i have the following script below.
JS file (countdown.js):
[code=html]var mins
var secs;
function cd() {
mins = 1 * m(“30”); // change minutes here
secs = 0 + s(“:01”); // change seconds here (always add an additional second to your total)
redo();
}
function m(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == “:”)
break;
}
return(obj.substring(0, i));
}
function s(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == “:”)
break;
}
return(obj.substring(i + 1, obj.length));
}
function dis(mins,secs) {
var disp;
if(mins <= 9) {
disp = ” 0″;
} else {
disp = ” “;
}
disp += mins + “:”;
if(secs <= 9) {
disp += “0” + secs;
} else {
disp += secs;
}
return(disp);
}
function redo() {
secs–;
if(secs == -1) {
secs = 59;
mins–;
}
document.cd.disp.value = dis(mins,secs); // setup additional displays here.
if((mins == 0) && (secs == 0)) {
//window.alert(“Please LogOut.”); // change timeout message as required
window.location = “login_now.html” // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout(“redo()”,1000);
}
}
function init() {
cd();
}
window.onload = init;
and Screen number 1 (break.html) is as following:
[code=html]<html>
<head>
<style>
body { font-family: serif; }
p { font-size: 170px; }
div {
font-size: 90px;
font-color:#ffffff;
}
h2 { font-size: 40px;
font-style: italic;
font-color:red;
font-weight: bolder;
}
ul { font-weight: bolder; }
</style>
<META http-equiv=Content-Type content=”text/html; charset=windows-1256″>
</head>
<body onload=”setInterval(‘blinkIt()’,500)” bgcolor=”Black”>
<script type=”text/javascript”>
function blinkIt() {
if (!document.all) return;
else {
for(i=0;i<document.all.tags(‘blink’).length;i++){
s=document.all.tags(‘blink’)[i];
s.style.visibility=(s.style.visibility==’visible’) ?’hidden’:’visible’;
}
}
}
</script>
<script type=”text/JavaScript”>
<!–
function timedRefresh(timeoutPeriod) {
setTimeout(“location.reload(true);”,timeoutPeriod);
}
//
–>
</script>
<br><br><br><br>
<blink>
<div align=”center”><font color=”red”>Please Log Out. Break Time For 30 Min<br/></div>
</font></div>
</blink>
</body>
</html>
and screen number 2 (count_down.html) as follow:
[code=html]<html>
<head>
<!– Paste this code into the CSS section of your HTML document –>
<style type=”text/css”>
#txt {
border:none;
font-family:verdana;
font-size:40pt;
font-weight:bold;
color:red;
text-align: center;
border-right-color:#FFFFFF;
}
</style>
<script type=”text/javascript” src=”countDown.js”></script>
</head>
<!– Paste this code into the BODY section of your HTML document –>
<body bgcolor=”black”>
<table cellpadding=”0″ cellspacing=”0″ align=”center” width=”100%”>
<tr>
<td align=”center”><h1 align=”center”><font color=”White”>30 Min Break</font></td>
</tr>
<tr>
<td align=”center”>
<form name=”cd”>
<input id=”txt” align=”middle” readonly=”true” type=”text” value=”01:00″ border=”0″ name=”disp”>
</form>
<br>
<br/>
</td>
</tr>
</table>
</body>
</html>
screen number 3 (login_now.html) as follow:
[code=html]<html>
<head>
<style>
body { font-family: serif; }
p { font-size: 170px; }
div {
font-size: 90px;
font-color:#ffffff;
}
h2 { font-size: 40px;
font-style: italic;
font-color:red;
font-weight: bolder;
}
ul { font-weight: bolder; }
</style>
<META http-equiv=Content-Type content=”text/html; charset=windows-1256″>
</head>
<body onload=”setInterval(‘blinkIt()’,500)” bgcolor=”Black”>
<script type=”text/javascript”>
function blinkIt() {
if (!document.all) return;
else {
for(i=0;i<document.all.tags(‘blink’).length;i++){
s=document.all.tags(‘blink’)[i];
s.style.visibility=(s.style.visibility==’visible’) ?’hidden’:’visible’;
}
}
}
</script>
<script type=”text/JavaScript”>
<!–
function timedRefresh(timeoutPeriod) {
setTimeout(“location.reload(true);”,timeoutPeriod);
}
//
–>
</script>
<br><br><br><br>
<blink>
<div align=”center”><font color=”red”>Please Log In Now<br/></div>
</font></div>
</blink>
</body>
</html>
As you can see, i could n’t call 2 function in body tag upon loading. So, i am wondering how can i make this happen…. appreciate your help.
Thanks in advance.
M