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


Posted in Javascript onApril 04, 2014
<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 = "蒙古亲王僧格林沁?G悍勇猛,他率领的军队向来号称能征惯战,八旗兵、绿营他都看不上眼,更何况那些临时招募的练勇。可偏偏就是这些他眼中的乌合之众,这些年来在江南战果累累,最终攻下了江宁,夺得了对太平军作战的全胜。" + 
"相反地,他的蒙古铁骑在与捻军的角逐中常常打败仗,相形之下,昔日的声威锐减。这个一代天骄的后裔,对曾氏兄弟和湘军窝着一肚皮无名怒火。" + 
 "湘军进江宁后,打劫财富,屠城纵火,又放走幼天王,朝野谤?四起,物议沸腾,僧格林沁听了十分得意,赶紧打发富明阿以视察满城为由,去江宁实地了解。谁料曾国荃一吓一贿征服了富明阿,江宁将军回去后向僧格林沁作了假汇报。"; 
//页面加载完成之后执行。 
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>
Javascript 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
JS实现拖动示例代码
Nov 01 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 #Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 #Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 #Javascript
javascript移出节点removeChild()使用介绍
Apr 03 #Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 #Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 #Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
php常用的工具开发整理
2019/09/26 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
pycharm修改file type方式
2019/11/19 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python定义一个Actor任务
2020/07/29 Python
学生自我鉴定范文
2013/10/04 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
小学生操行评语大全
2014/04/22 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书