有志者事竟成。

博客园页面设置

1.公告栏

<!--把“XXXXXXXX”替换成你的QQ号-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=XXXXXXXX&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:XXXXXXXX:13" alt="有事您Q我" title="有事您Q我"></a>

2.开通js权限

博客园默认是没有开通js权限的。可以向管理员申请开通。

开通js权限后可以做很多事。

如：在公告栏中自己写个日历或者时钟表什么的。我的就是自己加了个时钟表

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>

    <body>
        
        <div style="text-align: center; color: #ffffff;">
            <canvas id="canvas" height="160" width="160">
              您的浏览器不支持html5的canvas
          </canvas>
            <div style="height: 10px">
            </div>
            <div style="background-color: #0094ff;">
                <div id="div1">
                </div>
                <div id="div2">
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            window.onload = function() {
                var canvas = document.getElementById("canvas");
                var can = canvas.getContext("2d");
                var radius = 80; //半径
                var centre = [80, 80]; //中心点

                setInterval(function() {
                    mydrawclock();

                }, 1000);
                //   mydrawclock();

                function mydrawclock() {
                    //清空画布
                    can.clearRect(0, 0, 500, 500);
                    //钟的大小（圆）
                    can.fillStyle = "#ebf0eb";
                    can.beginPath();
                    can.arc(centre[0], centre[1], radius, 0, Math.PI * 2, true);
                    can.closePath();
                    can.fill();
                    //中心点
                    can.fillStyle = "#0094ff";
                    can.beginPath();
                    can.arc(centre[0], centre[1], 4, 0, Math.PI * 2, true);
                    can.closePath();
                    can.fill();
                    //画钟 宽度 度数 颜色 长度
                    function drawclock(w, d, c, l) {
                        can.beginPath();
                        can.strokeStyle = c;
                        can.lineWidth = w;
                        can.moveTo(centre[0], centre[1]);
                        can.lineTo(centre[0] + (radius - l) * Math.cos(d), centre[1] + (radius - l) * Math.sin(d));
                        can.stroke();
                    }

                    var date = new Date();
                    //因为画圆是从3点钟方向开始的 所以要减去
                    var hours = date.getHours();
                    var minutes = date.getMinutes();
                    var seconds = date.getSeconds();
                    var day = date.getDay();

                    drawclock(4, (hours - 3 + minutes / 60) * 30 * Math.PI / 180, "#0094ff", 33);
                    drawclock(3, (minutes - 15 + seconds / 60) * 6 * Math.PI / 180, "#0094ff", 22);
                    drawclock(2, (seconds - 15) * 6 * Math.PI / 180, "#0094ff", 1);

                    document.getElementById("div1").innerHTML = hours + ":" + minutes + ":" + seconds;

                    switch(day) {
                        case 0:
                            day = "星期天";
                            break;
                        case 1:
                            day = "星期一";
                            break;
                        case 2:
                            day = "星期二";
                            break;
                        case 3:
                            day = "星期三";
                            break;
                        case 4:
                            day = "星期四";
                            break;
                        case 5:
                            day = "星期五";
                            break;
                        case 6:
                            day = "星期六";
                            break;
                        default:
                            break;
                    }

                    document.getElementById("div2").innerHTML = day; // "</br>" + day;
                    // centre[0], centre[1]
                    //画分钟刻度
                    for(var i = 0; i < 60; i++) {
                        var angle = i * 6 * Math.PI / 180;
                        can.strokeStyle = "red";
                        can.beginPath();
                        can.lineWidth = 1;
                        can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
                        can.lineTo(centre[0] + (radius - 5) * Math.cos(angle), centre[1] + (radius - 5) * Math.sin(angle));
                        can.stroke();
                    }
                    //画时钟刻度
                    for(var i = 0; i < 12; i++) {
                        var angle = i * 30 * Math.PI / 180;
                        can.strokeStyle = "#0094ff";
                        can.lineWidth = 2;
                        can.beginPath();
                        can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle));
                        can.lineTo(centre[0] + (radius - 8) * Math.cos(angle), centre[1] + (radius - 8) * Math.sin(angle));
                        can.stroke();
                    }
                }
            }
        </script>
    </body>

</html>

3.推荐按钮

原本的推荐按钮是在最底下，不熟悉的人有时候可能找都找不到。

为了方便我们可以设置样式，使之悬浮。

/*快速评论*/
#div_digg {
  position: fixed;
  bottom: 10px;
  right: 15px;
  border: 2px solid #ECD7B1;
  padding: 10px;
  width: 140px;
  background-color: #fff;
  border-radius: 5px 5px 5px 5px !important;
  box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

 

如果开通了js权限的话，我们还可以动态添加别的快捷按钮。

如：关注，回到顶部，快速评价。

<script type="text/javascript">
			/**
			            不知道为什么页面加载完成时还读不到div_digg。可能也是动态生成的。
			            所以这里只能用定时器 不断的读取，当读取到了再给它动态添加快捷按钮
			          **/

			//自定义 定时器[当元素加载完成是执行回调函数]
			function customTimer(inpId, fn) {
				if($(inpId).length) {
					fn();
				} else {
					var intervalId = setInterval(function() {
						if($(inpId).length) { //如果存在了
							clearInterval(intervalId); // 则关闭定时器
							customTimer(inpId, fn); //执行自身
						}
					}, 100);
				}
			}

			//页面加载完成是执行
			$(function() {
				customTimer("#div_digg", function() {
					var div_html = "<div class=''>\
                         <a href='javascript:void(0);' onclick='c_follow();'>关注</a>\
                           | \
                         <a href='#top'>顶部</a>\
                           | \
                         <a href='javascript:void(0);' onclick=\" $('#tbCommentBody').focus();\">评论</a>\
                    </div>";
					$("#div_digg").append(div_html);
					//tbCommentBody    
				});
			});
		</script>

　　

posted on 2019-08-29 10:18  阿长*长  阅读(211)  评论(0)  编辑  收藏  举报

导航