博客园小功能、美化笔记

以下部分教程来源于互联网，仅作为本人学习所用。

每日一言

在侧边栏加入以下 css 代码即可。可以对代码中的中文内容进行自定义修改，每刷新一次界面，就会选择其中一条进行显示：

<meta charset="utf-8"/>
     
            <h2><B>一言（ヒトコト）</B></h2>
            <div class="daily a pome">
              <div class="daily pome" id="qwq"></div>
              <script>
                  var st=["<center>你不是一个人<br><center>     ——lmh<br>",                          "<center>这不是bzoj原题吗<br><center>      ——hjw<br>",                          "<center>我去骗钥匙啦~<br><center>     ——yxy<br>",                           "<center>你无聊吗，快去刷题。<br><center>     ——lmh<br>",                           "<center>loj.ac<br><center>     ——lmh<br>",                           "<center>想和zn谈恋爱<br><center>     ——lmh<br>",                           "<center>zc大人我错了！<br><center>     ——wjd<br>",                           "<center>zn：有没有说出题人谁啊<br><center>yxy：好像是lxq？？<br><center>zn：暴打出题人<center>yxy：老师！！！<br>",                           "<center>学习线性解决a+b问题<br><center>      ——zn<br>",                           "<center>代码已经给出，<br><center> 读者自证不难。<br><center>     ——lrj",                           "<center>啊<br><center>我要女装！<br><center>     ——zzx<br>",                          "<center>辛苦了~<br><center>     ——lmh<br>",                          "<center>棒！<br><center>     ——lmh<br>",                          "<center>学OI后悔三年<br><center>不学OI后悔一辈子/呲牙<br><center>     ——zn<br>",                          "<center>又把1e3+7写成1e4+7了……<br><center>干脆叫万柒吧。。<br><center>     ——yxy<br>",                          "<center>即得易见平凡，由上自证显然，留作习题答案略，读者自证不难。<br><center>反之亦然同理，推论自然成立，略去过程Q.E.D，由上可知证毕。<br><center>     ——lca",                          "<center>我要让zn提头来见我<br><center>     ——lmh<br>",                          "<center>这年头 expert 很难么？<br><center>    ——zn<br>",                          "<center>成为很厉害很厉害的人，最重要的，就是要热血，永远也不要让你的血凉下去。<br><center>    ——hzwer",                          "<center>高中的 OI 刚刚开始，希望不要那么快就凋零。兔纸的时间已经不多，请把自己选择的路，好好走下去。<br><center>   ——Bunnycxk",                          "<center>Who laughs last laughs best!<br><center>     ——Emma",                          "<center>别哭，眼泪会冻住的。<br><center>     ——那年那兔那些事儿"                          ];
                  var num;
                  num=Math.floor((Math.random()*22));
                  document.write(st[num]);
                  var cli;
                  
              </script>
              <div style="font-size: 1em; text-align: center; line-height: 1.5em; display: none; " id="qwq"></div>
              <div style="text-align: right;  margin-top: 15px; font-size: 0.9em; color: #666; display: none; " id="qwq"></div>
            </div>

鼠标点击特效

在页脚 html 代码处加入以下 css 代码。点击鼠标时，就会在页面中显示特效。可以修改第六行代码中双引号内的内容：

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

改变博客图标

在页首 html 代码处加入以下代码即可，记得将 linkObject.href 内的链接修改为你自己的：

<div style = "display:none;" >把博客园图标替换成自己的图标 </div>
<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://your-photos.jpg";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>
<div style = "display:none;" >把博客园图标替换成自己的图标end </div>

动态显示博客标题

在离开当前博客的标签页以及点进去的时候会出现该效果，2s 之后会消失。需要在页脚 html 中加入以下代码，可以自定义修改 document.title 后的文字：

<div style = "display:none;" > 浏览器标题切换  </div>
<script>  
var OriginTitile = document.title;    // 保存之前页面标题  
var titleTime;  
document.addEventListener('visibilitychange', function(){  
    if (document.hidden){  
        document.title ='你不要我了么？qwq';  // 切出文字
        clearTimeout(titleTime);  
    }else{  
        document.title = '欢迎回来～';  // 切入文字
        titleTime = setTimeout(function() {  
            document.title = OriginTitile;  
        }, 1000); // 2秒后恢复原标题  
    }  
});  
</script>
<div style = "display:none;" > 浏览器标题切换end  </div>

背景中的动态线条

将如下代码放入侧边栏：

<div style = "display:none;">动态线条</div>
<script>

!function(){

function n(n,e,t){

return n.getAttribute(e)||t

}

function e(n){

return document.getElementsByTagName(n)

}

function t(){

var t=e("script"),o=t.length,i=t[o-1];

return{

l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)

}

}

function o(){

a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,

c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

}

function i(){

r.clearRect(0,0,a,c);

var n,e,t,o,m,l;

s.forEach(function(i,x){

for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],

null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,

l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),

t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))

}),

x(i)

}

var a,c,u,m=document.createElement("canvas"),

d=t(),l="c_n"+d.l,r=m.getContext("2d"),

x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||

function(n){

window.setTimeout(n,1e3/45)

},

w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,

window.onmousemove=function(n){

n=n||window.event,y.x=n.clientX,y.y=n.clientY

},

window.onmouseout=function(){

y.x=null,y.y=null

};

for(var s=[],f=0;d.n>f;f++){

var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})

}

u=s.concat([y]),

setTimeout(function(){i()},100)

}();

</script>
<div style = "display:none;"> 动态线条end</div>

旋转立方体

在博客侧边栏的旋转立方体，记得将 img src 后的图片链接地址更改为你自己的：

<div style = "display:none;">旋转立方体</div>
<style>
        /*最外层容器样式*/
        .wrap {
             100px;
            height: 100px;
            margin: 150px;
            position: relative;
        }
 
        /*包裹所有容器样式*/
        .cube {
             50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }
 
        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube div {
            position: absolute;
             200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }
 
        /*定义所有图片样式*/
        .pic {
             200px;
            height: 200px;
        }
 
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
 
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
 
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
 
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
 
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
 
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
 
        /*定义小正方体样式*/
        .cube span {
            display: block;
             100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
 
        .cube .in_pic {
             100px;
            height: 100px;
        }
 
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
 
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
 
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
 
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
 
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
 
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
 
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
 
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
 
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
 
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
 
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
 
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>


    <!-- 外层最大容器 -->
    <div class="wrap">
        <!--包裹所有元素的容器-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="https://your-photos.jpg" class="pic">
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="https://your-photos.jpg" class="pic">
            </div>
            <!--左面图片 -->
            <div class="out_left">
                <img src="https://your-photos.jpg" class="pic">
            </div>
            <!--右面图片 -->
            <div class="out_right">
                <img src="https://your-photos.jpg" class="pic">
            </div>
            <!--上面图片 -->
            <div class="out_top">
                <img src="https://your-photos.jpg" class="pic">
            </div>
            <!--下面图片 -->
            <div class="out_bottom">
                <img src="https://your-photos.jpg" class="pic">
            </div>
 
            <!--小正方体 -->
            <span class="in_front">
                <img src="https://your-photos.jpg" class="in_pic">
            </span>
            <span class="in_back">
                 <img src="https://your-photos.jpg" class="in_pic">
            </span>
            <span class="in_left">
                <img src="https://your-photos.jpg" class="in_pic">
            </span>
            <span class="in_right">
                <img src="https://your-photos.jpg" class="in_pic">
            </span>
            <span class="in_top">
                <img src="https://your-photos.jpg" class="in_pic">
            </span>
            <span class="in_bottom">
                <img src="https://your-photos.jpg" class="in_pic">
            </span>
        </div>
 
    </div>
<div style = "display:none;">旋转立方体end</div>

添加背景图片

选择 simplememory 主题，然后添加如下代码，记得将 background: url 后的图片链接地址更改为你自己的：

/*simplememory*/
#google_ad_c1, #google_ad_c2 {display:none;}
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
font-size: 14px!important;
}
#home {
opacity: 0.80;
margin: 0 auto;
 85%;
min- 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle h1 {
font-size: 30px;
font-weight: bold;
font-family: "Comic Sans MS";
line-height: 1.5em;
margin-top: 20px;
color: #515151;
}
#navList a:hover {
color: #4C9ED9;
text-decoration: none;
}
#navList a {
display: block;
 5em;
height: 22px;
float: left;
text-align: center;
padding-top: 18px;
}
#navigator {
font-size: 15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 10px 0 14px 10px;
background-color: #f5f5f5;
}
#ad_under_post_holder #google_ad_c1,#google_ad_c2{ 
display: none !important;
}
body {
color: #000;
background: url(https://your-photos.jpg) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#topics .postTitle {
border: 0px;
font-size: 200%;
font-weight: bold;
float: left;
line-height: 1.5;
 100%;
padding-left: 5px;
}


div.commentform p{
margin-bottom:10px;
}
.comment_btn {
padding: 5px 10px;
height: 35px;
 90px;
border: 0 none;
border-radius: 5px;
background: #ddd;
color: #999;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
.comment_btn:hover{
padding: 5px 10px;
height: 35px;
 90px;
border: 0 none;
border-radius: 5px;
background: #258fb8;
color: white;
cursor:pointer;
font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
text-shadow: 0 0 1px #fff;
display: inline !important;
}
#commentform_title {
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:0;
font-size:24px;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
.commentbox_title {
 100%;
}
#tbCommentBody {
font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
margin-top:10px;
max-100%;
min-100%;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
// padding:10px;
height:250px;
font-size:14px;
min-height:120px;
}
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}

#blog-comments-placeholder, #comment_form {
padding: 20px;
background: #fff;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
margin-bottom: 50px;
}
.feedback_area_title {
margin-bottom: 15px;
font-size: 1.8em;
}
.feedbackItem {
border-bottom: 1px solid #CCC;
margin-bottom: 10px;
padding: 5px;
background: rgb(248, 248, 248);
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {
font-weight: normal;
margin-bottom: 15px;
}

将代码中的图片地址改成自己的就行。

雪花效果

（该功能需要开通 js 权限）在电脑本地新建一个文本文档，然后粘贴如下代码：

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();

(function() {
    var flakes = [],
        canvas = document.getElementById("Snow"), //画布ID，与上一步创建的画布对应
        ctx = canvas.getContext("2d"),
        flakeCount = 200,  //雪花数量，数值越大雪花数量越多
        mX = -100,
        mY = -100;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i],
                x = mX,
                y = mY,
                minDist = 150,  //雪花距离鼠标指针的最小值，小于这个距离的雪花将受到鼠标的排斥
                x2 = flake.x,
                y2 = flake.y;

            var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                dx = x2 - x,
                dy = y2 - y;

            if (dist < minDist) {
                var force = minDist / (dist * dist),
                    xcomp = (x - x2) / dist,
                    ycomp = (y - y2) / dist,
                    deltaV = force / 2;

                flake.velX -= deltaV * xcomp;
                flake.velY -= deltaV * ycomp;

            } else {
                flake.velX *= .98;
                if (flake.velY <= flake.speed) {
                    flake.velY = flake.speed
                }
                flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
            }

            ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";  //雪花颜色
            flake.y += flake.velY;
            flake.x += flake.velX;

            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }

            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }

            ctx.beginPath();
            ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(snow);
    };

    function reset(flake) {
        flake.x = Math.floor(Math.random() * canvas.width);
        flake.y = 0;
        flake.size = (Math.random() * 3) + 2;  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
        flake.speed = (Math.random() * 1) + 0.5;  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1
    }

    function init() {
        for (var i = 0; i < flakeCount; i++) {
            var x = Math.floor(Math.random() * canvas.width),
                y = Math.floor(Math.random() * canvas.height),
                size = (Math.random() * 3) + 2,  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
                speed = (Math.random() * 1) + 0.5,  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
                opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1

            flakes.push({
                speed: speed,
                velY: speed,
                velX: 0,
                x: x,
                y: y,
                size: size,
                stepSize: (Math.random()) / 30 * 1,  //乘号后面的值，雪花横移幅度，为基准值，数值越大雪花横移幅度越大，0为竖直下落
                step: 0,
                angle: 180,
                opacity: opacity
            });
        }

        snow();
    };

    document.addEventListener("mousemove", function(e) {
        mX = e.clientX,
        mY = e.clientY
    });
    window.addEventListener("resize", function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
    init();
})();

保存后，重命名为 xue.js，记得文件后缀是 .js，不能错了！

然后打开你自己的博客后台，找到文件选项，将你刚才新建的 xue.js 文件上传上去。

上传完成后，打开你上传的这个文件，复制该文件的链接。

将如下代码放在页尾，记得将 script src 后的链接改为你刚才复制的链接：

<div class="Snow">
    <canvas id="Snow"></canvas>
</div>

<script src="https://your-files.js"></script>

将如下代码放入自定义 css，用于添加样式，背景颜色可以自己改变：

#Snow{
    position: fixed;
    top: 0;
    left: 0;
     100%;
    height: 100%;
    z-index: 99999;
    background: rgba(125,137,95,0.1);
    pointer-events: none;
}

去除页面广告

在页面定制 css 添加代码：

#google_ad_c1,#div-gpt-ad-1320933818841-0,#google_ad_c2,#div-gpt-ad-1320933818841-1,#ad_under_google{
display:none;
visibility：hidden;
}

#under_post_kb,
#under_post_news{
   display:none;
}

#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a {
    display: none;
}
#ad_t2{ display:none }

#div_digg{ display:none }
#author_profile_info{ display:none }
.postDesc{ display:none }

公告栏时钟

博客侧边栏公告代码（用的某位大佬的 js 文件）：

<!-- 添加公告栏时钟 -->
<div id="clockdiv">
    <canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>

页面定制 CSS 代码：

/* 定制公告栏时钟位置 */
#clockdiv {
    /* left, center, right */
    text-align: center;
}

点击爱心效果

为页面添加鼠标点击心形特效，代码放在 “博客侧边栏公告（支持 HTML 代码）（支持 JS 代码）”框中，代码如下：

<!-- 为页面添加爱心特效 -->
<script type="text/javascript">

(function(window,document,undefined){
    var hearts = [];
    s
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function (callback){
             setTimeout(callback,1000/60);
         }
    })();
    
    init();

    function init(){
        css(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
    }

    function gameloop(){
        for(var i=0;i<hearts.length;i++){
            if(hearts[i].alpha <=0){
                document.body.removeChild(hearts[i].el);
                hearts.splice(i,1);
                continue;
             }

             hearts[i].y--;
             hearts[i].scale += 0.004;
             hearts[i].alpha -= 0.013;
             hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
        }

        requestAnimationFrame(gameloop);
    }

    function attachEvent(){
        var old = typeof window.onclick==="function" && window.onclick;
        window.onclick = function(event){
            old && old();
            createHeart(event);
        }
    }

    function createHeart(event){
        var d = document.createElement("div");
        d.className = "heart";
        hearts.push({
            el : d,
            x : event.clientX - 5,
            y : event.clientY - 5,
            scale : 1,
            alpha : 1,
            color : randomColor()
        });

        document.body.appendChild(d);
    }

    function css(css){
        var style = document.createElement("style");
        style.type="text/css";
        try{
            style.appendChild(document.createTextNode(css));
        }
        catch(ex){
            style.styleSheet.cssText = css;
        }

        document.getElementsByTagName('head')[0].appendChild(style);
    }

    function randomColor(){
        return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
    }
    
})(window,document);
</script>