javascript写的一个模拟阅读小说的程序

 更新时间:2014年04月04日 11:14:14   作者:  
这篇文章主要介绍了用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>

相关文章

  • js+html5实现半透明遮罩层弹框效果

    js+html5实现半透明遮罩层弹框效果

    这篇文章主要为大家详细介绍了js+html5实现半透明遮罩层弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • KnockoutJS 3.X API 第四章之数据控制流foreach绑定

    KnockoutJS 3.X API 第四章之数据控制流foreach绑定

    这篇文章主要介绍了KnockoutJS 3.X API 第四章之数据控制流foreach绑定的相关资料,需要的朋友可以参考下
    2016-10-10
  • asp错误 '80040e21' 多步 OLE DB 操作产生错误

    asp错误 '80040e21' 多步 OLE DB&nbs

    今天在写asp入库操作的时候提示Microsoft OLE DB Provider for ODBC Drivers 错误 80040e21 多步 OLE DB 操作产生错误,请检查每个 OLE DB 状态值,经测试时函数定义文件没有加载导致类型不对,所以无法入库
    2023-05-05
  • 微信小程序组件化开发的示例介绍

    微信小程序组件化开发的示例介绍

    虽然小程序在刚推出时是不支持组件化的,但如今小程序开始支持自定义组件开发,下面这篇文章主要给大家介绍了关于微信小程序组件化开发的相关资料,需要的朋友可以参考下
    2023-03-03
  • 分析js闭包引起的事件注册问题

    分析js闭包引起的事件注册问题

    这篇文章主要为大家分析了js闭包引起的事件注册问题,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 改变隐藏的input中value的值代码

    改变隐藏的input中value的值代码

    本文为大家介绍下如何改变隐藏的input中value的值,一句代码就可以实现,感性的朋友可以参考下
    2013-12-12
  • 问题解析有JSDoc还需要TypeScript吗

    问题解析有JSDoc还需要TypeScript吗

    这篇文章主要介绍了有JSDoc还需要TypeScript的问题示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • Immutable 在 JavaScript 中的应用

    Immutable 在 JavaScript 中的应用

    在 JavaScript 中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为 Mutable,中文的字面意思是「可变」
    2016-05-05
  • Bootstrap学习笔记之css组件(3)

    Bootstrap学习笔记之css组件(3)

    这篇文章主要为大家详细介绍了bootstrap学习笔记中的css组件,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 微信小程序如何获取图片宽度与高度

    微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03

最新评论