vista_deathclock_js_JS
1| /*
2| Project: vista_deathclock_js.js
3| Version: 1.0.1
4| Name: Keith Gallistel
5|
6| Using "2.9 Creating a Date Object" on pp.42-3, "2.10 Calculating a Previous or Future Date" on pp. 43-45, "15.8 Displaying the Number of Days Before Christmas" on pp. 525-7, "15.9 Displaying a Countdown Timer" on pp. 527-34, and "14.16 Removing Body Content" on pp. 483-5 in JavaScript & DHTML Cookbook (2nd edition), I created this Vista Death Clock to countdown to April 10, 2012, at 11:59:59 PM when Vista goes on Extended Support. This is important as Vista won't receive any new features like IE10 after entering Extended Support.
7|
8| (http://www.amazon.com/gp/product/0596514085?ie=UTF8&tag=keithgallcom-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596514085)
9|
10| Requires: eventsManager.js, JSUtility.js
11|
12| Change log 1.0.1:
13| Date:2021-10-31
14| -Fixed a long standing 'Uncaught TypeError' that I found out about when I was fixing another problem with my website.
15| --Removed onLoad hook from bottom of file. To activate, this progam now requires eventsManager.js to activate since it won't activate automatically on page load.
16| --Example code:
17|
18| <script type="text/javascript">
19| var vcFunc = function vista_deathclock_start() {setInterval('changeNode()', 500)};
20| addOnLoadEvent(vcFunc);
21| </script>
22|
23| Change log 1.0:
24| Date: 2011-09-28
25| -First release.
26|
27| */
28|
29| var VistaDeathDate = new Date(2012, 3, 10, 23, 59, 59);
30| var VistaDeathTime = VistaDeathDate.getTime();
31|
32| var oneSec = 1000;
33| var oneMin = oneSec * 60;
34| var oneHour = oneMin * 60;
35| var oneDay = oneHour * 24;
36|
37| var negativeBool = false;
38| var totalDayCharCount = 3;
39|
40| //This is the function that runs all the Vista Death Timers on the page.
41| function changeNode()
42| {
43| var i = 0;
44| var days = "";
45| var hours = "";
46| var mins = "";
47| var secs = "";
48|
49| var dataArray = countdown();
50|
51| var rawvalue = dataArray[0];
52| var daysleft = dataArray[1];
53| var hoursleft = dataArray[2];
54| var minleft = dataArray[3];
55| var secleft = dataArray[4];
56|
57| if(0 < rawvalue)
58| {
59| //days
60| days = formatNo(daysleft, 3);
61| daysLen = days.length;
62| var t = daysLen - 1;
63|
64| for (i = 0; i < daysLen; i++)
65| {
66| var rawElements = getElementsByClass("vistacounter_day" + i);
67| var arrLen = rawElements.length;
68|
69| for(var n = 0; n < arrLen; n++)
70| {
71| var element = rawElements[n];
72|
73| element.firstChild.nodeValue = days.charAt(t);
74|
75| }
76| t--;
77| }
78|
79| //hours
80| hours = formatNo(hoursleft, 2);
81| for (i = 0; i < 2; i++)
82| {
83| var rawElements = getElementsByClass("vistacounter_hour" + i);
84| var arrLen = rawElements.length;
85|
86| for(var n = 0; n < arrLen; n++)
87| {
88| var element = rawElements[n];
89|
90| element.firstChild.nodeValue = hours.charAt(i);
91| }
92| }
93|
94| //minutes
95| mins = formatNo(minleft, 2);
96| for (i = 0; i < 2; i++)
97| {
98| var rawElements = getElementsByClass("vistacounter_min" + i);
99| var arrLen = rawElements.length;
100|
101| for(var n = 0; n < arrLen; n++)
102| {
103| var element = rawElements[n];
104|
105| element.firstChild.nodeValue = mins.charAt(i);
106| }
107| }
108|
109| //seconds
110| secs = formatNo(secleft, 2);
111| for (i = 0; i < 2; i++)
112| {
113| var rawElements = getElementsByClass("vistacounter_sec" + i);
114| var arrLen = rawElements.length;
115|
116| for(var n = 0; n < arrLen; n++)
117| {
118| var element = rawElements[n];
119|
120| element.firstChild.nodeValue = secs.charAt(i);
121| }
122| }
123| }
124| else
125| {
126| //This checks to see if the negative sign has been activated yet and if not then activate it.
127| if(false == negativeBool)
128| {
129|
130| var counterbodys = getElementsByClass("vistacounter_counter_body");
131| var counterborders = getElementsByClass("vistacounter_counter_border");
132| var countercontainers = getElementsByClass("vistacounter_container");
133| var counternegatives = getElementsByClass("vistacounter_negative");
134| var arrLen = counterbodys.length;
135|
136| for(var n = 0; n < arrLen; n++)
137| {
138| var counterbody = counterbodys[n];
139| var counterborder = counterborders[n];
140| var countercontainer = countercontainers[n];
141| var counternegative = counternegatives[n];
142|
143| var counterbodywidth = parseInt(counterbody.offsetWidth);
144| counterbodywidth = counterbodywidth + 45;
145| counterbody.style.width = counterbodywidth +"px";
146|
147| var counterborderwidth = parseInt(counterborder.offsetWidth);
148| counterborderwidth = counterborderwidth + 5;
149| counterborder.style.width = counterborderwidth +"px";
150|
151| var countercontainerwidth = parseInt(countercontainer.offsetWidth);
152| countercontainerwidth = countercontainerwidth + 5;
153| countercontainer.style.width = countercontainerwidth +"px";
154|
155| counternegative.style.display = "block";
156| counternegative.style.visibility = "visible";
157|
158| var cbstylewidth = counterborder.style.width;
159| var ccstylewidth = countercontainer.style.width;
160| var cbbstylewidth = getExternalStyle(counterborder, 'border-left-width');
161|
162| var cbindex = cbstylewidth.indexOf("p");
163| var ccindex = ccstylewidth.indexOf("p");
164| var cbbindex = cbbstylewidth.indexOf("p");
165|
166| var cbwidth = parseInt(cbstylewidth.substring(0, cbindex));
167| var ccwidth = parseInt(ccstylewidth.substring(0, cbindex));
168| var cbbwidth = parseInt(cbbstylewidth.substring(0, cbbindex));
169|
170| var leftover = cbwidth - ccwidth;
171| var halfleftover = Math.floor(leftover/2);
172| var halfborderwidth = Math.floor(cbbwidth/2);
173| var marginsize = halfleftover - halfborderwidth;
174|
175| countercontainer.style.marginLeft = marginsize + "px";
176|
177| }
178|
179| vistaTimerBoxCenter();
180| negativeBool = true;
181| }
182|
183| //days
184| days = formatNo(daysleft, 3);
185| daysLen = days.length;
186| var t = daysLen - 1;
187|
188| //If there aren't enough vistacounter_day divs when comparing daysLen to default, this creates the required number.
189| if(totalDayCharCount < daysLen)
190| {
191| var tdcCounter = totalDayCharCount;
192|
193| var dcFirstChild = "";
194|
195| var daycontainerElements = getElementsByClass("vistacounter_daycontainer");
196|
197| for(var n = 0; n < 1; n++)
198| {
199| var daycontainerElement = daycontainerElements[n];
200|
201| dcFirstChild = daycontainerElement.firstChild.className;
202| }
203|
204| //This actually generates the vistacounter_day divs and comma divs.
205| while(tdcCounter < daysLen)
206| {
207| var vistacounterElements = getElementsByClass("vistacounter_daycontainer");
208|
209| for(var n = 0; n < 1; n++)
210| {
211| var vistacounterElement = vistacounterElements[n];
212|
213| /*
214| Using "14.20 Walking the Document Node Tree" on pp. 494-8 in JavaScript & DHTML Cookbook (2nd edition) to check if the first three childNodes are "demo_comma". This is because if a large number (ex. 123,456,789) is inputed and then a small number (ex. 6,789) is inputed, then when a large number (ex. 456,789) is inputed again, the first comma created will be off (ex. 45,6,789).
215| (http://www.amazon.com/gp/product/0596514085?ie=UTF8&tag=keithgallcom-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596514085)
216| */
217| var vcChildNodes = vistacounterElement.childNodes;
218| var vcCNZero = vcChildNodes[0].className;
219| var vcCNOne = vcChildNodes[1].className;
220| var vcCNTwo = vcChildNodes[2].className;
221| }
222|
223| //If the first three childNodes don't have a "vistacounter_comma" class name, then a comma is created.
224| if("vistacounter_comma" != vcCNZero && "vistacounter_comma" != vcCNOne && "vistacounter_comma" != vcCNTwo)
225| {
226| /*
227| Using "14.10 Creating Text Content for a New Element" on pp. 473-4 and "14.11 Creating Mixed Element and Text Nodes" on pp. 474-6 in JavaScript & DHTML Cookbook (2nd edition) to precreate a new text element for comma.
228| (http://www.amazon.com/gp/product/0596514085?ie=UTF8&tag=keithgallcom-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596514085)
229| */
230| var mydiv;
231| var txtc;
232|
233| mydiv = document.createElement("div");
234| mydiv.setAttribute("class","vistacounter_comma");
235| txtc = document.createTextNode(",");
236| mydiv.appendChild(txtc);
237|
238| var motherElements = getElementsByClass("vistacounter_daycontainer");
239| var previousElements = getElementsByClass(dcFirstChild);
240| var arrLen = motherElements.length;
241|
242| for(var n = 0; n < arrLen; n++)
243| {
244| var motherElement = motherElements[n];
245| var previousElement = previousElements[n];
246|
247| /*
248| Based on advice from http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4 and http://www.devguru.com/Technologies/xmldom/QuickRef/node_cloneNode.html, always set obj.cloneNode([DEEP|false:true]) to "true". Under the default of "false", the childNodes like the text nodes aren't cloned.
249| */
250| mynewdiv = mydiv.cloneNode(true);
251|
252| motherElement.insertBefore(mynewdiv,previousElement);
253| }
254|
255| var counterbodys = getElementsByClass("vistacounter_counter_body");
256| var counterborders = getElementsByClass("vistacounter_counter_border");
257| var countercontainers = getElementsByClass("vistacounter_container");
258| var arrLen = counterbodys.length;
259|
260| for(var n = 0; n < arrLen; n++)
261| {
262| var counterbody = counterbodys[n];
263| var counterborder = counterborders[n];
264| var countercontainer = countercontainers[n];
265|
266| var counterbodywidth = parseInt(counterbody.offsetWidth);
267| counterbodywidth = counterbodywidth + 45;
268| counterbody.style.width = counterbodywidth +"px";
269|
270| var counterborderwidth = parseInt(counterborder.offsetWidth);
271| counterborderwidth = counterborderwidth + 5;
272| counterborder.style.width = counterborderwidth +"px";
273|
274| var countercontainerwidth = parseInt(countercontainer.offsetWidth);
275| countercontainerwidth = countercontainerwidth + 5;
276| countercontainer.style.width = countercontainerwidth +"px";
277|
278| var cbstylewidth = counterborder.style.width;
279| var ccstylewidth = countercontainer.style.width;
280| var cbbstylewidth = getExternalStyle(counterborder, 'border-left-width');
281|
282| var cbindex = cbstylewidth.indexOf("p");
283| var ccindex = ccstylewidth.indexOf("p");
284| var cbbindex = cbbstylewidth.indexOf("p");
285|
286| var cbwidth = parseInt(cbstylewidth.substring(0, cbindex));
287| var ccwidth = parseInt(ccstylewidth.substring(0, cbindex));
288| var cbbwidth = parseInt(cbbstylewidth.substring(0, cbbindex));
289|
290| var leftover = cbwidth - ccwidth;
291| var halfleftover = Math.floor(leftover/2);
292| var halfborderwidth = Math.floor(cbbwidth/2);
293| var marginsize = halfleftover - halfborderwidth;
294|
295| countercontainer.style.marginLeft = marginsize + "px";
296|
297| }
298| vistaTimerBoxCenter();
299| dcFirstChild = "vistacounter_comma";
300| }
301|
302| /*
303| Using "14.10 Creating Text Content for a New Element" on pp. 473-4 and "14.11 Creating Mixed Element and Text Nodes" on pp. 474-6 in JavaScript & DHTML Cookbook (2nd edition) to precreate a new text element for Vistacounter_day div.
304| (http://www.amazon.com/gp/product/0596514085?ie=UTF8&tag=keithgallcom-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=0596514085)
305| */
306| var newdiv;
307| var txtz;
308|
309| var divclass = "vistacounter_day" + tdcCounter;
310| var prevdivclass = "vistacounter_day" + (tdcCounter - 1);
311|
312| newdiv = document.createElement("div");
313| newdiv.setAttribute("class",divclass);
314| txtz = document.createTextNode("0");
315| newdiv.appendChild(txtz);
316|
317| styles = "background-color: white; border: 3px white inset; margin-right: 2px; float: left; width:23px;";
318| setStyleHack(newdiv, styles);
319|
320| var motherElements = getElementsByClass("vistacounter_daycontainer");
321| var previousElements = getElementsByClass(dcFirstChild);
322| var beforeElements = getElementsByClass(prevdivclass);
323| var arrLen = motherElements.length;
324|
325| for(var n = 0; n < arrLen; n++)
326| {
327| var motherElement = motherElements[n];
328| var previousElement = previousElements[n];
329| var beforeElement = beforeElements[n];
330|
331| /*
332| Based on advice from http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4 and http://www.devguru.com/Technologies/xmldom/QuickRef/node_cloneNode.html, always set obj.cloneNode([DEEP|false:true]) to "true". Under the default of "false", the childNodes like the text nodes aren't cloned.
333| */
334| mynewdiv = newdiv.cloneNode(true);
335|
336| motherElement.insertBefore(mynewdiv,previousElement);
337|
338| beforeElement.style.marginRight = "2px";
339| previousElement.style.marginLeft = "2px";
340| }
341| dcFirstChild = divclass;
342|
343| var counterbodys = getElementsByClass("vistacounter_counter_body");
344| var counterborders = getElementsByClass("vistacounter_counter_border");
345| var countercontainers = getElementsByClass("vistacounter_container");
346| var arrLen = counterbodys.length;
347|
348| for(var n = 0; n < arrLen; n++)
349| {
350| var counterbody = counterbodys[n];
351| var counterborder = counterborders[n];
352| var countercontainer = countercontainers[n];
353|
354| var counterbodywidth = parseInt(counterbody.offsetWidth);
355| counterbodywidth = counterbodywidth + 45;
356| counterbody.style.width = counterbodywidth +"px";
357|
358| var counterborderwidth = parseInt(counterborder.offsetWidth);
359| counterborderwidth = counterborderwidth + 8;
360| counterborder.style.width = counterborderwidth +"px";
361|
362| var countercontainerwidth = parseInt(countercontainer.offsetWidth);
363| countercontainerwidth = countercontainerwidth + 20;
364| countercontainer.style.width = countercontainerwidth +"px";
365|
366| var cbstylewidth = counterborder.style.width;
367| var ccstylewidth = countercontainer.style.width;
368| var cbbstylewidth = getExternalStyle(counterborder, 'border-left-width');
369|
370| var cbindex = cbstylewidth.indexOf("p");
371| var ccindex = ccstylewidth.indexOf("p");
372| var cbbindex = cbbstylewidth.indexOf("p");
373|
374| var cbwidth = parseInt(cbstylewidth.substring(0, cbindex));
375| var ccwidth = parseInt(ccstylewidth.substring(0, cbindex));
376| var cbbwidth = parseInt(cbbstylewidth.substring(0, cbbindex));
377|
378| var leftover = cbwidth - ccwidth;
379| var halfleftover = Math.floor(leftover/2);
380| var halfborderwidth = Math.floor(cbbwidth/2);
381| var marginsize = halfleftover - halfborderwidth;
382|
383| countercontainer.style.marginLeft = marginsize + "px";
384| }
385| vistaTimerBoxCenter();
386| tdcCounter++;
387| }
388| totalDayCharCount = daysLen;
389| }
390|
391| //Vistacounter_day div is filled with a number here.
392| for (i = 0; i < daysLen; i++)
393| {
394| var rawElements = getElementsByClass("vistacounter_day" + i);
395| var arrLen = rawElements.length;
396|
397| for(var n = 0; n < arrLen; n++)
398| {
399| var element = rawElements[n];
400|
401| element.firstChild.nodeValue = days.charAt(t);
402|
403| }
404| t--;
405| }
406|
407| //hours
408| hours = formatNo(hoursleft, 2);
409| for (i = 0; i < 2; i++)
410| {
411| var rawElements = getElementsByClass("vistacounter_hour" + i);
412| var arrLen = rawElements.length;
413|
414| for(var n = 0; n < arrLen; n++)
415| {
416| var element = rawElements[n];
417|
418| element.firstChild.nodeValue = hours.charAt(i);
419| }
420| }
421|
422| //minutes
423| mins = formatNo(minleft, 2);
424| for (i = 0; i < 2; i++)
425| {
426| var rawElements = getElementsByClass("vistacounter_min" + i);
427| var arrLen = rawElements.length;
428|
429| for(var n = 0; n < arrLen; n++)
430| {
431| var element = rawElements[n];
432|
433| element.firstChild.nodeValue = mins.charAt(i);
434| }
435| }
436|
437| //seconds
438| secs = formatNo(secleft, 2);
439| for (i = 0; i < 2; i++)
440| {
441| var rawElements = getElementsByClass("vistacounter_sec" + i);
442| var arrLen = rawElements.length;
443|
444| for(var n = 0; n < arrLen; n++)
445| {
446| var element = rawElements[n];
447|
448| element.firstChild.nodeValue = secs.charAt(i);
449| }
450| }
451|
452| VistaSwapOut();
453|
454| }
455| }
456|
457| //This is the work horse function that actually calculates the difference between two dates.
458| function countdown()
459| {
460| var diff = 0;
461| var rawdiff = 0;
462| var daydiv = 0;
463| var hourdiv = 0;
464| var mindiv = 0;
465| var secdiv = 0;
466| var daysleft = 0;
467| var hoursleft = 0;
468| var rawhoursleft = 0;
469| var minleft = 0;
470| var rawminleft = 0;
471| var secleft = 0;
472| var now = new Date().getTime();
473|
474| //days
475| diff = VistaDeathTime - now;
476| rawdiff = diff;
477| daydiv = diff/oneDay;
478| daysleft = Math.floor(daydiv);
479|
480| //hours
481| diff -=(daysleft * oneDay);
482| hourdiv = diff/oneHour;
483| if(0 < rawdiff)
484| {
485| rawhoursleft = Math.floor(hourdiv);
486| hoursleft = Math.floor(hourdiv);
487| }
488| else
489| {
490| rawhoursleft = Math.floor(hourdiv);
491| hoursleft = 23 - Math.floor(hourdiv);
492| }
493|
494| //minutes
495| diff -=(rawhoursleft * oneHour);
496| mindiv = diff/oneMin;
497| if(0 < rawdiff)
498| {
499| rawminleft = Math.floor(mindiv);
500| minleft = Math.floor(mindiv);
501| }
502| else
503| {
504| rawminleft = Math.floor(mindiv);
505| minleft = 59 - Math.floor(mindiv);
506| }
507|
508| //seconds
509| diff -=(rawminleft * oneMin);
510| secdiv = diff/oneSec;
511| if(0 < rawdiff)
512| {
513| secleft = Math.floor(secdiv);
514| }
515| else
516| {
517| secleft = 59 - Math.floor(secdiv);
518| }
519|
520| var countdownArray = new Array(rawdiff, daysleft, hoursleft, minleft, secleft);
521|
522| return countdownArray;
523| }
524|
525| //This function removes negative sign and turns integer into a string formatting it as '00n'.
526| function formatNo (num, totallen)
527| {
528| var convertNum = num.toString();
529|
530| if("-" == convertNum.charAt(0))
531| {
532| convertNum = convertNum.slice(1);
533| }
534|
535| while(convertNum.length < totallen)
536| {
537| convertNum = "0" + convertNum;
538| }
539|
540| return convertNum;
541| }
542|
543| //Self-explanitory function for centering the timer box.
544| function vistaTimerBoxCenter()
545| {
546| var warningbox = document.getElementById("vistawarningbox");
547| if(null != warningbox)
548| {
549| var rawElements = getElementsByClass("vistacounter_counter_body");
550|
551| for(var n = 0; n < 1; n++)
552| {
553| var element = rawElements[n];
554|
555| var warningwidth = warningbox.offsetWidth;
556| var timerwidth = element.offsetWidth;
557|
558| var leftover = warningwidth - timerwidth;
559| var marginsize = Math.floor(leftover/2);
560|
561| element.style.marginLeft = marginsize + "px";
562| }
563| }
564| }
565|
566| //If today's date is past Vista death date, then timer will, instead of going negative, replace OS warning.
567| function VistaSwapOut()
568| {
569| var oldelement = document.getElementById("vistawarningbox");
570| if(null != oldelement)
571| {
572| oldelement.parentNode.removeChild(oldelement);
573|
574| var SixOSPostMsgVal = "<div class=\"alert\">\n";
575| SixOSPostMsgVal += "<h1>ALERT! Operating System is OBSOLETE!!!</h1>\n";
576| SixOSPostMsgVal += "<p>I see you're using Windows Vista.</p>\n";
577| SixOSPostMsgVal += "<p>Vista is a dead operating system. I know what you'te thinking, \"I just got this computer 5 years ago, how can Vista be dead when Windows XP is still supported?\" Let me start with the second part of that statement first, Windows XP is also obsolete and has been obsolete since it went on 'Extended Support' for security patches only without any new feature upgrades. Can you guess which other operating system just got switched over to 'Extended Support'? Yup, that's right, Vista. Vista is already feeling the effects of being put on 'Extended Support' as Internet Explorer 10 won't install on it. Soon, Vista will diverge so much from Windows 7 and Windows 8 feature wise and compatibility wise as to be left completely in the dust.</p>\n";
578| SixOSPostMsgVal += "<div class=\"spacer\"></div>\n";
579| SixOSPostMsgVal += "<div class=\"storageo\">\n";
580| SixOSPostMsgVal += "<div class=\"flLeft\">\n";
581| SixOSPostMsgVal += "<p>Windows 7 has:</p>\n <ul>\n<li>Better Performance</li>\n<li>Better, Stronger Security</li>\n<li>Great User Experience</li>\n</ul>\n";
582| SixOSPostMsgVal += "</div>\n";
583| SixOSPostMsgVal += "<div class=\"flRight\">\n";
584| SixOSPostMsgVal += "<p>Click on the button to upgrade now:</p>\n";
585| SixOSPostMsgVal += "<div class=\"wsLogo\">\n";
586| SixOSPostMsgVal += "<a href=\"http://www.microsoft.com/windows/windows-7/\" target=\"_blank\"><img src=\"" + strSpaces + "images/logo-windows7-alert.jpg\" width=\"78\" height=\"88\" alt=\"Click here to get Windows 7.\" style=\"border:0; margin:0px;\"></a>\n";
587| SixOSPostMsgVal += "<p class=\"smallfont\" style=\"margin-top:0px;\">(Link opens in a new window.)</p>\n";
588| SixOSPostMsgVal += "</div>\n";
589| SixOSPostMsgVal += "</div>\n";
590| SixOSPostMsgVal += "</div>\n";
591| SixOSPostMsgVal += "<div class=\"spacer\"> </div>\n";
592| SixOSPostMsgVal += "</div>\n";
593|
594| document.getElementById("vistaparent").innerHTML = SixOSPostMsgVal;
595| }
596| }