基于简单JavaScript的网页倒计时

倒计时功能

今天今天

今天是2017年考研结束的日子，上午看微博看到他们考完数学，有的觉得难、有人觉得稳了，晚上写着这个倒计时功能，自己心里百味陈杂，想着自己的时间其实已经没有多少了，却还有很多很多事情要做，总觉得有很多东西没有实现，特别是这几天一直在看、做javaEE的项目----AppleStore，越做越发现自己有很多不会，这三年自己学到的东西很少很少，不懂的越来越多；只能不断的baidu，刚刚写完这个JavaScript+Css+HTML的简单倒计时功能，觉得应该总结一下，是时候该非常非常努力了，不能再让flourish失望了....

好了，接下来简单说一下项目，主要是实现倒计时功能；从Css来控制样式，JavaScript实现功能，到最后的HTML调用css、js来计时。

js计时：

<script type="text/javascript">$(function() {$('#clock').countdown('2018/12/25', function(event) {$(this).html(event.strftime('' +//'<span>%w</span> 星期 ' +'<span>%D </span> 天 ' +'<span>%H</span> 小时 ' +'<span>%M</span> 分 ' +'<span>%S</span> 秒'));});})</script>

字体样式：

<style type="text/css">#clock{font-family: 'Days One',"Microsoft YaHei", Arial,sans-serif;font-size: 2em;}</style>

css样式：

body, html { font-size: 100%; padding: 0; margin: 0;}/* Reset */*,*:after,*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */.clearfix:before,.clearfix:after {content: " ";display: table;}.clearfix:after {clear: both;}body{background: #494A5F;color: #D5D6E2;font-weight: 500;font-size: 1.05em;font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;}a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}a:hover,a:focus{color:#74777b;text-decoration: none;}.zzsc-container{margin: 0 auto;}.zzsc-content{text-align: center;padding: 50px;}.bgcolor-1 { background: #f0efee; }.bgcolor-2 { background: #f9f9f9; }.bgcolor-3 { background: #e8e8e8; }/*light grey*/.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/.bgcolor-6 { background: #2fa8ec; }/*sky blue*/.bgcolor-7 { background: #d0d6d6; }/*White tea*/.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/.bgcolor-20{ background: #494A5F;color: #D5D6E2;}/* Header */.zzsc-header{padding: 1em 190px 1em;letter-spacing: -1px;text-align: center;background: #66677c;}.zzsc-header h1 {color: #D5D6E2;font-weight: 600;font-size: 2em;line-height: 1;margin-bottom: 0;font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;}.zzsc-header h1 span {font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;display: block;font-size: 60%;font-weight: 400;padding: 0.8em 0 0.5em 0;color: #c3c8cd;}/*nav*/.zzsc-demo a{color: #fff;text-decoration: none;}.zzsc-demo{width: 100%;padding-bottom: 1.2em;}.zzsc-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}.zzsc-demo a:hover{opacity: 0.6;}.zzsc-demo a.current{background:#1d7db1;color: #fff; }/* Top Navigation Style */.zzsc-links {position: relative;display: inline-block;white-space: nowrap;font-size: 1.5em;text-align: center;}.zzsc-links::after {position: absolute;top: 0;left: 50%;margin-left: -1px;width: 2px;height: 100%;background: #dbdbdb;content: '';-webkit-transform: rotate3d(0,0,1,22.5deg);transform: rotate3d(0,0,1,22.5deg);}.zzsc-icon {display: inline-block;margin: 0.5em;padding: 0em 0;width: 1.5em;text-decoration: none;}.zzsc-icon span {display: none;}.zzsc-icon:before {margin: 0 5px;text-transform: none;font-weight: normal;font-style: normal;font-variant: normal;font-family: 'icomoon';line-height: 1;speak: none;-webkit-font-smoothing: antialiased;}/* footer */.zzsc-footer{width: 100%;padding-top: 10px;}.zzsc-small{font-size: 0.8em;}.center{text-align: center;}/****/.related {color: #fff;background: #494A5F;text-align: center;font-size: 1.25em;padding: 0.5em 0;overflow: hidden;}.related > a {vertical-align: top;width: calc(100% - 20px);max-width: 340px;display: inline-block;text-align: center;margin: 20px 10px;padding: 25px;font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;}.related a {display: inline-block;text-align: left;margin: 20px auto;padding: 10px 20px;opacity: 0.8;-webkit-transition: opacity 0.3s;transition: opacity 0.3s;-webkit-backface-visibility: hidden;}.related a:hover,.related a:active {opacity: 1;}.related a img {max-width: 100%;opacity: 0.8;border-radius: 4px;}.related a:hover img,.related a:active img {opacity: 1;}.related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em}.related a h3 {font-size: 0.85em;font-weight: 300;margin-top: 0.15em;color: #fff;}/* icomoon */.icon-zzsc-home-outline:before {content: "\e5000";}.icon-zzsc-arrow-forward-outline:before {content: "\e5001";}@media screen and (max-width: 1024px) {.zzsc-header {padding: 2em 10% 2em;}.zzsc-header h1 {        font-size:1.4em;    }    .zzsc-links{font-size: 1.4em}}@media screen and (max-width: 960px) {.zzsc-header {padding: 2em 10% 2em;}.zzsc-header h1 {        font-size:1.2em;    }    .zzsc-links{font-size: 1.2em}    .related h3{font-size: 1em;}.related a h3 {font-size: 0.8em;}}@media screen and (max-width: 766px) {.zzsc-header h1 {        font-size:1.3em;    }    .zzsc-links{font-size: 1.3em}}@media screen and (max-width: 640px) {.zzsc-header {padding: 2em 10% 2em;}.zzsc-header h1 {        font-size:1em;    }    .zzsc-links{font-size: 1em}    .related h3{font-size: 0.8em;}.related a h3 {font-size: 0.6em;}}

在参考网上相关的计时功能后，写完这个Demo便急忙的放到自己的网站上了，以此来提醒自己。高考过后，笃志考研，加油！

效果：