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 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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程序员编程注意事项
2008/04/10 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
理解javascript封装
2016/02/23 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python查看数据类型的方法
2019/10/12 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
使用Python构造hive insert语句说明
2020/06/06 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
计算机大学生的自我评价
2013/10/15 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
营业员实习自我鉴定
2013/12/07 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
社会公德演讲稿
2014/05/20 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
六一晚会主持词开场白
2015/05/28 职场文书