[最多推荐]博客园页面设置
2015-06-04 00:27
323 查看
本文是转载的,原文地址链接不让添加
目录
一、编辑器1.链接
2.书签
3.html
4.插入代码
二、后台设置
1.页面定制CSS代码
2.公告栏
3.首页html代码
4.开通js权限
5.推荐按钮
补充
1.为什么没效果
2.代码具体放哪里
一、编辑器
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 </head> 7 <body> 8 <div style="text-align: center; color: #ffffff;"> 9 <canvas id="canvas" height="160" width="160"> 10 您的浏览器不支持html5的canvas 11 </canvas> 12 <div style="height: 10px"> 13 </div> 14 <div style="background-color: #0094ff;"> 15 <div id="div1"> 16 </div> 17 <div id="div2"> 18 </div> 19 </div> 20 </div> 21 <script type="text/javascript"> 22 window.onload = function () { 23 var canvas = document.getElementById("canvas"); 24 var can = canvas.getContext("2d"); 25 var radius = 80; //半径 26 var centre = [80, 80]; //中心点 27 28 setInterval(function () { 29 mydrawclock(); 30 31 }, 1000); 32 // mydrawclock(); 33 34 function mydrawclock() { 35 //清空画布 36 can.clearRect(0, 0, 500, 500); 37 //钟的大小(圆) 38 can.fillStyle = "#ebf0eb"; 39 can.beginPath(); 40 can.arc(centre[0], centre[1], radius, 0, Math.PI * 2, true); 41 can.closePath(); 42 can.fill(); 43 //中心点 44 can.fillStyle = "#0094ff"; 45 can.beginPath(); 46 can.arc(centre[0], centre[1], 4, 0, Math.PI * 2, true); 47 can.closePath(); 48 can.fill(); 49 //画钟 宽度 度数 颜色 长度 50 function drawclock(w, d, c, l) { 51 can.beginPath(); 52 can.strokeStyle = c; 53 can.lineWidth = w; 54 can.moveTo(centre[0], centre[1]); 55 can.lineTo(centre[0] + (radius - l) * Math.cos(d), centre[1] + (radius - l) * Math.sin(d)); 56 can.stroke(); 57 } 58 59 var date = new Date(); 60 //因为画圆是从3点钟方向开始的 所以要减去 61 var hours = date.getHours(); 62 var minutes = date.getMinutes(); 63 var seconds = date.getSeconds(); 64 var day = date.getDay(); 65 66 drawclock(4, (hours - 3 + minutes / 60) * 30 * Math.PI / 180, "#0094ff", 33); 67 drawclock(3, (minutes - 15 + seconds / 60) * 6 * Math.PI / 180, "#0094ff", 22); 68 drawclock(2, (seconds - 15) * 6 * Math.PI / 180, "#0094ff", 1); 69 70 document.getElementById("div1").innerHTML = hours + ":" + minutes + ":" + seconds; 71 72 switch (day) { 73 case 0: 74 day = "星期天"; 75 break; 76 case 1: 77 day = "星期一"; 78 break; 79 case 2: 80 day = "星期二"; 81 break; 82 case 3: 83 day = "星期三"; 84 break; 85 case 4: 86 day = "星期四"; 87 break; 88 case 5: 89 day = "星期五"; 90 break; 91 case 6: 92 day = "星期六"; 93 break; 94 default: 95 break; 96 } 97 98 document.getElementById("div2").innerHTML = day; // "</br>" + day; 99 // centre[0], centre[1] 100 //画分钟刻度 101 for (var i = 0; i < 60; i++) { 102 var angle = i * 6 * Math.PI / 180; 103 can.strokeStyle = "red"; 104 can.beginPath(); 105 can.lineWidth = 1; 106 can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle)); 107 can.lineTo(centre[0] + (radius - 5) * Math.cos(angle), centre[1] + (radius - 5) * Math.sin(angle)); 108 can.stroke(); 109 } 110 //画时钟刻度 111 for (var i = 0; i < 12; i++) { 112 var angle = i * 30 * Math.PI / 180; 113 can.strokeStyle = "#0094ff"; 114 can.lineWidth = 2; 115 can.beginPath(); 116 can.moveTo(centre[0] + radius * Math.cos(angle), centre[1] + radius * Math.sin(angle)); 117 can.lineTo(centre[0] + (radius - 8) * Math.cos(angle), centre[1] + (radius - 8) * Math.sin(angle)); 118 can.stroke(); 119 } 120 } 121 122 123 } 124 </script> 125 </body> 126 </html>
View Code
5.推荐按钮
原本的推荐按钮是在最底下,不熟悉的人有时候可能找都找不到。
为了方便我们可以设置样式,使之悬浮。
/*快速评论*/ #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权限的话,我们还可以动态添加别的快捷按钮。
如:关注,回到顶部,快速评价。
1 <script type="text/javascript"> 2 /** 3 不知道为什么页面加载完成时还读不到div_digg。可能也是动态生成的。 4 所以这里只能用定时器 不断的读取,当读取到了再给它动态添加快捷按钮 5 **/ 6 7 //自定义 定时器[当元素加载完成是执行回调函数] 8 function customTimer(inpId, fn) { 9 if ($(inpId).length) { 10 fn(); 11 } 12 else { 13 var intervalId = setInterval(function () { 14 if ($(inpId).length) { //如果存在了 15 clearInterval(intervalId); // 则关闭定时器 16 customTimer(inpId, fn); //执行自身 17 } 18 }, 100); 19 } 20 } 21 22 //页面加载完成是执行 23 $(function () { 24 customTimer("#div_digg", function () { 25 var div_html = "<div class=''>\ 26 <a href='javascript:void(0);' onclick='c_follow();'>关注</a>\ 27 | \ 28 <a href='#top'>顶部</a>\ 29 | \ 30 <a href='javascript:void(0);' onclick=\" $('#tbCommentBody').focus();\">评论</a>\ 31 </div>"; 32 $("#div_digg").append(div_html); 33 //tbCommentBody 34 }); 35 }); 36 </script>
ps:平时看大家的博客看得特爽。今天才知道原来写博客是件费时又费力的事情。不过写博客的好处也只有谁写谁知道!
大家如果有自己的窍门谢谢分享到评论区。
-----------------------------------------------------分割线---------------------------------------------------------------------------------------
有朋友问代码具体放哪里,有朋友问放入了代码为什么没有效果。那么我在这里详细说说。
1.为什么没有效果
注意没有效果很有可能是没有开通js权限。那么怎么测试自己是否有js权限呢?很简单放入一段测试代码就ok了。
<script type="text/javascript">console.log("测试成功~");</script>
把这句代码放入“页脚Html代码”保存即可。然后刷新你的页面。按F12点击Console,是否有打印了“测试成功”。(博客园貌似屏蔽了alert函数,所以不能弹出测试。)
如果没有,那么你可以发邮件到contact@cnblogs.com确认是否开通,没有开通的话可以申请开通。
2.代码具体放哪里
具体步骤图片分解
公告,页首和脚本地方都可以放html和js代码。
这里最后注意了!!之前我没有测试 原来代码直接贴进去是有问题的。不知道博客园有什么限制还是什么。
像我这样引用js是没有问题的。至于你的js代码放哪里?你可以上传到博客园的文件,也可以用https://git.oschina.net 或 https://github.com
相关文章推荐
- 结对实践项目——“五子棋”小游戏
- DOM树节点解析
- java继承覆盖总结
- 第二十天:方案
- WorldWind源码剖析系列:图像助手类ImageHelper
- 【HDU】5254 棋盘占领(BFS)
- WorldWind源码剖析系列:缓冲类Cache
- C/C++语言统计文件中单词出现个数
- vmware里面的linux怎么和windows相互传文件
- 正规表示法与文件格式化处理
- Oracle之SQL基础
- WorldWind源码剖析系列:绘制参数类DrawArgs
- 广商博客冲刺第六七天new
- 4.20
- [hdu4498]离散化,simpson求积分
- java简单的判断奇偶数方法(i & 1) != 0 i为奇数
- 团队管理的感悟---尽可能不要让成员感到怀才不遇
- List subList()
- hdu 1016 Prime Ring Problem(素数环,超时)
- 西普学院Crypto之用户名和密码