效果图
就是原生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>
--