怎么用JavaScript写一个简单的小说阅读器

JavaScript024

怎么用JavaScript写一个简单的小说阅读器,第1张

<html>

<meta http-equiv="content-type" content="text/htmlcharset=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 = "蒙古亲王僧格林沁慓悍勇猛,他率领的军队向来号称能征惯战,八旗兵、绿营他都看不上眼,更何况那些临时招募的练勇。可偏偏就是这些他眼中的乌合之众,这些年来在江南战果累累,最终攻下了江宁,夺得了对太平军作战的全胜。" +

"相反地,他的蒙古铁骑在与捻军的角逐中常常打败仗,相形之下,昔日的声威锐减。这个一代天骄的后裔,对曾氏兄弟和湘军窝着一肚皮无名怒火。" +

"湘军进江宁后,打劫财富,屠城纵火,又放走幼天王,朝野谤讟四起,物议沸腾,僧格林沁听了十分得意,赶紧打发富明阿以视察满城为由,去江宁实地了解。谁料曾国荃一吓一贿征服了富明阿,江宁将军回去后向僧格林沁作了假汇报。"

//页面加载完成之后执行。

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>

可以。

详细说一下My Novel Reader。

首先,说一下支持的浏览器,基本上Chrome内核的浏览器都支持,像遨游6,360,QQ,Firfox,Edge 等浏览器。

然后,因为这个插件其实就是个脚本,你需要安装用户脚本管理器。你可以根据使用的浏览器来选择用户脚本管理器:

Chrome: Tampermonkey 或 Violentmonkey

Firefox: Greasemonkey、Tampermonkey或 Violentmonkey

Safari: Tampermonkey 或 Userscripts

Microsoft Edge: Tampermonkey

Opera: Tampermonkey或 Violentmonkey

Maxthon: Violentmonkey

Dolphin: Tampermonkey

UC: Tampermonkey

360:Tampermonkey或Violentmonkey

QQ:需要在开发模式下将安装Violentmonkey下载:https://nylmj.lanzoui.com/iMM26la957c 密码:1122

搜狗浏览器:Tampermonkey或Violentmonkey

AdGuard:(不需要额外软件)

最后,打开脚本网页:My Novel Reader,点击安装脚本,也可直接点击 https://github.com/ywzhaiqi/userscript/raw/master/scripts/MyNovelReader.user.js 安装

最后,说说使用方法:

脚本自身已包含很多小说网站,打开小说内容页后,页面右下角会出现阅读模式的图标,点击即可。脚本有过滤净化功能,还有部分屏蔽字、拼音还原功能。

当然,现在的小说站新的出的快,旧的死的也快,更新是来不急的,脚本自身也支持自己添加,方法:

Violentmonkey:

打开小说阅读器的代码,就是>的图标,然后在设置里边的@include 规则或者@match 规则里边加上网址代码(格式:*://www.daomubiji.com/*,前边的*是适配了http和https网站,后边的*是适配这个网站的所有页面),然后点保存关闭,再刷新页面,网页右下角会出现个阅读模式,点一下就可以进入阅读模式,如果你是大屏幕显示器,文章右边有空位,还可以点右上角的设置键,把行宽设置为你需要的数值,其它的也可以自定义设置。