分类 代码 下的文章

JS - 动态显示存活时间

将以下代码插入到相关的 footer.php 文件中:

<span id="sitetime"></span>
        <script language=javascript>
            function siteTime(){
            window.setTimeout("siteTime()", 1000);
            var seconds = 1000
            var minutes = seconds * 60
            var hours = minutes * 60
            var days = hours * 24
            var years = days * 365
            var today = new Date()
            var todayYear = today.getFullYear()
            var todayMonth = today.getMonth()
            var todayDate = today.getDate()
            var todayHour = today.getHours()
            var todayMinute = today.getMinutes()
            var todaySecond = today.getSeconds()
            /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳) 
            year - 作为date对象的年份,为4位年份值
            month - 0-11之间的整数,做为date对象的月份
            day - 1-31之间的整数,做为date对象的天数
            hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
            minutes - 0-59之间的整数,做为date对象的分钟数
            seconds - 0-59之间的整数,做为date对象的秒数
            microseconds - 0-999之间的整数,做为date对象的毫秒数 */
            var t1 = Date.UTC(2017,2,11,00,00,00)
            var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
            var diff = t2-t1
            var diffYears = Math.floor(diff/years)
            var diffDays = Math.floor((diff/days)-diffYears*365)
            var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
            var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
            var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)
            /* document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒" */
            document.getElementById("sitetime").innerHTML=" 很努力地存活了 "+(diffYears*365+diffDays)+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"
            }
            siteTime()
            </script>

CSS - 缓冲动画样式

html 代码

<div class="preloader">
    <div class="zgroup">
        <div class="bigSqr">
            <div class="square first"></div>
            <div class="square second"></div>
            <div class="square third"></div>
            <div class="square fourth"></div>
        </div>
    </div>
    <p>...</p>
</div>

css 代码
.preloader{margin:86px 0;text-align:center;}
.preloader p{font-size:1.2em;margin-top:20px;text-align:center;}
.zgroup{line-height:16px;}
.bigSqr,.zgroup{position:relative;display:inline-block;}
.bigSqr{width:40px;height:40px;overflow:hidden;-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-animation:bigSqrShrink 1s linear infinite;animation:bigSqrShrink 1s linear infinite;}
.square{position:absolute;width:20px;height:20px;background:#cf6;}
.first{left:0;top:20px;}
.second{left:20px;top:20px;-webkit-animation:drop2 1s linear infinite;animation:drop2 1s linear infinite;}
.third{left:0;top:0;-webkit-animation:drop3 1s linear infinite;animation:drop3 1s linear infinite;}
.fourth{left:20px;top:0;-webkit-animation:drop4 1s linear infinite;animation:drop4 1s linear infinite;}
@-webkit-keyframes bigSqrShrink{0%{-webkit-transform:scale(1);transform:scale(1);}90%{-webkit-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(.5);transform:scale(.5);}}
@keyframes bigSqrShrink{0%{-webkit-transform:scale(1);transform:scale(1);}90%{-webkit-transform:scale(1);transform:scale(1);}to{-webkit-transform:scale(.5);transform:scale(.5);}}
@-webkit-keyframes drop2{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}25%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop2{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}25%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@-webkit-keyframes drop3{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}50%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop3{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}50%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@-webkit-keyframes drop4{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}75%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
@keyframes drop4{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);}75%{-webkit-transform:translate(0);transform:translate(0);}to{-webkit-transform:translate(0);transform:translate(0);}}
demo

CSS - Typecho 自带评论的头像旋转样式

css 代码

#comments .comment-author .avatar{
                                    transition:1s;/*核心代码*/
                                    float:left;
                                    margin:.0625rem .625rem 0 0;
                                    border-radius:3.125rem;
                                    width:3.125rem;
                                    height:3.125rem
                                }
#comments .comment-author .avatar:hover{
                                    transform:rotate(360deg);/*核心代码*/
                                    -webkit-transform:rotate(360deg);/*核心代码*/
                                    }

wdcp php 版本升级至 5.6

在部署本网站时,发现网站中各种乱码,原因是需要 php5.6+ 的版本,所以进行了 php 版本的升级。
shell 代码

wget -c http://batpanel.oss-cn-beijing.aliyuncs.com/php_up5.6.sh
sh php_up5.6.sh

JS - 倒计时器

js 代码

  function GetRTime1(){
    var EndTime1= new Date('2018/03/28 00:00:00');
    var NowTime1 = new Date();
    var t1 =EndTime1.getTime() - NowTime1.getTime();
    var d1=0;
    var h1=0;
    var m1=0;
    var s1=0;
    if(t1>=0){
      d1=Math.floor(t1/1000/60/60/24);
      h1=Math.floor(t1/1000/60/60%24);
      m1=Math.floor(t1/1000/60%60);
      s1=Math.floor(t1/1000%60);
    }
    document.getElementById("t_d1").innerHTML = d1 + " 天";
    document.getElementById("t_h1").innerHTML = h1 + " 时";
    document.getElementById("t_m1").innerHTML = m1 + " 分";
    document.getElementById("t_s1").innerHTML = s1 + " 秒";
  }
  setInterval(GetRTime1,0);

html 代码

<code id="t_d1">00</code>
<code id="t_h1">00</code>
<code id="t_m1">00</code>
<code id="t_s1">00</code>