优学网项目简介
一、首页
(一) 、轮播图模块
1、图片轮播–定时器
- 通过ajax请求图片json数据， JSON.parse()将获取的数据转成js格式数据
- 获取每一张图片、每一个小圆点–for循环
- 初始化页面样式，将图片数据添加进 ul，将小圆点span加入p
- 设置lunBoUl的宽度=图片宽度*图片张数
- 轮播图–每隔一段时间切换图片，当到最后一张后返回第一张
//轮播图--每隔一段时间切换图片，当到最后一张后返回第一张
var n = 0; //下标变量存储当前是第几张图片,第一张图片下标为0
var timer = setInterval(function () {
n++;
//ul left移动
//第一张图 0 0*1317
// 二张 1 -1*1317
// 三张图 2 -2*1317
//图片数组arr,为实现无缝轮播再添加一个第一张图片，最后一张图=第一张图
if (n >= arr.length + 1) {
n = 0;
lunBoUl.style.left = 0;
}
jsKu.move(lunBoUl, 'left', 60, -n * 1317); //lunBoUl为要移动的元素，left移动改变的值,step每一步走多少像素,移动的最终位置
//遍历小圆点
for (var i = 0; i < lunBoSpans.length; i++) {
lunBoSpans[i].className = '';//小圆点初始样式设为空
}//再设置当前小圆点的样式
lunBoSpans[n == arr.length ? 0 : n].className = 'active';
}, 2000); //每隔2秒轮播一张图
}
2、鼠标滑入滑出事件
- 当鼠标移入div时，停止图片轮播，鼠标移出div，开启定时器图片轮播
- 设置定时器唯一标识符–用于清除定时器
//当鼠标移入div时，停止图片轮播，鼠标移出div，开启定时器图片轮播
lunBoDiv.onmouseenter = function () {
clearInterval(timer);//鼠标滑入-关闭定时器
}
lunBoDiv.onmouseleave = function () {
//鼠标滑出--开启图片轮播
timer = setInterval(function () {
n++;//无缝轮播：最后一张图与第一张图片相同
if (n >= arr.length + 1) {
n = 0;//若图片轮播到最后一张图时，让n为0回到第一张图
lunBoUl.style.left = 0;//图片ul的left值设为0
}
jsKu.move(lunBoUl, 'left', 60, -n * 1317);
//遍历小圆点
for (var i = 0; i < lunBoSpans.length; i++) {
lunBoSpans[i].className = '';//小圆点初始样式设为空
}//再设置当前小圆点的样式
lunBoSpans[n == arr.length ? 0 : n].className = 'active';
}, 2000); //每隔2秒轮播一张图
}
3、左右箭头事件
- 左箭头：点击左箭头显示上一张图片，第一张图片的上一张图片是最后一张图片
//左键头事件
lunBoButtons[0].onclick = function () {
n--;
if (n < 0) {
n = arr.length - 1; //arr.length=5第一张图片的上一张图片是最后一张图片
jsKu.move(lunBoUl, 'left', 130, -n * 1317);
}else {
jsKu.move(lunBoUl, 'left', 60, -n * 1317);
}
//遍历小圆点--排他处理--设置当前小圆点样式
for (var i = 0; i < lunBoSpans.length; i++) {
lunBoSpans[i].className = '';//小圆点初始样式设为空
}//再设置当前小圆点的样式
lunBoSpans[n == arr.length ? 0 : n].className = 'active';
}
- 右箭头：点击右箭头显示下一张图片，最后一张图片的下一张图片是第一张图片
//右箭头事件
lunBoButtons[1].onclick = function () {
n++;
if (n > arr.length - 1) {
//最后一张图片的下一张图片是第一张图片
n = 0; //arr.length=5第一张图片的上一张图片是最后一张图片
jsKu.move(lunBoUl, 'left', 130, -n * 1317);
} else {
jsKu.move(lunBoUl, 'left', 60, -n * 1317);
}
//遍历小圆点--排他处理--设置当前小圆点样式
for (var i = 0; i < lunBoSpans.length; i++) {
lunBoSpans[i].className = '';//小圆点初始样式设为空
}//再设置当前小圆点的样式
lunBoSpans[n == arr.length ? 0 : n].className = 'active';
}
4、小圆点点击事件
- 点击每个小圆点可对应显示图片
- 小圆点的样式设置要进行排它处理–即所有小圆点样式初始为空，再设置当前被点击的小圆点的样式
//小圆点事件
for (var i = 0; i < lunBoSpans.length; i++) {
lunBoSpans[i].index = i; //设置自定义属性用来存储每个小圆点的下标
lunBoSpans[i].onclick = function () {
for (var j = 0; j < lunBoSpans.length; j++) {
lunBoSpans[j].className = ''; //所有小圆点初始样式设为空
}
this.className = 'active';
jsKu.move(lunBoUl, 'left', 60, -this.index * 1317);
}
}
(二) 、热门直播模块
- ajax请求数据渲染右侧直播课程列表信息
- 点击直播列表左侧显示对应课程图片
- 当鼠标滑入右侧直播列表时改变样式–设置背景色+颜色变色
//热门直播ajax
var leftImg = document.getElementById('leftImg'); //左侧图片
var hotUl = document.getElementById('hotUl'); //右侧课程内容ul
jsKu.ajax({
'url': './data/hot.json',
'success': function (res) {
var arr = JSON.parse(res);
//2.1获取到每一个数组元素的值
var str = '';
for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);//{src: "./img/cont-1.jpg", name: "每日好课python+web", time: "2020-05-19 14:00:00"}
str += '<li class="clearfix"><div><span>' + arr[i].time + '</span></div><h6><a>' + arr[i].name + '</a></h6></li>';
}
//2.2初始化页面内容
hotUl.innerHTML = str; //将数据渲染进hotUl里
leftImg.innerHTML = '<img src="' + arr[0].src + '">';
//2.3点击当前内容设置选中样式
var lis = hotUl.getElementsByTagName('li'); //热门直播hotUl的子元素li
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onmouseenter = function () {
//点击当前样式-排他设置
for (var j = 0; j < lis.length; j++) {
lis[j].style.backgroundColor = 'white';
lis[j].getElementsByTagName('a')[0].className = '';
}
this.style.backgroundColor = '#ffefe8'; //选中li改变其背景色
this.getElementsByTagName('a')[0].className = 'active'; //li里的课程内容字体颜色变化
leftImg.innerHTML = '<img src="' + arr[this.index].src + '">';
}
}
}
});
(三) 、精品课程模块
- ajax请求数据获取课程信息数据
- 导航栏项选择显示对应课程信息
- 导航栏滑过每一项改变样式–颜色变色+红色下划线
//免费课程ajax
var select1Ul = document.getElementById('select1Ul'); //获取导航栏Ul
var select1Lis = select1Ul.getElementsByTagName('li'); //获取导航栏选择的每一项li
var lesson1Ul = document.getElementById('lesson1Ul'); //获取课程Ul
var lesson1Lis = document.getElementById('li'); //获取课程每一项li
jsKu.ajax({
'url': './data/lessonContent.json',
'success': function (res) {
var data = JSON.parse(res);
var freeLessonData = data.freeLesson;
console.log(freeLessonData); //获取到 免费课程 板块所有的数据,导航栏项-对应课程信息
//初始化页面内容--默认导航栏项第一个选择-第一个课程信息
var onlineSell = freeLessonData.onlineSell; //获取第一个课程数据--再渲染页面
var str = '';
//遍历每一项数据内容
for (var i = 0; i < onlineSell.length; i++) {
str += '<li><a><img src="' + onlineSell[i].img + '"></a><h6>' + onlineSell[i].title + '</h6><p>￥<span>' + onlineSell[i].price + '</span><i>' + onlineSell[i].time + '</i></p></li>';
}
//再将数据渲染进ul
lesson1Ul.innerHTML = str;
//初始化--导航栏第一项-样式设置
select1Lis[0].className = 'active';
//滑上导航栏每一项--for 显示对应课程内容
for (var j = 0; j < select1Lis.length; j++) {
select1Lis[j].index = j;
select1Lis[j].onmouseenter = function () {
//滑上导航项获取其课程名--拿到对应课程数据--遍历数据--渲染页面
var freeLessonContent = freeLessonData[this.getAttribute('tag')];
var str = '';
for (var c = 0; c < freeLessonContent.length; c++) {
str += '<li><a><img src="' + freeLessonContent[c].img + '"></a><h6>' + freeLessonContent[c].title + '</h6><p>￥<span>' + freeLessonContent[c].price + '</span><i>' + freeLessonContent[c].time + '</i></p></li>';
}
lesson1Ul.innerHTML = str;
//鼠标滑上导航栏项，对应改变样式
//排他
for (var li = 0; li < select1Lis.length; li++) {
select1Lis[li].className = '';
}
this.className = 'active';
}
}
}
});
二、登录注册页
(一) 、登录模块
- 登录表单验证，当账号和密码都输入正确跳转至首页，首页变成已登录状态–localStorage本地缓存判断
//登录账户和密码成功登录后-通过localStorage 判断用户是否登录
var unLogin = document.getElementById('unLogin');
var login = document.getElementById('login');
console.log(localStorage, unLogin, login);
if (localStorage.phone && localStorage.password) //如果本地缓存有值存在,则首页变成已登录状态-个人中心
{
login.style.display = 'block';
unLogin.style.display = 'none';
} else {
login.style.display = 'none';
unLogin.style.display = 'block';
}
- 手机号+密码（低中高等级）正则设置
//2、对用户输入值进行正则验证
//2.1 手机号正则
var phoneReg = /^1[3456789]\d{9}$/; //手机号以1开头,第二位数字为[3456789]中任意一个,剩下9位数随机
//2.2 密码正则(6-20位)
//① 简单密码： 纯数字 或 纯字母
var easy = /(^\d{6,20}$)|(^[a-zA-Z]{6,20}$)/;
//② 中级密码： 以字母开头且为数字和字母的组合->不能是纯数字和纯字母要排除->?!(正向否定预查)
var middle = /(?!^[a-zA-Z]{6,20}$)^[a-zA-Z][0-9a-zA-Z]{5,19}$/;
//③ 高级密码: 以字母开头 数字+字母+特殊字符的组合->排除纯数字纯字母纯特殊字符、只是数字和字母的组合、只是数字和特殊符号的组合
var hard = /(?!^[a-zA-Z]{6,20}$)(?!^[a-zA-Z][0-9a-zA-Z]{5,19}$)^[a-zA-Z][0-9a-zA-Z!@#$%&*()_+=';:,.~]{5,19}$/;
- 手机号和密码输入正确后 判断表单提交条件
loginForm.onsubmit = function () {
console.log(phone.value, password.value);
if (phoneReg.test(phone.value) == false) {
alert('手机号输入错误');
return false;
}
if (!easy.test(password.value) && !middle.test(password.value) && !hard.test(password.value)) {
alert('密码输入错误');
return false;
}
//账号 和 密码 输入正确后即可正确登录--跳转到首页
localStorage.phone=phone.value;//用本地缓存 存储用户输入的账号和密码值----用来判断用户是否登录
localStorage.password=password.value;
//跳转到首页
location.href='./index.html';
return false;//阻止点击按钮自动跳转
}
(二) 、注册模块
- 验证码–随机数函数封装
// 封装生成随机数代码函数
function getCode(str, length) {
//传参-str母字符串--length--要生成随机数的长度
var code = '';
for (var i = 0; i < length; i++) {
//生成6位随机数
var num = Math.floor(Math.random() * str.length) //生成0-字符长度个数----随机数--可对应字符串下标获取到元素
// console.log(str[num]); //获取生成的随机码
code += str[num];
}
return code; //将生成是随机数返回
}
- 对每一个注册表单遍历–进行正则验证
//遍历注册表单--每个表单-for--失去焦点onchange事件 就进行判断
//每一个表单输入是否正确--添加标记
//声明一个数组-存储状态-每个输入框是否输入正确
var arr = [];
for (var i = 0; i < inputs.length - 1; i++) {
//遍历所有表单--去除最后一个注册提交表单
arr.push(false); //标记初始未填写内容--都为false--for-每次遍历就添加一个false--表单验证对-改为true
console.log(arr);
inputs[i].index = i; //设置自定义属性--获取到每个表单下标值
inputs[i].onchange = function () {
//每个表单--不同正则验证
if (this.index == 0) {
//手机号--验证
if (phoneReg.test(this.value)) {
tips[0].innerHTML = '√';
tips[0].style.color = 'green';
arr[this.index] = true;
console.log(arr);
} else {
tips[0].innerHTML = '手机号输入错误';
}
} else if (this.index == 1) {
//密码--验证
if (easy.test(this.value)) {
//密码等级--低
tips[1].innerHTML = '密码等级-低';
tips[1].style.color = 'green';
arr[this.index] = true;
} else if (middle.test(this.value)) {
tips[1].innerHTML = '密码等级中等';
tips[1].style.color = 'green';
arr[this.index] = true;
} else if (hard.test(this.value)) {
tips[1].innerHTML = '密码等级-高';
tips[1].style.color = 'green';
arr[this.index] = true;
} else {
tips[1].innerHTML = '密码输入错误';
}
} else if (this.index == 2) {
//再次输入确认密码--与创建密码输入值要相同
if (this.value == inputs[this.index - 1].value) {
tips[2].innerHTML = '√';
tips[2].style.color = 'green';
arr[this.index] = true;
} else {
tips[2].innerHTML = '两次密码输入不一致';
tips[2].style.color = '#ff4a00';
}
} else if (this.index == 3) {
//邮箱验证
if (email.test(this.value)) {
tips[3].innerHTML = '√';
tips[3].style.color = 'green';
arr[this.index] = true;
} else {
tips[3].innerHTML = '邮箱输入错误';
}
} else {
if (this.value.toLowerCase() == newCode.toLowerCase()) {
codeTip.innerHTML = '√';
codeTip.style.color = 'green';
arr[this.index] = true;
} else {
codeTip.innerHTML = '验证码输入错误';
}
console.log(this.value);
}
}
}
3.注册表单全都填写正确–注册按钮提交条件判断
//点击注册按钮 提交用户信息事件
//用一个数组-存储状态-每个输入框是否输入正确
inputs[5].onclick = function () {
console.log(arr); //获取到每一个表单验证的状态--是否正确--遍历每个状态--全为true才能提交表单
for (var i = 0; i < arr.length; i++) {
if (arr[i] == false) {
alert('表单信息有错');
return false; //信息有错 阻止提交
}
}
//遍历表单转态--都对--注册页跳转至登录页
location.href = './login.html?1';
return false; // 不让它自动提交
}
三、视频播放页
(一) 、视频播放模块
1、视频设置
1.视频设置–当视频播放完毕之后–自动播放下一个视频
var n = 0; //设置n--对应播放列表li的下标---0 表示 第一个列表项-第一个视频
video.onended = function () {
n++;
video.src = playLis[n].getAttribute("_src"); //_src是自定义属性-在数据渲染时添加给li--便于获取到视频的地址
video.play(); //一个视频完--自动播放下一个视频
//当前播放列表项的样式设置
for (var j = 0; j < playLis.length; j++) {
playLis[j].className = "";
}
playLis[n].className = "active";
}
2、视频播放列表设置
- 播放列表设置–点击不同列表项–播放对应的视频–遍历li–for循环
for (var i = 0; i < playLis.length; i++) {
playLis[i].index = i; //自定义索引--标记每个li的下标
playLis[i].onclick = function () {
video.src = this.getAttribute("_src"); //li--对应--播放视频
video.play(); //点击播放列表--就自动播放视频
title.innerHTML = data[this.index].title; //点击不同li,课程描述也要相应改变
for (var j = 0; j < playLis.length; j++) {
playLis[j].className = "";
}
this.className = "active";
}
}
(二) 、学员评价模块
1、评价信息数据处理
- 评价信息过多一页展示不完–分页处理-一页显示5条数据
//对评价数据进行处理slice--共34条--一页显示5条数据--向上取整--会有7页数据
//第一页1 数据下标0 --0 - 4 0*5--1*5--第一页的末尾数据下标是第二页开头的起始下标
//第二页2 1 5 - 9 1*5--2*5 num*5,(num+1)*5
//第三页3 2 10- 14 2*5--3*5
//第四页4 3 15- 29 3*5--5*5
//初始化页面--学员评价总数34+第一个页0-4的5条评价数据+跳转页面的表单初始值为1+页码总数7
//初始化渲染页面--第一个页0-4的5条评价数据
var pageData = data.slice(0, 5); //得到数组形式数据
var num = 0; //声明num存储数组下标--对应页码的数据--初始值为0
commentSum.innerHTML = '学员评价数据总数(' + data.length + ')条'; //学员评价数据总数 34条
pageInp.value = num + 1; //页码表单值=当前分的数据页--初始值--第一页为1
var pageSum = Math.ceil(data.length / 5); //页码总数=34条评论数据/5每页数据 向上取整--共7页
pageSpan.innerHTML = pageSum; //页码总数7
2、按钮事件设置
- 确定按钮-用户输入页码-跳转显示相应页码数据
//点击确定--用户输入页码值-页面跳转相应页面
sure.onclick = function () {
//获取用户输入值--要跳转到哪一页
var userInp = pageInp.value; //data数组数据下标从0开始--->用户输入值至少从1开始
num = userInp - 1;
// pageData = data.slice(num * 5, (num + 1) * 5);
//判断用户输入值 <=0显示第一页数据 >=7显示第7页数据
if (num >= 0 && num <= Math.ceil(data.length / 5) - 1) {
getPageDate(num);//获取数据渲染页面函数
}else {
alert('当前页面数码输入错误');
}
}
- 上一页、下一页按钮事件
//点击上一页按钮--跳转页面数据--确定当前页面-在跳转对应页码数据
prev.onclick = function () {
num--;
if (num <= 0) {
num = 0;
}
pageInp.value = num + 1;
getPageDate(num);
}
//点击下一页按钮--跳转页面数据
next.onclick = function () {
num++;
if (num >= Math.ceil(data.length / 5)) {
num = Math.ceil(data.length / 5) - 1;
}
pageInp.value = num + 1;
getPageDate(num);
}