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>

相关文章

  • vue3中Element Plus全局组件配置中文的两种方案

    vue3中Element Plus全局组件配置中文的两种方案

    element-plus组件文字语言默认是英文,需要手动更改一下中文包 ,本文主要介绍了vue3中Element Plus全局组件配置中文的两种方案,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • Fetch超时设置与终止请求详解

    Fetch超时设置与终止请求详解

    这篇文章主要给大家介绍了关于Fetch超时设置与终止请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Fetch具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • js设置文本框中焦点位置在最后的示例代码(简单实用)

    js设置文本框中焦点位置在最后的示例代码(简单实用)

    本篇文章主要是对js设置文本框中焦点位置在最后的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 用JS在浏览器中创建下载文件

    用JS在浏览器中创建下载文件

    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等
    2014-03-03
  • JS正则表达式修饰符中multiline(/m)用法分析

    JS正则表达式修饰符中multiline(/m)用法分析

    这篇文章主要介绍了JS正则表达式修饰符中multiline(/m)用法,结合实例形式分析了JS正则中多行模式multiline的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • 浅谈Javascript中的12种DOM节点类型

    浅谈Javascript中的12种DOM节点类型

    DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model)。本文将主要说明DOM节点类型,有需要的可以参考借鉴。
    2016-08-08
  • uniapp路由uni-simple-router实例详解

    uniapp路由uni-simple-router实例详解

    uni-simple-router专为uniapp打造的路由器,和uniapp深度集成,这篇文章主要给大家介绍了关于uniapp路由uni-simple-router的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • javascript合并表格单元格实例代码

    javascript合并表格单元格实例代码

    这篇文章主要介绍了javascript合并表格单元格实例代码,在某些应用中需要动态的合并单元格,感兴趣的朋友可以参考一下
    2016-01-01
  • Jsonp 跨域的原理以及Jquery的解决方案

    Jsonp 跨域的原理以及Jquery的解决方案

    JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。
    2010-05-05
  • bootstrap Table服务端处理分页(后台是.net)

    bootstrap Table服务端处理分页(后台是.net)

    这篇文章主要为大家详细介绍了bootstrap Table服务端处理分页,后台是.net,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论