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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 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
PHP mkdir()定义和用法
2009/01/14 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Python字符串处理实例详解
2017/05/18 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python实现名片管理系统
2020/02/14 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
班队活动设计方案
2014/01/30 职场文书
作弊检讨书1000字
2014/02/01 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
vue elementUI表格控制对应列
2022/04/13 Vue.js
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android