js实现自动阅读及停止功能。
本文介绍实现电子书自动阅读的功能，原理就是让滚动条一直下滚即可，停止时停止动画，switKey作为开关，防止多次点击自动阅读创建多个定时器。
html部分：
<!--自动阅读按钮-->
<div id="start" style="line-height:100px;text-align:center;right:50px;position: fixed;bottom: 400px;background: orange;width: 100px;height: 100px;color: #FFFFFF;font-size: 20px;font-weight: bold;border-radius:50%">自动翻页</div>
<div id="stop" style="line-height:100px;text-align:center;right:50px;position: fixed;bottom: 300px;background: blue;width: 100px;height: 100px;color: #FFFFFF;font-size: 20px;font-weight: bold;border-radius:50%">停止翻页</div>
js部分：
//自动阅读功能
var AutoPager = function(){
var obj = {
num : 10,
timesK : null,
start : $("#start"),
stop : $("#stop"),
switKey : true,
init : function(){
this.startClick();
this.stopClick();
},
Timer : function(){
if(this.switKey){
obj.timesK = setInterval(function(){
window.scrollBy(0,obj.num)
},100)
this.switKey = false;
}
},
clearTime : function(){
clearInterval(this.timesK);
this.switKey = true;
},
startClick : function(){
this.start.click(function(){
obj.Timer();
})
},
stopClick : function(){
this.stop.click(function(){
obj.clearTime();
})
}
}
return obj;
}
AutoPager().init()
有问题留言，我看到会第一时间回复。
昨天又优化了一下，去掉了开关，利用 null || true 返回true的原理，具体代码如下：
//自动阅读功能
var AutoPager = function(){
var obj = {
num : 10,
timesK : null,
start : $("#start"),
stop : $("#stop"),
init : function(){
this.startClick();
this.stopClick();
},
Timer : function(){
this.timesK = this.timesK || setInterval(function(){
window.scrollBy(0,obj.num)
},100)
},
clearTime : function(){
clearInterval(this.timesK);
this.timesK = null;
},
startClick : function(){
this.start.click(function(){
obj.Timer();
})
},
stopClick : function(){
this.stop.click(function(){
obj.clearTime();
})
}
}
return obj;
}
AutoPager().init()
js实现自动阅读及停止功能。相关推荐
- 五分钟没有操作自动退出_智阅云自动阅读器app下载-智阅云自动阅读器app安卓版下载v1.0...
智阅云自动阅读器是一款可以阅读赚钱的软件,这里有很多的文章,每天也都会有更新,在这里阅读文章赚钱还是比较靠谱的,大家可以放心. 智阅云自动阅读器app介绍 智阅云自动阅读器这里赚钱是比较简单的,还可以 ...
- 自动生成表格html,js实现自动生成表格功能的代码实例
js实现自动生成表格功能的代码实例 发布时间:2020-07-18 17:45:52 来源:亿速云 阅读:115 作者:小猪 这篇文章主要讲解了js实现自动生成表格功能的代码实例,内容清晰明了,对此有 ...
- Clipboard.js实现点击自动复制内容的功能
Clipboard.js实现点击自动复制内容的功能 点击非文本框,自动复制,代码如下 value:<spanid="bar"class="btn"data ...
- html段落自动删除,利用JS代码自动删除稿件的普通弹幕功能
事情的起因是在b站投稿了一个高级弹幕测试的视频(av9940487),但是由于b站的弹幕池机制是新的弹幕顶掉旧的弹幕,所以导致一些人发的高级弹幕很快就被顶掉了. 所以就想着写个脚本来自动删除属性为普通 ...
- Android 用Groovy实现扇贝阅读APP的自动阅读功能
动机 最近因为想要英语学习,特下载了「扇贝阅读」App,保证自己抽空能够提升一下自己的英语水平.这个App有一个功能,就是打卡功能,每天成功阅读完两篇英语短文,就能完成每日打卡,并领取一些奖励. 问题 ...
- html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
- 原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单 包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
- 【新】CSDN文章一键打印、输出PDF（自动阅读全文、全清爽模式）
版权声明:本文为丨匿名用户丨原创文章,转载请注明出处:[新]CSDN文章一键打印.输出PDF(自动阅读全文.全清爽模式)_丨晋丨-CSDN博客_csdn打印https://blog.csdn.net/ ...
- 亚丁号自动阅读第一次更新
老规矩APK地址:亚丁号自动阅读_v0.0.53登录版.apk - 蓝奏云 我的博客地址:亚丁号 源代码地址:亚丁号---文件下载 上次更新帖已经将薅羊毛改回亚丁号 故本次是亚丁号自动阅读第一次更新 ...
最新文章
- Git-如何将已存在的项目提交到git
- OpenShift 4之评估节点自消耗的系统资源
- jq中html(),text(),val()以及js中innerHTML,innerText和value
- linux中通用GPIO接口的操作
- html显示实时时间_珠海体育场LED显示屏实时播放比赛时间
- cvSlite 和cvMerge 实现图像的通道分离和混合的说明
- i5 6500 HD530 台式机黑苹果记录
- 解决java中使用getImage（）导入图片失败问题
- uniapp上传华为应用市场，您的应用提示获取手机存储敏感权限，用户不同意时强制退出应用
- 就是要弄懂你之—— 同步 异步 阻塞 非阻塞
- 可视为线性回归的曲线回归（R语言）
- 英语足球foteball运动
- Express框架与Ajax应用
- 素数筛线性筛详细详解（个人总结思路超长版）
- 【数据库笔记】高性能MySQL：chapter 5 创建高性能的索引
- 一对一培训之视频免费分享-2018-03-19-第 04 阶段-部署-基础-环境
- CRB开发-列表视图按钮添加
- 美国金融博士和经济学博士的区别
- SDH原理--3.开销和指针
- linux安装elasticsearch-head （es可视化界面）