倒计时代码①
互助交流Q群：3036979。多谢关注
另有云商店倒计时组件（拖拽式管理），查看演示
代码：
<div style="height:50px; line-height:50px; text-align:center; color: #b2b2b2;"><style type="text/CSS"> @font-face{ font-family: 'digi'; src: url('digi.TTF'); font-weight:normal; } #d,#m,#h,#s,#ms{font-family:digi;position:relative;top:-300px;} body{ animation:shuimubody 4.5s linear 4.5s 1 normal backwards; -moz-animation:shuimubody 4.5s linear 4.5s 1 normal backwards; -webkit-animation:shuimubody 4.5s linear 4.5s 1 normal backwards; -o-animation:shuimubody 4.5s linear 4.5s 1 normal backwards; } @keyframes shuimubody { 0% {background:#000;} 100% {background:#EEE;} } @-moz-keyframes shuimubody /* Firefox */ { 0% {background:#000;} 100% {background:#EEE;} } @-webkit-keyframes shuimubody /* Safari and Chrome */ { 0% {background:#000;} 80% {background:#000;} 100% {background:#EEE;} } @-o-keyframes shuimubody /* Opera */ { 0% {background:#000;} 100% {background:#EEE;} } .shuimumake{text-align:center; position:relative; animation:shuimumake 6s linear 2s 1 normal forwards; -moz-animation:shuimumake 6s linear 2s 1 normal forwards; -webkit-animation:shuimumake 6s linear 2s 1 normal forwards; -o-animation:shuimumake 6s linear 2s 1 normal forwards; } @keyframes shuimumake { 0% {font-size:0em;color:#FFF;top:120px;} 10% {font-size:3em;} 80% {font-size:3em;top:120px;} 100% {font-size:1em;color:#FFF} } @-moz-keyframes shuimumake /* Firefox */ { 0% {font-size:0em;color:#FFF;top:120px;} 10% {font-size:3em;} 80% {font-size:3em;top:120px;} 100% {font-size:1em;color:#FFF} } @-webkit-keyframes shuimumake /* Safari and Chrome */ { 0% {font-size:0em;color:#FFF;top:120px;} 10% {font-size:3em;} 80% {font-size:3em;top:120px;} 100% {font-size:1em;color:#FFF} } @-o-keyframes shuimumake /* Opera */ { 0% {font-size:0em;color:#FFF;top:120px;} 10% {font-size:3em;} 80% {font-size:3em;top:120px;} 100% {font-size:1em;color:#FFF} } .shuimuk{border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px;z-index:999; position:relative;font-family:digi; top:-30px; animation:shuimuk 2s linear 9s 1 normal forwards; -moz-animation:shuimuk 2s linear 9s 1 normal forwards; -webkit-animation:shuimuk 2s linear 9s 1 normal forwards; -o-animation:shuimuk 2s linear 9s 1 normal forwards; padding:20px auto;text-shadow:1px 1px #999; } @keyframes shuimuk { 0% {font-size:0em;color:#FFF;top:120px;} 10% {font-size:3em;} 80% {font-size:3em;top:120px;} 100% {font-size:1em;color:#FFF} } @-moz-keyframes shuimuk /* Firefox */ { 0% {font-size:0em;color:#FFF;top:120px;} 10% {font-size:3em;} 80% {font-size:3em;top:120px;} 100% {font-size:1em;color:#FFF} } @-webkit-keyframes shuimuk /* Safari and Chrome */ { 0% {top:-20px;color:#FFF;} 100% {top:5px;color:#3af;border:1px solid #afff00;} } @-o-keyframes shuimuk /* Opera */ { 0% {font-size:0em;color:#FFF;top:120px;} 10% {font-size:3em;} 80% {font-size:3em;top:120px;} 100% {font-size:1em;color:#FFF} } #d{ animation:shuimud 3s linear 11s 1 normal forwards; -moz-animation:shuimud 3s linear 11s 1 normal forwards; -webkit-animation:shuimud 3s linear 11s 1 normal forwards; -o-animation:shuimud 3s linear 11s 1 normal forwards; } #h{ animation:shuimud 3s linear 14s 1 normal forwards; -moz-animation:shuimud 3s linear 14s 1 normal forwards; -webkit-animation:shuimud 3s linear 14s 1 normal forwards; -o-animation:shuimud 3s linear 14s 1 normal forwards; } #s{animation:shuimud 3s linear 20s 1 normal forwards; -moz-animation:shuimud 3s linear 20s 1 normal forwards; -webkit-animation:shuimud 3s linear 20s 1 normal forwards; -o-animation:shuimud 3s linear 20s 1 normal forwards; } #m{ animation:shuimud 3s linear 17s 1 normal forwards; -moz-animation:shuimud 3s linear 17s 1 normal forwards; -webkit-animation:shuimud 3s linear 17s 1 normal forwards; -o-animation:shuimud 3s linear 17s 1 normal forwards; } #ms{ animation:shuimud 3s linear 23s 1 normal forwards; -moz-animation:shuimud 3s linear 23s 1 normal forwards; -webkit-animation:shuimud 3s linear 23s 1 normal forwards; -o-animation:shuimud 3s linear 23s 1 normal forwards; } @-webkit-keyframes shuimud /* Safari and Chrome */ { 0% {font-size:250px;color:#FFF;top:-60px;} 100% {font-size:36px;color:#ff9800;top:-5px;} } .small{font-size:9px;color:#999;z-index:-55;} .t{position:fixed;top:-550px;left:-315px; animation:shuimut 3s linear 28s 1 normal forwards; -moz-animation:shuimut 3s linear 28s 1 normal forwards; -webkit-animation:shuimut 3s linear 28s 1 normal forwards; -o-animation:shuimut 3s linear 28s 1 normal forwards; } @-webkit-keyframes shuimut /* Safari and Chrome */ { 0% {filter:alpha(Opacity=0);-moz-opacity:0.0;opacity:0;top:115px;left:350px;} 100% {filter:alpha(Opacity=100);-moz-opacity:1.0;opacity:1.0;top:115px;left:40px;} } .c{position:fixed;right:2px;bottom:2px;color:#aaa;font-size:10px;} </style> <script language="javascript"> <!-- //document.write(""); function show_date_time() { window.setTimeout("show_date_time()", 1); BirthDay = new Date("01/01/2018"); //这里修改日期 today = new Date(); timeold = (BirthDay.getTime() - today.getTime()); sectimeold = timeold / 1000 secondsold = Math.floor(sectimeold); msPerDay = 24 * 60 * 60 * 1000 e_daysold = timeold / msPerDay daysold = Math.floor(e_daysold); e_hrsold = (e_daysold - daysold) * 24; hrsold = Math.floor(e_hrsold); e_minsold = (e_hrsold - hrsold) * 60; minsold = Math.floor((e_hrsold - hrsold) * 60); e_seconds = (e_minsold - minsold) * 60; seconds = Math.floor((e_minsold - minsold) * 60); ms = e_seconds - seconds; ms = new String(ms) ms = ms.substr(2, 2); document.getElementById("d").innerHTML = daysold + "<span class='small'>天" document.getElementById("h").innerHTML = (hrsold < 10 ? '0' + hrsold : hrsold) + "<span class='small'>小时" document.getElementById("m").innerHTML = (minsold < 10 ? '0' + minsold : minsold) + "<span class='small'>分" document.getElementById("s").innerHTML = (seconds < 10 ? '0' + seconds : seconds) + "<span class='small'>秒" document.getElementById("ms").innerHTML = ms + "<span class='small'>毫秒" } show_date_time(); //--> </script> <div class="shuimuk">距离2018年01月01日 还有</div> <span id="d"></span><span id="h"></span><span id="m"></span> <span id="s"></span> <span id="ms"></span></div>