用JavaScript+CSS给自己写一个倒计时提示主页
打开浏览器，总是会有各种诱惑让自己忘记最近最重要的事情，所以索性写了一个倒计时主页来督促自己，以下是实现初步功能的代码：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Daisy, just do it!!!</title> 6 <style type="text/css"> 7 fieldset{ 8 width: 250px; 9 margin: 8px; 10 padding: 8px; 11 margin-left: 60px; 12 padding-left: 20px; 13 padding-bottom: 18px; 14 border: 1px solid #CC3333; 15 background-color: rgba(255,230,100,0.5); 16 border-radius: 8px; 17 } 18 fieldset input[type=text]{ 19 width: 200px; 20 margin-bottom: 5px; 21 font-family: Arial, "Trebuchet MS", Verdana, sans-serif; 22 } 23 legend { 24 font-weight: bold; 25 } 26 #clock{ 27 width: 400px; 28 height: 400px; 29 border: 5px solid #CCC; 30 border-radius: 200px; 31 box-shadow: 0px 0px 20px #666; 32 text-shadow:2px 2px 5px #666; 33 position: relative; 34 } 35 #note{ 36 width: 200px; 37 margin: 0 auto; 38 margin-top: 50px; 39 font: normal bold 24px/30px Arial, "Trebuchet MS", Verdana, sans-serif; 40 } 41 #memo{ 42 width: 160px; 43 height: 40px; 44 box-shadow: 0px 0px 10px #666; 45 margin: 10px 0 10px 5px; 46 } 47 #time{ 48 position: absolute; 49 width:306px; 50 height: 102px; 51 left: 49px; 52 top: 149px; 53 background-color: #DDD; 54 border: 1px dotted #666; 55 border-radius: 10px; 56 } 57 .hand{ 58 width: 100px; 59 height: 100px; 60 float: left; 61 border: 1px solid #666; 62 border-radius: 10px; 63 font-size: 85px; 64 font-family: Arial, "Trebuchet MS", Verdana, sans-serif; 65 color: #FFF; 66 line-height: 95px; 67 } 68 .inputWrap{ 69 position:relative; 70 } 71 .defaultText{ 72 position:absolute; 73 top:2px; 74 left:1px; 75 color:#DDD; 76 } 77 </style> 78 </head> 79 <body> 80 <div id="countDown"> 81 <form> 82 <fieldset> 83 <legend>Create Memo</legend> 84 <div class="inputWrap"> 85 <label class="defaultText" id="mLabel" default_txt="New Memo" for="memo">New Memo</label> 86 <input type="text" id="memoStr" /> 87 </div> 88 <div class="inputWrap"> 89 <label class="defaultText" id="dLabel" default_txt="Deadline:XXXX-XX-XX" for="date">Deadline:XXXX-XX-XX</label> 90 <input type="text" id="deadline" maxlength="10" /> 91 </div> 92 <input type="button" value="New Memo" id="addMemo" /> 93 </fieldset> 94 </form> 95 96 <div id="clock"> 97 <div id="note"></div> 98 <div id="time"> 99 <div class="hand" id="hour"></div> 100 <div class="hand" id="minute"></div> 101 <div class="hand" id="second"></div> 102 </div> 103 </div> 104 </div> 105 <script type="text/javascript"> 106 function addLoadEvent(func){//加载事件函数，为了实现结构和行为的分离 107 var oldonload = window.onload; 108 if(typeof window.onload != "function"){ 109 window.onload = func; //如果onload成功，则调用欲加载的函数 110 }else{ 111 window.onload = function(){ 112 oldonload(); //否则调用默认onload函数，再调用欲加载函数 113 func(); 114 } 115 } 116 } 117 118 function addMemo(){ 119 var memoBut = document.getElementById("addMemo"); 120 var memoStr = document.getElementById("memoStr"); 121 var deadline = document.getElementById("deadline"); 122 var mLabel = document.getElementById("mLabel").firstChild; 123 var dLabel = document.getElementById("dLabel").firstChild; 124 var memo = "今年"; 125 var endDate; 126 memoStr.value = ""; 127 deadline.value = ""; 128 memoStr.onfocus = function(){ 129 mLabel.nodeValue = ""; 130 } 131 memoStr.onblur = function(){ 132 if(this.value == ""){ 133 mLabel.nodeValue = "New Memo"; 134 }else{ 135 mLabel.nodeValue = ""; 136 } 137 } 138 deadline.onfocus = function(){ 139 dLabel.nodeValue = ""; 140 } 141 deadline.onblur = function(){ 142 if(this.value == ""){ 143 dLabel.nodeValue = "Deadline:XXXX-XX-XX"; 144 }else{ 145 dLabel.nodeValue = ""; 146 } 147 } 148 var year, month, day; 149 memoBut.onclick = function(){ 150 endDate = deadline.value; 151 memo = memoStr.value; 152 var dFormat = /^\d{4}-\d{2}-\d{2}$/g; 153 if(!dFormat.test(endDate)){ 154 alert("Invalid input date! try again!"); 155 } 156 year = parseInt(endDate.substring(0,4)); 157 month = parseInt(endDate.substring(5,7)); 158 day = parseInt(endDate.substring(8,10)); 159 return false; 160 } 161 var interval = 1000; 162 window.setInterval(function(){displayCountDown(year, month, day, memo, "note", "hour", "minute", "second");},interval); 163 } 164 165 function displayCountDown(endYear, endMonth, endDay, memo, memoDiv, hDiv, mDiv, sDiv){ 166 var now = new Date(); 167 endYear = isNaN(endYear) ? 2012 : endYear; 168 endMonth = isNaN(endMonth) ? 0 : endMonth; 169 endDay = isNaN(endDay) ? 1 : endDay; 170 var endDate = new Date(endYear,endMonth-1,endDay);//月份是基于0的，所以4表示5月 171 var leftTime = endDate.getTime() - now.getTime();//用Unix时间计算剩余时间 172 var leftSecond = parseInt(leftTime/1000); 173 var day = Math.floor(leftSecond/(60*60*24)); 174 var hour = Math.floor((leftSecond-day*60*60*24)/3600); 175 var minute = Math.floor((leftSecond-day*60*60*24-hour*3600)/60); 176 var second = Math.floor(leftSecond-day*60*60*24-hour*3600-minute*60); 177 hour = hour > 9 ? hour : '0'+hour; //1位数用0x显示 178 minute = minute > 9 ? minute : '0'+minute; 179 second = second > 9 ? second : '0'+second; 180 var note = document.getElementById(memoDiv); 181 var hDiv = document.getElementById(hDiv); 182 var mDiv = document.getElementById(mDiv); 183 var sDiv = document.getElementById(sDiv); 184 if(leftTime > 0){ 185 note.innerHTML = '距离'+memo+'还有'+day+'天'+hour+'小时'+minute+'分'+second+'秒...'; 186 }else{ 187 note.innerHTML = memo+'已过去了'+(-day)+'天'+hour+'小时'+minute+'分'+second+'秒!'; 188 } 189 hDiv.innerHTML = hour; 190 mDiv.innerHTML = minute; 191 sDiv.innerHTML = second; 192 } 193 addLoadEvent(addMemo); 194 </script> 195 </body> 196 </html>
各个浏览器运行效果截图：分别为Opera11.64，FireFox12.0，Chrome19， IE8（让我情何以堪。。。不要问我为啥不是IE9，伤不起的WinXP啊~~~）
现在只完成了初期的功能模块，后期会增加CSS方面的美化工作（希望能不用图片实现……）。本人的JS代码写得很烂，还希望能和大家一起探讨。
