Javascript to write a simulation of reading a novel

  • 2020-03-30 02:35:14
  • OfStack

 
<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 += " 【 to be continued 】 "; 
} 
}, 200); 
}, 
stopReader : function (t) { 
t.flag = true; 
clearInterval(t.toId); 
}, 
continueReader : function (t) { 
if (t.flag) 
t.startReader(); 
t.flag = false; 
} 
}; 
var content = " The Mongolian prince monk qingqinhang is fierce and fierce. The army he led has always been known to be capable of fighting in battle. But it is these in his eyes of the rabble, these years in the jiangnan war fruitful, finally captured jiangning, won the victory of the taiping army. " + 
" On the contrary, his Mongol cuirass often lost the battle against the twisting army, and by contrast, its previous power was reduced. This generation of descendants of tianjiao, the zeng brothers and the hunan army nest a belly unknown anger. " + 
   " < / p > < p > xiang army into jiangning after the looting of wealth, city arson, and let go of the young king, abuse everywhere, the matter boiling, listen to the very proud, quickly sent fu Ming to inspect the city on the ground to jiangning. Who expected zeng guo-quan a scare a bribe to conquer the fu Ming, jiangning general back to the monks after the false report. "; 
//Execute after the page loads.
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> 

Related articles: