1.公告栏
<!--把“XXXXXXXX”替换成你的QQ号--> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=XXXXXXXX&site=qq&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; 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>