用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代码写得很烂,还希望能和大家一起探讨。

 

posted @ 2012-05-25 10:45 希-若愚 阅读(...) 评论(...) 编辑 收藏