原生JavaScript练习——自动阅读插件开发

最新推荐文章于 2024-05-15 15:15:50 发布

是行是行啊

最新推荐文章于 2024-05-15 15:15:50 发布

阅读量333

点赞数

分类专栏：原生JS学习案例

本文链接：https://blog.csdn.net/weixin_45655555/article/details/108856632

版权

原生JS学习案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

样式：

在这里插入图片描述

后头图标修改好了。

功能：

点击火箭返回页面顶部
点击头部返回页面顶部
点击按钮自动阅读

难点/注意点：

插件里头的this指向
_self.playBtn.style.backgroundImage = ‘url(./img/play.png)’
这个的路径是依据的和html文件位置来取的，不是js哦
存在的问题：边框叠加
绝对定位会让一个块级元素变成内联块级元素，所以一定要给它宽度（面试）
级联样式越长效率越低，寻找是从右往左（面试）
css最好是按顺序写！
display、position一定在上面
margin在W、H下面

一些常识：

/* 大部分浏览器默认的body外边距是多少？ 8px */

/* 选择器
用于布局的容器其实可以不加在前面的对控制没有影响
*/

/* 图片盒子 ▲
不一定需要知道它宽高具体多少
你只需要确定好它的高度，然后在reset.css里写 img{height:100%}就可以了
*/ (这样好像会存在浏览器兼容问题对好还是写那种确定好尺寸的)

/* 前端标准黑色 #424242 */

/* 背景是有缓存的 */

代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="list-hd">
        <h2>书籍列表</h2>
    </div>
    <div class="container">
        <ul class="bk-list">
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介。</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介。</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
            <li class="list-item">
                <a href="detail.html" class="item-lk">
                    <div class="bk-pic">
                        <img src="./img/1.jpg" alt="">
                    </div>
                    <div class="bk-info">
                        <h2>完美世界</h2>
                        <p class="intro">小说简介</p>
                        <P>更新时间：2038-9-29 12：21：43</P>
                    </div>
                </a>
            </li>
           
        </ul>
    </div>
    <a href="javascript:;" class="s-top-btn"></a>

    <script type="text/javascript" src="./js/utils.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/common.css" />

    <link rel="stylesheet" href="./css/detail.css" />
</head>
<body>
    <div class="list-hd">
        <h2>小说详情</h2>
    </div>
    <div class="container">
		这边放入小说内容就可
    </div>
    <a href="javascript:;" class=" round s-top-btn"></a>
    <a href="javascript:;" class=" round play-btn"></a>

    <script type="text/javascript" src="./js/utils.js"></script>
    <script type="text/javascript" src="./js/auto_reader.js"></script>
    <!-- 使用插件 -->
    <script type="text/javascript">
    var autoReader = new AutoReader({
        playBtn:document.getElementsByClassName('play-btn')[0],
        sTopBtn:document.getElementsByClassName('s-top-btn')[0]
        // 直接在这边写是可以的，不用在外边保存一个变量获取元素。因为你new了它就会执行一次的，这和性能没有任何关系
    })
    // autoReader.test();
    </script>
</body>
</html>

css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration: none;
	color: inherit;
}

/* 重置文本框 */

input,button{
	border: none;
	outline: none;
	outline-offset: 0;
}

/* 重置按钮 */

button{
	background: initial;
	padding: 0;
}

img{
	height: 100%;
}

div{
	box-sizing: border-box;
}

// common.css
.list-hd{
    position: fixed;
    top:0;
    left:0;
    z-index: 1;
    width: 100%;
    height: 44px;
    background-color: lightblue;
    color: #ffffff;
    line-height: 44px;
    text-align: center;
}

//index.css


.container{
    width: 100%;
    margin-top: 44px;
}

.bk-list .list-item{
    position: relative;
    height: 150px;
    border-bottom: 1px solid #ddd;
}

.bk-list .list-item .item-lk{
    display: block;
    height: 100%;
}

.bk-list .list-item .bk-pic{
    position: absolute;
    top: 0;;
    left: 0;
    height: 150px;
    padding: 10px;
    /* border: 1px solid #333; */
}

.bk-list .list-item .bk-info{
    height: 100%;
    margin-left: 118px;
    /* border: 1px solid #000000; */
}

.bk-list .list-item .bk-info h2,
.bk-list .list-item .bk-info p{
    margin-top: 15px;
}
.bk-list .list-item .bk-info .intro{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999999;
}

.s-top-btn{
    display: none;
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: url(../img/rocket.png) no-repeat 0 0/100%;
    border-radius: 50%;
    opacity: .6;
}

.s-top-btn:hover{
    opacity: 1;
}


// detail.css
.container{
    padding: 15px;
    line-height: 25px;
}

.round{
    display: none;
    position: fixed;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: .6;
}

.s-top-btn{
    bottom: 100px;
    background: url(../img/rocket.png) no-repeat 0 0/100% 100%;
    
}

.play-btn{
    display: block;
    bottom: 25px;
    background: orange url(../img/play.png) no-repeat 15px 15px/30px 30px;
}

.round:hover{
    opacity: 1;
}

index.js

// 1.滚动事件 
// 滚动的时候获取滚动条距离，如果是0的话就让它不显示。如果不是0就显示
//滚动的元素是window欸

// 2.点击火箭返回页面顶部

// 3.点击头部返回页面顶部





// 获取元素
var sTopBtn = document.getElementsByClassName('s-top-btn')[0],
    header = document.getElementsByClassName('list-hd')[0];



addEvents(window,'scroll',function(){
    // console.log('l');
    var sTop = getScrollOffset().top;
    sTop ? sTopBtn.style.display = 'block'
         : sTopBtn.style.display = 'none' ;
});

addEvents(sTopBtn,'click',function(){
    window.scrollTo(0,0);
});

addEvents(header,'click',function(){
    window.scrollTo(0,0);
});

auto_reader.js 插件形式

;(function(){
    var sHeight = getScrollSize().height,
        vHright = getViewportSize().height,
        playing = false,
        t = null;
    
    var AutoReader = function(opt){
        this.playBtn = opt.playBtn,
        this.sTopBtn = opt.sTopBtn
        var _self = this;

        // 首先我们要点击这个元素，所以添加点击事件
        // 点击回到顶部
        // 清除定时器，更改播放图标
        addEvents(this.sTopBtn,'click',function(){
            
            window.scrollTo(0,0);
            clearInterval(t);
                _self.playBtn.style.backgroundImage = 'url(./img/play.png)'
                playing = false;
        });
        // 滚动事件，判断火箭是否出现
        addEvents(window,'scroll',function(){
            // console.log(this);
            // 这是一个事件处理函数，谁调用事件处理函数 this就指向谁。所以这个的this指向window这个元素
            // 但是我们不想让它指向window 我们想让它指向构造函数
            _self.sTopBtnShow();
        });
        // 点击按钮播放/暂停
        addEvents(this.playBtn,'click',function(){
            
            _self.autoPlay(); 
            //测试this用的
            _self.test();
        });
    }
    // 插件的所有方法都在线构造函数的原型上
    AutoReader.prototype = {
        sTopBtnShow:function(){
            var that =this;
            // 这个方法的this是指向window，所以上面调用的时候要修改this指向
            var sTop = getScrollOffset().top,
                sTopBtn = this.sTopBtn;
                sTopBtn.style.display = sTop ?  'block' : 'none' ;
        },
        autoPlay:function(){
            var  sTop = getScrollOffset().top;

            // 如果到达了底部 结束函数
            if(sTop == (sHeight - vHright)){
                return;
                
            }    
            // 判断是否在播放
            if(!playing){
                t = setInterval(function(){

                // 要重新监听滚动距离！！
                var  sTop = getScrollOffset().top; 
                // 到达底部就结束自动播放，并清除定时器，修改播放标记
                if(sTop == (sHeight - vHright)){
                    console.log('2');
                    clearInterval(t);
                    _self.playBtn.style.backgroundImage = 'url(./img/play.png)';
                    playing = false;
                    
                }else{
                    window.scrollBy(0,1);
                    _self.playBtn.style.backgroundImage = 'url(./img/pause.png)';
                }
                    
                },1);
                playing = true;
            }else{
                // 暂停
                clearInterval(t);
                _self.playBtn.style.backgroundImage = 'url(./img/play.png)'
                playing = false;
            }
                 
            
            
        },
        test:function(){
            console.log(this);
        }
    }
    window.AutoReader = AutoReader;
})();

utils.js

// 滚动条滚动距离
function getScrollOffset(){
    if(window.pageXOffset){
        return {
            left:window.pageXOffset,
            top:window.pageYOffset
        }
    }else{
        return {
            left:document.body.scrollLeft + document.documentElement.scrollLeft,
            top:document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

// html文档的宽高
function getScrollSize(){
    if(document.body.scrollWidth){
        return {
            width:document.body.scrollWidth,
            height:document.body.scrollHeight
        }
    }else{
        return {
            width:document.documentElement.scrollWidth,
            height:document.documentElement.scrollHeight
        }
    }
}

// 获取可视窗口的宽高
function getViewportSize(){
    if(window.innerHeight){
        return {
            width:window.innerWidth,
            height:window.innerHeight
        }
    }else{
        if(document.compatMode === 'BackCompat'){
            return {
                width:document.body.clientWidth,
                height:document.body.clientHeight
            }
        }else{
            return {
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
    }
}

// 绑定事件处理函数
function addEvents(elem,type,fn){
    if(elem.addEventListener){
        elem.addEventListener(type,fn,false);  // 要返回吗，这个不用  
    }else if(elem.attachEvent){
        elem.attachEvent('on'+ type,function(){
            fn.call(elem);
        });
    }else{
        elem['on' + type] = fn;
    }
}

是行是行啊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript练习——自动阅读插件开发

/* 大部分浏览器默认的body外边距是多少？ 8px *//* 布局：在不用结构化标签的时候，外层一定要用div包裹*//*用于布局的容器其实可以不加在前面的对控制没有影响*//* 图片盒子不一定需要知道它宽高具体多少你只需要确定好它的高度，然后在reset.css里写 img{height:100%}就可以了*/...
复制链接

扫一扫