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 相关文章推荐
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
浅谈js中对象的使用
Aug 11 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
什么是python的必选参数
2020/06/21 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
晨会主持词
2014/03/17 职场文书
运输服务质量承诺书
2014/03/27 职场文书
技能比武方案
2014/05/21 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
合作意向协议书
2015/01/29 职场文书
个人委托函范文
2015/01/29 职场文书
鲁迅故里导游词
2015/02/05 职场文书
检讨书格式
2015/05/07 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
优质护理心得体会
2016/01/22 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS