The following HTML is a pregnancy ticker. The HTML fetches an image from http://www.3dpregnancyticker.com. Click on the image to go to the web site. To put in your own due date you will need to change the values for the “dob” and “doc” variables. It may be used as a desktop item on Windows. I have also used it on a HTML Screen Saver.
<!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>
<title></title>
</head>
<body>
<div style="height:100%;width:100%;vertical-align:middle;text-align:center;background-color:MidnightBlue;">
<table id="kwsTickerLayoutTable" border="0" cellspacing="2" cellpadding="1" style="background-color:#FFEEFF;text-align:left;">
<tr><td rowspan="3" style="background-color:green;"><a id="kwsTickerCountdownUrl" href="" style="border:0;"><img id="kwsTickerCountdownImage" width="100px" alt="" src="" style="border: 1px solid #EEDDEE;" /></a></td><td style="font-style:normal; font-family: Arial; font-size: x-large; font-weight: bold; font-variant: normal; color: #008080;"><label id="kwsTickerCountdownText1">test</label></td></tr>
<tr><td style="font-style:normal; font-family: Arial; font-size: x-large; font-weight: bold; font-variant: normal; color: #008080;"><label id="kwsTickerCountdownText2">test</label></td></tr>
<tr><td style="font-style:normal; font-family: Arial; font-size: x-large; font-weight: bold; font-variant: normal; color: #008080;"><label id="kwsTickerCountdownText3">test</label></td></tr>
</table>
</div>
</body>
<script language="javascript" type="text/javascript">
var now = new Date(); //today
var dob = new Date(2011, 2, 9); //date of birth
var doc = new Date(2010, 5, 1); //start date of pregnancy
var one_day = 1000 * 60 * 60 * 24; //milliseconds in one day
var days_total = Math.ceil((dob.getTime() - now.getTime()) / (one_day)); //number of days left
var weeks = Math.floor(days_total / 7); //number of weeks left
var days = days_total % 7; //number of days in addition to the weeks left
var days_gone_total = Math.ceil((now.getTime() - doc.getTime()) / one_day); //number of days gone
var weeks_gone = Math.floor(days_gone_total / 7); //number of weeks gone
var days_gone = days_gone_total % 7; //number of days in addition to the weeks gone
var lab1 = document.getElementById('kwsTickerCountdownText1'); //get label 1
var lab2 = document.getElementById('kwsTickerCountdownText2'); //get label 2
var lab3 = document.getElementById('kwsTickerCountdownText3'); //get label 3
var img = document.getElementById('kwsTickerCountdownImage'); //get image element
var url = document.getElementById('kwsTickerCountdownUrl'); // get url element of image element
lab1.innerHTML = (weeks_gone + 1) + 'th week';
lab2.innerHTML = weeks_gone + ' weeks and ' + days_gone + ' days on the way.';
if (days > 0) { lab3.innerHTML = 'Only ' + weeks + ' weeks and ' + days + ' days left!'; }
else { lab3.innerHTML = 'Only ' + weeks + ' weeks left!'; }
img.setAttribute('src', 'http://images.3dpregnancy.com/en/2D/200/' + weeks_gone + '-weeks-pregnant.jpg');
url.setAttribute('href', 'http://3dpregnancy.parentsconnect.com/calendar/' + weeks_gone + '-weeks-pregnant.html');
</script>
</html>
No comments:
Post a Comment