介绍插入js代码的两种情况
常规web页面
普通web页面只需要修改对应的HTML文档
- 对应的HTML和JavaScript代码 (注意被替换元素的id):
<div class="site-name">
<h1 class="hidden">加菲猫</h1>
<a id="logo" href="/.">加菲猫</a>
<!-- 下面id="subt"的h2标签就是被内联显示的元素,id与前面JavaScript代码要一致-->
<h2 id="subt" >海纳百川</h2>
<script>
//声明一个数组,内容为你想显示的话
var words = [
"愿你遇良人,予你欢喜城",
"你是我千种诗意万种想象",
"想做一个很酷的人扭头就走 比你酷比你狠",
"对不起,也许我将要打扰你,打扰你一生,而不是一下",
"balabala......"
];
//使用自调用方式声明函数,
(function(){
//创建0到words元素个数大小减一的随机数
var rand = parseInt(Math.random() * words.length);
/*
*使用内联显示方式改变原签名,getElementById("subt")表示搜索*id="subt"的*HTML标签元素,
*/
document.getElementById("subt").innerHTML = words[rand];
console.log(words[rand]);//控制台调试信息,可以删掉
};)()
</script>
</div>
hexo博客系统
其他blog系统自行参考,hexo每次generate都会删掉原来的HTML文档,由所使用主题内的jade代码重新解释生成,直接修改待发布的HTML文档不是长久之计,因此得先找到解释出签名标签的源代码。我使用某大神的BlueLake主题(表示感谢),解释出签名标签的代码为/home/hch/hexo/themes/BlueLake/layout/base.jade
里面的
p.description= config.subtitle //这里的config.subtitle为全局文本“海纳百川”
它对应的HTML代码:
<p class="description">海纳百川</p>
修改为:
h2(id= "subt").description= config.subtitle //标签由p改为h2,添加id属性
script(type='text/javascript', src=url_for(theme.js) + '/word.js',async)//此处src链接到写好的JavaScript代码
这样解释出的HTML代码就变为
<h2 id="subt" class="description">海纳百川</h2>
<script type="text/javascript" src="/js/word.js" async></script>
顺手记个js闭包实现计数原理
var add = (function()...)
自调用函数实际上只执行了一次- 第一次执行后,变量add为字符串
"function () {return counter += 1;}"
- 在
myFunction()
中调用了add() (add后面有括号表示调用函数而不是输出函数内容):
var add = (function () {
var counter = 0; //第一次执行被初始化为0
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
番外
为了这一个小功能,刚看了几天Python后懵懂无知的我去学了Django和MySQL,还初步实现了数据库模型。正当我风风火火的开始学JavaScript打算用来在服务器与web页面传输数据时,让我悔恨终生的事就这么愉快地发生了…emmmm…