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 相关文章推荐
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
全面分析JavaScript 继承
May 30 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
vue-router 中 meta的用法详解
Nov 01 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
其他功能
2006/10/09 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
教大家使用Python SqlAlchemy
2016/02/12 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python如何爬取动态网站
2020/09/09 Python
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
葬礼司仪主持词
2014/03/31 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书