js倒计时组件

效果图
就是原生js写了一个倒计时，用css3做了个美化。没有使用图片。
兼容性没有仔细研究。
代码：
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <!-- saved from url=(0022)http:////aboutie456789/ -->
  4 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 
  6 <title>考研倒计时</title>
  7 
  8 
  9 <style>
 10 
 11 /*reset*/
 12 html {    color: #000000;    line-height: 1.5;}
 13 body {    font: 12px/1.5 arial,sans-serif; background:#efefef}
 14 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
 15     margin: 0;    padding: 0;}
 16 ol, ul {    list-style: none outside none;}
 17 h1, h2, h3, h4, h5, h6 {    font-size: 100%;    font-weight: normal;}
 18 
 19 a {    text-decoration: none;}
 20 *::-moz-placeholder {    color: #CCCCCC;}
 21 
 22 
 23 #wrap {   word-break: break-all;    word-wrap: break-word;
 24     margin:0 auto; padding:50px; border:#fff 5px solid; display:solid;
 25     width:990px; 
 26     padding:35px;}
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 /*计时器区域总体样式*/
 40 #my_timer {
 41 color: #666666;
 42 
 43 /*
 44 font-size: 12px;
 45 padding: 4px;
 46 */
 47 
 48 text-align: center;
 49 font: 14px/1.3 'Segoe UI',Arial, sans-serif;
 50 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
 51 
 52 width:420px; height:40px;  
 53 padding:20px;  margin: 10px auto;
 54 border-radius:20px;
 55 
 56 border:2px solid #FE0859;
 57 background:#afafaf;
 58 box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
 59 }
 60 
 61 
 62 #my_timer:hover{
 63 color:#fff;
 64 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
 65 background:#FE0859;
 66 }
 67 
 68 
 69 
 70 
 71 
 72 /*计时器数字的样式*/
 73 .timer{ font:20px arial; margin:0 5px;}
 74 
 75 .timer,
 76 .digit{
 77     display:inline-block;
 78     width:2em;
 79     background-color:#444;
 80     border-radius:0.2em;
 81     text-align:center;
 82     color:#fff;
 83     letter-spacing:-1px;
 84 }
 85 
 86 
 87 .timer,
 88 .digit.static{
 89     box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
 90     
 91     background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
 92     background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
 93     background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
 94     background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
 95     background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
 96     
 97     background-image: -webkit-gradient(
 98         linear,
 99         left bottom,
100         left top,
101         color-stop(0.5, #3A3A3A),
102         color-stop(0.5, #444444)
103     );
104 }
105 </style>
106 </head>
107 
108 <body>
109 
110 <!-- clear:both; -->
111 <div style="display:block; clear:both; overflow:hidden; height:20px;"></div>
112 
113 
114 <!-- 倒计时区域 -->
115 <div id="my_timer"></div>
116 
117 
118 
119 
120 <script type="text/javascript">
121 //预先定义的函数和常数
122 var my_insert=document.getElementById("my_timer");
123 var KAOYAN= new Date("Jan 4,2014 8:30:00");  //考研的时间(new Date("Jan 4,2014 8:30:00"))
124 var s = "2014研究生考试"; 
125 
126 
127 //主函数
128 function getTimer(){
129     window.setTimeout("getTimer()", 1000);
130  
131      var now = new Date(); //当前时间
132     
133      var ts = KAOYAN - now;  //计算剩余的毫秒数 
134     var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余的天数 
135     var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数 
136     var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数 
137     var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数 
138     
139     var dd = checkTime(dd); //console.log(dd);
140     var hh = checkTime(hh); 
141     var mm = checkTime(mm); 
142     var ss = checkTime(ss); 
143     
144     
145     var my_string = "<p class=>今天是"+now + " <br />" +"距"+s+"还有<span class=timer>";
146     my_string += dd+"</span>天<span class=timer>"+hh+"</span>小时<span class=timer>"+mm+"</span>分<span class=timer>"+ss+"</span>秒";
147     
148     document.getElementById("my_timer").innerHTML = my_string; 
149 }
150 
151 
152 
153 function checkTime(i){
154        if (i < 10) {   
155           i= "0" + i;
156         }
157         return i; 
158 }
159 
160 
161 getTimer();
162 </script>
163 
164 
165 
166 
167 
168 
169 
170 
171 
172 
173 
174 
175 
176 
177 <!--
178 <script type="text/javascript">
179 //预先定义的函数和常数
180 var my_insert=document.getElementById("my_timer");
181 var KAOYAN= new Date("Jan 14,2014");  //考研的时间
182 var s = "2014研究生考试"; 
183 
184 //主函数
185 function getTimer(){
186     window.setTimeout("getTimer()", 1000);
187  
188     var now = new Date(); //当前时间
189     var myday = KAOYAN.getTime() - now.getTime(); //我的可用时间
190     var my_d = Math.floor(myday / (1000 * 60 * 60 * 24)); //倒计时天数
191 
192     var timeold=myday;  //timeold=(BirthDay.getTime()-today.getTime());
193     secondsold=Math.floor(timeold/1000);
194 
195     msPerDay=24*60*60*1000;  e_daysold=timeold/msPerDay;
196     daysold=Math.floor(e_daysold);  e_hrsold=(e_daysold-daysold)*24;
197     hrsold=Math.floor(e_hrsold);  e_minsold=(e_hrsold-hrsold)*60;
198     minsold=Math.floor((e_hrsold-hrsold)*60);  
199     seconds=Math.floor((e_minsold-minsold)*60);
200   
201     my_string = "<p class=>今天是"+now + " <br />" +"距"+s+"还有<span class=timer>";
202     my_string += my_d+"</span>天<span class=timer>"+hrsold+"</span>小时<span class=timer>"+minsold+"</span>分<span class=timer>"+seconds+"</span>秒";
203 
204     my_insert.innerHTML=(  my_string );
205 }
206 
207 getTimer();
208 </script>
209 -->
210 
211 
212 </body>
213 </html>