JS - 鼠标点击显示圆点动画特效

692浏览 • 代码 •  22字 • 评论

html 代码

<script src="<?= STATIC_PATH ?>js/mo.min.js"></script><!--鼠标点击特效-->
<script src="<?= STATIC_PATH ?>js/mojs-player.min.js"></script><!--鼠标点击特效-->
<script src="<?= STATIC_PATH ?>js/mo.s.js"></script><!--鼠标点击特效-->
下载

PHP - 访客计数器

773浏览 • 代码 •  11字 • 评论

php 代码

<?php
        $counterFile = "counter.txt";
        function displayCounter($counterFile) {
        $fp = fopen($counterFile,"rw");
        $num = fgets($fp,4096);
        $num += 1;
        print "您是第 " . $num . " 位小朋友";
        exec( "rm -rf $counterFile");
        exec( "echo $num > $counterFile");
                }
        if (!file_exists($counterFile)) {
            exec( "echo 0 > $counterFile");
            }
        displayCounter($counterFile);
?>

  翻  牌  子

解决 avatar 头像设置问题

2652浏览 • 代码 •  81字 • 4 条评论

推荐 一枝红杏|网络加速器 。
关于 QQ 邮箱问题，需要进行下白名单的设置，因为默认下是收不到 avatar 的邮件的。
打开 QQ 邮箱的设置 -> 反垃圾 -> 设置邮件地址白名单中添加 donotreply@gravatar.com -> 在设置域名白名单中添加 en.gravatar.com 和 wordpress.com -> 保存设置，完成。

JS - 动态显示存活时间

882浏览 • 代码 •  152字 • 评论

将以下代码插入到相关的 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 - 缓冲动画样式

1098浏览 • 代码 •  4字 • 评论

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

  1. 1
  2. ...
  3. 23
  4. 24
  5. 25
  6. 26