2020_06-23 借原型的方法&巧妙的封装多次使用且代码较长的方法&进度条&播放器的控制&没有进度条的翻页效果

1.借用原型上的方法

function makestr() {
    let code = Array.prototype.shift.call(arguments);
    return Array.prototype.join.call(arguments, code);
}//将类数组利用数组的join方法，以code的形式 进行拼接

2.巧妙的封装多次使用且代码较长的方法

//这是一个值得养成的好习惯，将一些使用频率较高，且重复的代码量较长的模块进行封装处理
//$也可以作为变量的名字

3.进度条

window.onscroll = function () {
            let percent = Math.floor(document.documentElement.scrollTop) / (document.body.offsetHeight - window.innerHeight) * 100 + "%";
            //进度条的百分比=滚动条的高度/（整个body的高度-window的可视化高度）
            //滚动条的高度=>被滚动条翻上去隐藏的区域的高度
            //window的可视化高度=>即当前能够看到的页面的高度
        document.querySelector(".scroll").style.width = percent;//将百分比赋给自定义的进度条
        }

4.播放器的控制

music.oncanplay=()=>{}//音乐加载完毕可以执行的函数
music.play();//当没有controller的时候可以利用play控制音乐的播放
music.pause();//控制音乐的暂停

5.没有进度条的翻页效果

css

//控制每个页面都是100vw和100vh
<style>
        * {
            margin: 0;
            padding: 0;
        }
//hidden进度条
        body {
            height: 100vh;
            overflow: hidden;
        }

        .contain div {
            width: 100vw;
            height: 100vh;

        }
    </style>

html

<div class="contain">
        <div style="background-color: aqua;"></div>
        <div style="background-color: red;"></div>
        <div style="background-color: orange;"></div>
        <div style="background-color: yellow;"></div>
        <div style="background-color: blue;"></div>
    </div>

js

<script>
        let i = 0;
        let contain = document.querySelector(".contain");
        let endtime = new Date();
        //onmousewheel鼠标的滚轮事件
        window.onmousewheel = function (event) {
            let nowtime = new Date();//控制一定时间内多次滑动滚轮算作一次
            //滚轮无效则返回，不进行下面的代码的操作
            if (nowtime - endtime < 500) return console.log("忽略");
            //event.wheelDeltaY<0是往下滑动，event.wheelDeltaY>0是网上滑动
            if (event.wheelDeltaY < 0) {
                if (i === 4) return;
                i++;
            } else {
                if (i === 0) return;
                i--;
            }
            //控制每次滚轮有效的滑动，页面进行相应的反方向翻页
            contain.style.transform = `translateY(-${i*100}vh)`
            endtime = new Date();//控制最后一次有效的滚轮事件的
        }
    </script>