首页 > 心得笔记 > 本站右上角Skill小贴士的实现方法

本站右上角Skill小贴士的实现方法

2011年4月30日  2,118 views 发表评论 阅读评论

前几天浏览别人博客的时候发现有个人的网站有skill小贴士,每次刷新页面都会随机显示一条小贴士,我觉得挺不错的,就学了过来。现在将实现的方法记录与此,如果有人也想在自己的网页上添加小贴士的话,可以直接拿去用。

实现这个小贴士,是通过jsp实现的。在网页中想要显示小贴士的地方添加一句

<!-- src当然要换成你自己的js文件地址 -->
<script src="http://codeup.org/js/skills.js" type="text/javascript"></script>

具体在本网站中,因为使用了wordpress的主题,所以不是修改某个页面,而是修改主题模板。在主题编辑中找到顶部然后找到合适的地方添加一个div,然后将上面那段代码填进去就OK了。后面的地址你可以使用自己的js文件,我会附在文章后面(也是从别人那里找来的),或者你也可以直接使用上面的网址,只要通知我一声就好了,反正我的流量用不完……

模板修改显示skill贴士

在模板修中修改显示skill贴士

下面具体讲一讲这个skills.js文件。

tips = new Array();
code = new Array();

code[127]=": > somefile";
tips[127]="清空一个文件或建立空文件";
code[126]="make -n [target]";
tips[126]="查看却不执行Makefile中需要执行的命令";

<!-- 省略了中间一些 -->

code[6] = 'sudo apt-get update;sudo apt-get dist-upgrade';
tips[6] = "系统升级";
code[5] = 'sudo apt-cdrom add';
tips[5] = '增加一个光盘源';
code[4] = 'apt-cache rdepends xxx';
tips[4] = '查询软件xxx被哪些包依赖';
code[3] = 'apt-cache depends xxx';
tips[3] = '查询软件xxx依赖哪些包';
code[2] = 'aptitude search 软件包';
tips[2] = '查找软件库中的软件';
code[1] = 'apt-cache search 正则表达式';
tips[1] = '查找软件库中的软件';
code[0] = 'dpkg -L xxx';
tips[0] = '查看软件xxx安装内容';

index = Math.floor(Math.random() * tips.length);
document.write(tips[index-1]+": "+code[index-1]);

实际上就是用两个数组分别来存储贴士名字和内容,然后用一个随机函数来随机显示其中一条。实现起来其实非常简单~
现在附上这个js文件:

  skills.js (10.6 KiB, 593 hits)



声明:未作说明,则本文为代码至上原创。转载务必注明出处
注意:转载须保留全文,如需修改请 联系作者
本文永久地址:http://codeup.org/archives/222


我要分享到:

新浪微博 腾讯微博 人人 Twitter Facebook 网易微博 鲜果 Follow5