仿慕课网页面制作

本次项目是制作仿慕课网imooc的静态页面制作，记录所用到的知识。

首页

登录验证

我这里使用了html5的表单验证，input标签里有一个属性pattern可以验证是否匹配对应的正则表达式：

<form action="">
    <div class="zh">
        <div class="inputItem">
            <input type="text" required pattern="^\d{11}$|^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" id='emailPhoneNum' class="form-control loginput" placeholder="请输入登录手机号/邮箱" style='padding-left: 20px;'>
            <p class='validity'>请输入正确的邮箱或手机号</p>
        </div>
        <div class="inputItem">
            <input type="password" required pattern="^\S{8,20}$" id="psw1" class="form-control loginput yzminput pswInput" placeholder="请输入密码">
            <a href="" class='iconfont icon-yanjing-guan getMa see'></a>
            <p class='validity'>请输入8-20位密码，区分大小写，不能使用空格！</p>
        </div>
        <div class="inputItem autoLG">
            <label for="autoLogin" class='autoLogin'>
                <input type="checkbox" name="" class="autoLogin1">7天内自动登录</label>
            <a href="">找回账号</a>
        </div>
        <div class="inputItem">
            <input type="submit" value="登录" id='loginBtn1' class='loginBtn' />
        </div>
    </div>
</form>

js也可以监听pattern是否匹配：

// 表单验证
function validityFun(obj, tips) {
   
    // 验证邮箱或手机号
    if (obj.validity.valueMissing || obj.validity.patternMismatch) {
   
        tips.style.visibility = 'visible';
        obj.setCustomValidity('')
    } else {
   
        tips.style.visibility = 'hidden ';
    }
}

let emailPhoneNum = document.querySelector("#emailPhoneNum")
let psw1 = document.querySelector('#psw1')
let pList = document.querySelectorAll('.zh>.inputItem>p')

emailPhoneNum.onblur = function (e) {
   
    e.preventDefault()
    // 验证邮箱或手机号
    validityFun(emailPhoneNum, pList[0])
}
psw1.onblur = function (e) {
   
    e.preventDefault()
    // 验证密码
    validityFun(psw1, pList[1])
}

顺便说一下，css也有两个伪元素配合pattern使用(:valid、:invalid)
输入不是两位小数时变红边框，否则为灰色边框：

<input type='text' id='money' placeholder='请输入金额' required pattern='^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$' />

//css input:valid {
   
    border: 1px solid #ccc;
    outline: 1px solid #ccc;
}
input:invalid {
   
    border: 1px solid red;
    outline: 1px solid red;
}

轮播图实现

此处轮播图为渐变轮播图，注意此处轮播图变化时背景颜色也会变化，背景颜色为渐变色。
渐变轮播图通过js设置定时器，改变标签的opacity属性即可实现。此处的图片实际是a标签的背景图，渐变背景是设置a标签的css实现的，颜色渐变背景使用的是background-image:linear-gradient
轮播图js代码：

let imgs = document.querySelectorAll('.imgBox')
let dots = document.querySelectorAll('.dotList>li')
// 此函数不能传递index值，传递的值为固定值，出错
function nextPic() {
   
    for (let i = 0; i < imgs.length; i++) {
   
        imgs[i].style.opacity = 0;
        dots[i].classList.remove('currentDot')
    }
    index++
    if (index == 6) {
   
        index = 0
    }
    imgs[index].style.opacity = 1;
    dots[index].classList.add('currentDot')
}

function prev() {
   
    for (let i = 0; i < imgs.length; i++) {
   
        imgs[i].style.opacity = 0;
        dots[i].classList.remove('currentDot')
    }
    index--
    if (index == -1) {
   
        index = 5
    }
    imgs[index].style.opacity = 1;
    dots[index].classList.add('currentDot')
}

let timer = null
let index = 0
timer = setInterval(function () {
   
    nextPic()
}, 1000)

let rightImg = document.querySelector('.rightImg')

rightImg.onmouseover = function () {
   
    clearInterval(timer)
}
rightImg.onmouseout = function () {
   
    timer = setInterval(function () {
   
        nextPic()
    }, 1000)
}

let leftBtn = document.querySelector('.leftBtn')
leftBtn.onclick = function () {
   
    prev()
}
let rightBtn = document.querySelector('.rightBtn')
rightBtn.onclick = function () {
   
    nextPic()
}

// 点击下方小点事件
for (let i = 0; i < dots.length; i++) {
   
    dots[i].index = i;
}
for (let i = 0; i < dots.length; i++) {
   
    dots[i].onclick = function () {
   
        for (let i = 0; i < imgs.length; i++) {
   
            imgs[i].style.opacity = 0;
            dots[i].classList.remove('currentDot')
        }
        index = this.index
        imgs[index].style.opacity = 1;
        dots[index].classList.add('currentDot')
    }
}

轮播图CSS代码，需要定位轮播图位置以及调整背景图片的位置background-image:linear-gradient

.bgImg{
   
    position: absolute;
    width: 100%;
    top: 0;
    z-index: -1;
}

.imgBox{
   
    width: 100%;
    position: absolute;
    transition: all 0.8s;
}

.imgBox>a{
   
    display: block;
    height: 412px;
    width: 100%;
}

.imgBox:nth-child(1)>a{
   
    background: url(../img/1.jpg) no-repeat 627px 30px, linear-gradient(to bottom, #ff9105, #fff 50%);
    background-size: 900px 415px;
}

.imgBox:nth-child(2)>a{
   
    background: url(../img/2.jpg) no-repeat 627px 30px, linear-gradient(to bottom, #daf1f8, #fff 50%);
    background-size: 900px 415px;
}

.imgBox:nth-child(3)>a{
   
    background: url(../img/3.jpg) no-repeat 627px 30px, linear-gradient(to bottom, #f6a503, #fff 50%);
    background-size: 900px 415px;
}
...

返回顶部及向下滑动显示导航

这里都涉及到一个知识点——文档向上移出的距离scrollTop

导航栏点击时使用设置锚点可以跳转到页面的具***置，下方是导航栏自动切换代码:

// 返回顶部按钮
let toTop = document.querySelector('.toTop')
// 卷出距离
let y

// 左边颜色更换
let leftAsideItem = document.querySelectorAll('.leftAside>ul>li>a')
window.onscroll = function () {
   
    y = document.documentElement.scrollTop || document.body.scrollTop
    // 显示和隐藏返回顶部按钮
    if (y >= 800) {
   
        toTop.style.display = 'block'
    } else {
   
        toTop.style.display = 'none'
    }
	// 此处可以使用console.log(y)的方法测试每个节点时的scroolTop值，然后在下方使用
    if (y >= 2750) {
   
        clearActive(leftAsideItem, 'activeA')
        leftAsideItem[4].classList.add('activeA')
    } else if (y >= 2500) {
   
        clearActive(leftAsideItem, 'activeA')
        leftAsideItem[3].classList.add('activeA')
    } else if (y >= 2000) {
   
        clearActive(leftAsideItem, 'activeA')
        leftAsideItem[2].classList.add('activeA')
    } else if (y >= 1300) {
   
        clearActive(leftAsideItem, 'activeA')
        leftAsideItem[1].classList.add('activeA')
    } else if (y >= 600) {
   
        clearActive(leftAsideItem, 'activeA')
        leftAsideItem[0].classList.add('activeA')
    }
}

返回顶部的按钮如果设置为锚点或直接设置为srollTop = 0都会导致页面直接切换，用户体验不好，使用js的定时器控制间隔向上滚动一定距离即可实现缓慢返回顶部：

// 缓慢返回顶部
let timer1 = null
toTop.onclick = function () {
   
    timer1 = setInterval(function () {
   
        if (y == 0) {
   
            clearInterval(timer1)
        }
        document.documentElement.scrollTop = Math.floor(y - 200)
    }, 20)
}