用javascript寫了一個模擬閱讀小說的程序

時間 2019-11-13

標籤 javascript 寫了一個模擬閱讀程序欄目 JavaScript 简体版

原文原文鏈接

<html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <head>
        <title></title> 
<script type="text/javascript">  
function Reader(content, cID, stopID, continueID) {
    this.conLoad = document.getElementById(cID);
    this.stopBtn = document.getElementById(stopID);
    this.continueBtn = document.getElementById(continueID);
    this.content = content;
    this.index = 0;
    var t = this;
    this.stopBtn.onclick = (
        function () {
        return function () {
            t.stopReader(t);
        };
    })(t);
    this.continueBtn.onclick = (
        function () {
        return function () {
            t.continueReader(t);
        };
    })(t);
}
Reader.prototype = {
    startReader : function () {
        var t = this;
        t.toId = setInterval(function () {
                if (t.content[t.index]) {
                    t.conLoad.innerHTML += t.content[t.index];
                }
                t.index++;
                if (t.content.length == t.index) {
                    clearInterval(t.toId);
                    t.conLoad.innerHTML += "【未完待續】";
                }
            }, 200);
    },
    stopReader : function (t) {
        t.flag = true;
        clearInterval(t.toId);
    },
    continueReader : function (t) {
        if (t.flag)
            t.startReader();
        t.flag = false;
    }
};
var content = "蒙古親王僧格林沁慓悍勇猛，他率領的軍隊向來號稱能征慣戰，八旗兵、綠營他都看不上眼，更況且那些臨時招募的練勇。可恰恰就是這些他眼中的烏合之衆，這些年來在江南戰果累累，最終攻下了江寧，奪得了對太平軍做戰的全勝。" +
    "相反地，他的蒙古鐵騎在與捻軍的角逐中經常戰勝仗，相形之下，昔日的聲威銳減。這個一代天驕的後裔，對曾氏兄弟和湘軍窩着一肚皮無名怒火。" +
    　　 "湘軍進江寧後，打劫財富，屠城縱火，又放走幼天王，朝野謗讟四起，物議沸騰，僧格林沁聽了十分得意，趕忙打發富明阿以視察滿城爲由，去江寧實地瞭解。誰料曾國荃一嚇一賄征服了富明阿，江寧將軍回去後向僧格林沁做了假彙報。";
//頁面加載完成以後執行。
window.onload = function () {
    new Reader(content, "content", "btnStop", "btnContinue").startReader();
};
</script>         
<body>         
   <div id='content'></div>
   <div id='operate'><input type='button' id='btnStop' value='stop'/><input type='button' id='btnContinue' value='continue'/></div>
</body>  

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。