window.scroll()、window.scrollTo()、window.scrollBy()、写一个小说的自动阅读功能

迷南。 2023-08-17 16:03 109阅读 0赞

###  让滚动条滚动           window.scroll(X,Y)：X代表着X轴滚动多少px，Y代表着Y轴滚动多少，px假如是Y方向滚动100px，window.scroll(0,100)。这个window.scrollTo()方法和 window.scroll()方法一样的。 ###

###      window.scrollBy(X,Y)方法,这个scrollBy()方法和上面的这两个方法的不同之处在于会累加，例如window.scrollBy(0,100)，下次继续调用window.scrollBy(0,100)会累加起来，位置移动到200的地方 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            .start, .stop {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                font-size: 20px;
                font-weight: bold;
                text-align: center;
                line-height: 70px;
            }
    
            .start {
                background-color: green;
                position: fixed;
                right: 0;
                top: 200px;
    
            }
    
            .stop {
                background-color: red;
                position: fixed;
                right: 0;
                top: 300px;
            }
        </style>
    </head>
    
    <body>
    <div>
        2 绝境中求生存
        3 善于从失败中崛起
        4 学习更多的生存技巧
        5 精力集中于捕猎目标
        第三章 优胜劣汰，能者为王
        1 树立绝对的竞争意识
        2 敢于战斗的生命哲学
        3 狼子野心的坚定信念
        4 靠忍耐随时等待机会
        5 为实现目标不断变化策略
        6 授狼以渔的王者风范
        7 集团作战，以弱胜强
        8 随时策划下一步，为成功做准备
        9 注重细节，找准切入，善于隐蔽
        10 把个体劣势转为群体优势
        第四章 强者精神，主宰自己
        1 对集体讲究忠诚与奉献
        2 对领导与分派绝对服从
        3 自觉维护组织严密的团队
        4 满足自身角色，完善团队合作
        5 懂得对意外帮助感恩图报
        6 决不窝里斗，具有自律精神
        7 善于交流沟通，达到协同作战
        8 为了团队的利益勇于自我牺牲
        第二编 个人平凡到卓越的狼道脱颖而出的竞争法则
        第一章 拥有狼一样的强者心态
        第二章 拥有狼一样的坚强个性
        第三章 像狼一样积极思考
        第四章 像狼一样主动行动
        第三编 组织分工与协作的狼道团队精神的终极哲学
        第一章 狼性团结
        第二章 狼性纪律
        第三章 狼性沟通
        第四章 狼性忠诚
        第四编 企业生存与竞争的狼道发展壮大的至高战略
        第一章 打造狼性企业
        第二章 当好领头狼
        第三章 企业狼阵策略
        参考资料
        1. 狼道全集 ．豆瓣读书[引用日期2018-10-15]
        词条标签：
        出版物 ， 书籍
    
        狼道全集图册
        V百科往期回顾
    
        词条统计
        浏览次数：510226次
        编辑次数：10次历史版本
        最近更新：729311778（2019-01-04）
        突出贡献榜
        东猊 创建版本
        1 内容简介
        2 图书目录
    
        搜索发现
        狼道全集 exe线上真人雅思报名激光祛胎记多少钱直播系统真人网络游戏真人游戏煮粥能祛斑吗1万以下二手车同桌100学习网免费
    
        2 绝境中求生存
        3 善于从失败中崛起
        4 学习更多的生存技巧
        5 精力集中于捕猎目标
        第三章 优胜劣汰，能者为王
        1 树立绝对的竞争意识
        2 敢于战斗的生命哲学
        3 狼子野心的坚定信念
        4 靠忍耐随时等待机会
        5 为实现目标不断变化策略
        6 授狼以渔的王者风范
        7 集团作战，以弱胜强
        8 随时策划下一步，为成功做准备
        9 注重细节，找准切入，善于隐蔽
        10 把个体劣势转为群体优势
        第四章 强者精神，主宰自己
        1 对集体讲究忠诚与奉献
        2 对领导与分派绝对服从
        3 自觉维护组织严密的团队
        4 满足自身角色，完善团队合作
        5 懂得对意外帮助感恩图报
        6 决不窝里斗，具有自律精神
        7 善于交流沟通，达到协同作战
        8 为了团队的利益勇于自我牺牲
        第二编 个人平凡到卓越的狼道脱颖而出的竞争法则
        第一章 拥有狼一样的强者心态
        第二章 拥有狼一样的坚强个性
        第三章 像狼一样积极思考
        第四章 像狼一样主动行动
        第三编 组织分工与协作的狼道团队精神的终极哲学
        第一章 狼性团结
        第二章 狼性纪律
        第三章 狼性沟通
        第四章 狼性忠诚
        第四编 企业生存与竞争的狼道发展壮大的至高战略
        第一章 打造狼性企业
        第二章 当好领头狼
        第三章 企业狼阵策略
        参考资料
        1. 狼道全集 ．豆瓣读书[引用日期2018-10-15]
        词条标签：
        出版物 ， 书籍
    
        狼道全集图册
        V百科往期回顾
    
        词条统计
        浏览次数：510226次
        编辑次数：10次历史版本
        最近更新：729311778（2019-01-04）
        突出贡献榜
        东猊 创建版本
        1 内容简介
        2 图书目录
    
        搜索发现
        狼道全集 exe线上真人雅思报名激光祛胎记多少钱直播系统真人网络游戏真人游戏煮粥能祛斑吗1万以下二手车同桌100学习网免费
    
        2 绝境中求生存
        3 善于从失败中崛起
        4 学习更多的生存技巧
        5 精力集中于捕猎目标
        第三章 优胜劣汰，能者为王
        1 树立绝对的竞争意识
        2 敢于战斗的生命哲学
        3 狼子野心的坚定信念
        4 靠忍耐随时等待机会
        5 为实现目标不断变化策略
        6 授狼以渔的王者风范
        7 集团作战，以弱胜强
        8 随时策划下一步，为成功做准备
        9 注重细节，找准切入，善于隐蔽
        10 把个体劣势转为群体优势
        第四章 强者精神，主宰自己
        1 对集体讲究忠诚与奉献
        2 对领导与分派绝对服从
        3 自觉维护组织严密的团队
        4 满足自身角色，完善团队合作
        5 懂得对意外帮助感恩图报
        6 决不窝里斗，具有自律精神
        7 善于交流沟通，达到协同作战
        8 为了团队的利益勇于自我牺牲
        第二编 个人平凡到卓越的狼道脱颖而出的竞争法则
        第一章 拥有狼一样的强者心态
        第二章 拥有狼一样的坚强个性
        第三章 像狼一样积极思考
        第四章 像狼一样主动行动
        第三编 组织分工与协作的狼道团队精神的终极哲学
        第一章 狼性团结
        第二章 狼性纪律
        第三章 狼性沟通
        第四章 狼性忠诚
        第四编 企业生存与竞争的狼道发展壮大的至高战略
        第一章 打造狼性企业
        第二章 当好领头狼
        第三章 企业狼阵策略
        参考资料
        1. 狼道全集 ．豆瓣读书[引用日期2018-10-15]
        词条标签：
        出版物 ， 书籍
    
        狼道全集图册
        V百科往期回顾
    
        词条统计
        浏览次数：510226次
        编辑次数：10次历史版本
        最近更新：729311778（2019-01-04）
        突出贡献榜
        东猊 创建版本
        1 内容简介
        2 图书目录
    
        搜索发现
        狼道全集 exe线上真人雅思报名激光祛胎记多少钱直播系统真人网络游戏真人游戏煮粥能祛斑吗1万以下二手车同桌100学习网免费
    </div>
    <div class="start">start</div>
    <div class="stop">stop</div>
    </body>
    
    <script>
        /*
        让滚动条滚动
             window.scroll(X,Y)：X代表着X轴滚动多少px，Y代表着Y轴滚动多少px
             假如是Y方向滚动100px，window.scroll(0,100)。
             这个window.scrollTo()方法和 window.scroll()方法一样的。
    
             window.scrollBy(X,Y)方法,这个scrollBy()方法和上面的这两个方法的不同
             之处在于会累加，例如window.scrollBy(0,100)，下次继续调用window.scrollBy(0,100)
             会累加起来，位置移动到200的地方
         */
        //通过上面的方法，可以写一个小说的自动阅读功能
        const start = document.getElementsByClassName('start')[0];
        const stop = document.getElementsByClassName('stop')[0];
        let [times, key] = [null, true];
        start.onclick = () => {
            if (key) {
                times = setInterval(() => {
                    window.scrollBy(0, 10)
                }, 100);
                key = false;//注意这里的key是为了防止反复点这个start，而导致加速的这个状态，stop停止不了
            }
    
        };
        stop.onclick = () => {
            clearInterval(times);
            key = true
        }
    
    
    </script>
    </html>