Web頁面顯示隨機簽名

介紹插入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…