html：（<div class="content"></div>中的代码实际会用数据库的数据）
<div class="classDetail">
<div class="left">
<!-- <video src="../video/movie.mp4" controls></video> -->
</div>
<div class="right">
<p class="top">
<span class="active">目录</span><span>讨论</span>
</p>
<div class="content active">
<!-- <div class="list">
<p class="title">第一章：公开课（含4期）</p>
<ul class="list">
<li class="active">
<span>第0节：化学的研究对象和研究方法</span>
<i class="iconfont icon-bofang"></i>
</li>
<li>
<span>第1节：化学的研究对象和研究方法</span>
<i class="iconfont icon-bofang"></i>
</li>
</ul>
</div> -->
</div>
<div class="content">
<!-- <textarea name="" cols="30" rows="10" maxlength="100" class="txt"></textarea>
<button class="push">发布</button>
<div class="scroll">
<ul class="comment">
<li>
<p>
<img src="../img/login/wx.png" alt="">
<span>哈哈哈哈哈</span>
<span>21:12</span>
</p>
<p>这是一个无营养的评价</p>
</li>
</ul>
</div> -->
</div>
</div>
</div>1.先从模拟数据库videoPlayData.js中引入数据，引入目录和讨论的内容。
videoPlayData.js:
var classList = [{
title: '第一章：公开课',
num: 4,
list: [
{src: "../video/movie1.mp4", classTime: "33:45", isStudy: true, name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00'},
{src: "../video/movie2.mp4", classTime: "33:45", isStudy: true, name: '第1节：离子反应', time: '2020.12.10 20：00'},
{src: "../video/movie3.mp4", classTime: "33:45", isStudy: false, name: '第2节：氧化还原反应', time: '2020.12.10 20：00'},
{src: "../video/movie4.mp4", classTime: "33:45", isStudy: false, name: '第3节：钠及其化合物', time: '2020.12.10 20：00'}
]
},{
title: '第二章：公开课',
num: 4,
list: [
{src: "../video/movie1.mp4", classTime: "33:45", isStudy: false, name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00'},
{src: "../video/movie2.mp4", classTime: "33:45", isStudy: false, name: '第1节：离子反应', time: '2020.12.10 20：00'},
{src: "../video/movie3.mp4", classTime: "33:45", isStudy: false, name: '第2节：氧化还原反应', time: '2020.12.10 20：00'},
{src: "../video/movie4.mp4", classTime: "33:45", isStudy: false, name: '第3节：钠及其化合物', time: '2020.12.10 20：00'}
]
},{
title: '第三章：公开课',
num: 4,
list: [
{src: "../video/movie1.mp4", classTime: "33:45", isStudy: false, name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00'},
{src: "../video/movie2.mp4", classTime: "33:45", isStudy: false, name: '第1节：离子反应', time: '2020.12.10 20：00'},
{src: "../video/movie3.mp4", classTime: "33:45", isStudy: false, name: '第2节：氧化还原反应', time: '2020.12.10 20：00'},
{src: "../video/movie4.mp4", classTime: "33:45", isStudy: false, name: '第3节：钠及其化合物', time: '2020.12.10 20：00'}
]
},{
title: '第四章：公开课',
num: 4,
list: [
{src: "../video/movie1.mp4", classTime: "33:45", isStudy: false, name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00'},
{src: "../video/movie2.mp4", classTime: "33:45", isStudy: false, name: '第1节：离子反应', time: '2020.12.10 20：00'},
{src: "../video/movie3.mp4", classTime: "33:45", isStudy: false, name: '第2节：氧化还原反应', time: '2020.12.10 20：00'},
{src: "../video/movie4.mp4", classTime: "33:45", isStudy: false, name: '第3节：钠及其化合物', time: '2020.12.10 20：00'}
]
},{
title: '第五章：公开课',
num: 4,
list: [
{src: "../video/movie1.mp4", classTime: "33:45", isStudy: false, name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00'},
{src: "../video/movie2.mp4", classTime: "33:45", isStudy: false, name: '第1节：离子反应', time: '2020.12.10 20：00'},
{src: "../video/movie3.mp4", classTime: "33:45", isStudy: false, name: '第2节：氧化还原反应', time: '2020.12.10 20：00'},
{src: "../video/movie4.mp4", classTime: "33:45", isStudy: false, name: '第3节：钠及其化合物', time: '2020.12.10 20：00'}
]
},{
title: '第六章：公开课',
num: 4,
list: [
{src: "../video/movie1.mp4", classTime: "33:45", isStudy: false, name: '第0节：化学的研究对象和研究方法', time: '2020.12.10 20：00'},
{src: "../video/movie2.mp4", classTime: "33:45", isStudy: false, name: '第1节：离子反应', time: '2020.12.10 20：00'},
{src: "../video/movie3.mp4", classTime: "33:45", isStudy: false, name: '第2节：氧化还原反应', time: '2020.12.10 20：00'},
{src: "../video/movie4.mp4", classTime: "33:45", isStudy: false, name: '第3节：钠及其化合物', time: '2020.12.10 20：00'}
]
}];
var classImgList = [
'../img/videoDetail/detail.png'
];
var commentList = [{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
},{
'name': '哈哈哈哈',
'time': '21:12',
'src': '../img/login/user.png',
'content': '讲的太好了！'
}];js:
//获取元素
var classDetail = document.querySelector(".classDetail");
var left = classDetail.querySelector(".left");
var oSpans = classDetail.querySelectorAll(".top span");
var oContent = classDetail.querySelectorAll(".content")
var leftSrc = videoDetail.src;
//video引入
left.innerHTML = '<video src="' + leftSrc + '" controls></video>';
//目录详情
bindData(classList);
//数据绑定
function bindData(data) {
data.forEach(function (val, index) {
// console.log(val,index)
//创建章
var div = document.createElement("div");
//设置类名
div.className = "list";
div.innerHTML = '<p class="title">' + val.title + '（含' + val.num + '期）</p>';
//创建ul
var ul = document.createElement("ul");
ul.className = "list";
val.list.forEach(function (listval, listindex) {
// console.log(listval,listindex)
//创建li
var li = document.createElement("li");
// li.className = `${listval.src}`;
li.setAttribute('src', `${listval.src}`);
//赋值
li.innerHTML = `<span>${listval.name}</span>
<i class="iconfont icon-bofang"></i>`;
//给第一个list中的第一个li加激活样式
if (index == 0 && listindex == 0) {
addClass(li, "active")
}
//把li放入ul
ul.appendChild(li);
// console.log(ul)
});
//将ul放入div中
div.appendChild(ul);
//将div添加到rightCon中
oContent[0].appendChild(div);
})
}
//讨论
//获取元素
var talkContent = oContent[1];
// console.log(talkContent,scroll)
talkContent.innerHTML = `<textarea name="" cols="30" rows="10" maxlength="100" class="txt"></textarea>
<button class="push">发布</button>
<div class="scroll">
<ul class="comment">
<li>
<p>
<img src="../img/login/wx.png" alt="">
<span>哈哈哈哈哈</span>
<span>21:12</span>
</p>
<p>这是一个无营养的评价</p>
</li>
</ul>
</div>`;js:
//获取元素
var tabTitle = document.querySelectorAll(".tabTitle span");
var oTabbox = document.querySelectorAll(".tabBox")
// console.log(tabTitle,oTabbox)
//绑定点击事件
for(var i = 0;i<tabTitle.length;i++){
//自定义索引
tabTitle[i].index = i;
//绑定事件
tabTitle[i].onclick = function(){
// console.log(this.index)
//清空所有激活样式
for(var i =0;i<tabTitle.length;i++){
tabTitle[i].className = "";
oTabbox[i].className = "classlist tabBox";
};
//再给对应span和div激活样式
addClass(this,"active")
addClass(oTabbox[this.index],"active")
}
}
//获取元素
var talkDiv = classDetail.querySelector(".scroll");
// console.log(talkDiv);
//数据绑定
talkbindData(commentList);
function talkbindData(data) {
//循环遍历数组
data.forEach(function (val, index) {
//创建ul
var ul = document.createElement("ul");
ul.className = "comment";
//创建li
var li = document.createElement("li");
li.innerHTML = `<p><img src="${val.src}" alt="">
<span>${val.name}</span>
<span>${val.time}</span></p>
<p>${val.content}</p>`;
//把li添加到ul中
ul.appendChild(li);
//把ul添加到talkDiv中
talkDiv.appendChild(ul);
})
//把talkDiv添加到talkContent中
talkContent.appendChild(talkDiv);
// console.log( talkContent)
}
2.实现选项卡切换
//选项切换
for (var i = 0; i < oSpans.length; i++) {
//自定义属性
oSpans[i].index = i;
//绑定事件
oSpans[i].onclick = function () {
for (var j = 0; j < oSpans.length; j++) {
oSpans[j].className = "";
oContent[j].className = "content";
}
this.className = "active";
// console.log(this.index)
addClass(oContent[this.index], "active");
}
}
3.留言/讨论
//增加讨论
//获取元素
var btn = oContent[1].querySelector(".push");
var textarea = oContent[1].querySelector(".txt")
var div = oContent[1].querySelector(".scroll")
// console.log(btn, textarea, div)
//获取实时时间
var date = new Date();
var hour = date.getHours();
var minutes = date.getMinutes();
// console.log(hour, minutes)
//绑定事件
btn.onclick = function () {
//创建ul
var ul = document.createElement("ul");
ul.className = "comment";
//创建li
var li = document.createElement("li");
li.innerHTML = `<p>
<img src="../img/login/wx.png" alt="">
<span>哈哈哈哈哈</span>
<span>${hour}:${minutes}</span>
</p>`;
//创建p
var p = document.createElement("p");
//输入内容不为空
if (textarea.value) {
p.innerHTML = textarea.value;
} else {
alert("请输入内容");
}
//把p添加到li中
li.appendChild(p);
//将li添加到ul中
ul.appendChild(li);
//将ul添加到div中
div.insertBefore(ul, div.firstElementChild)
// console.log(div)
}4.根据目录切换视频
//视频切换
//获取元素
var listLi = classDetail.querySelectorAll("li");
// console.log(listLi);
for (var i = 0; i < listLi.length; i++) {
//自定义属性
listLi[i].index = i;
listLi[i].onclick = function () {
console.log(this);
var imgsrc = this.getAttribute("src");
leftSrc = imgsrc;
left.innerHTML = '<video src="' + leftSrc + '" controls></video>';
//先清空激活样式
for(var i =0;i<listLi.length;i++){
listLi[i].className="";
}
//再给对应li激活样式
this.className = "active";
}
}全部的js代码：(;(function(){代码段})(); 是自执行函数，形成私有作用域，防止全局污染)
; (function () {
//获取元素
var classDetail = document.querySelector(".classDetail");
var left = classDetail.querySelector(".left");
var oSpans = classDetail.querySelectorAll(".top span");
var oContent = classDetail.querySelectorAll(".content")
var leftSrc = videoDetail.src
left.innerHTML = '<video src="' + leftSrc + '" controls></video>';
//选项切换
for (var i = 0; i < oSpans.length; i++) {
//自定义属性
oSpans[i].index = i;
//绑定事件
oSpans[i].onclick = function () {
for (var j = 0; j < oSpans.length; j++) {
oSpans[j].className = "";
oContent[j].className = "content";
}
this.className = "active";
// console.log(this.index)
addClass(oContent[this.index], "active");
}
}
//目录详情
bindData(classList);
//数据绑定
function bindData(data) {
data.forEach(function (val, index) {
// console.log(val,index)
//创建章
var div = document.createElement("div");
//设置类名
div.className = "list";
div.innerHTML = '<p class="title">' + val.title + '（含' + val.num + '期）</p>';
//创建ul
var ul = document.createElement("ul");
ul.className = "list";
val.list.forEach(function (listval, listindex) {
// console.log(listval,listindex)
//创建li
var li = document.createElement("li");
// li.className = `${listval.src}`;
li.setAttribute('src', `${listval.src}`);
//赋值
li.innerHTML = `<span>${listval.name}</span>
<i class="iconfont icon-bofang"></i>`;
//给第一个list中的第一个li加激活样式
if (index == 0 && listindex == 0) {
addClass(li, "active")
}
//把li放入ul
ul.appendChild(li);
// console.log(ul)
});
//将ul放入div中
div.appendChild(ul);
//将div添加到rightCon中
oContent[0].appendChild(div);
})
}
//视频切换
//获取元素
var listLi = classDetail.querySelectorAll("li");
// console.log(listLi);
for (var i = 0; i < listLi.length; i++) {
//自定义属性
listLi[i].index = i;
listLi[i].onclick = function () {
console.log(this);
var imgsrc = this.getAttribute("src");
leftSrc = imgsrc;
left.innerHTML = '<video src="' + leftSrc + '" controls></video>';
//先清空激活样式
for(var i =0;i<listLi.length;i++){
listLi[i].className="";
}
//再给对应li激活样式
this.className = "active";
}
}
//讨论
//获取元素
var talkContent = oContent[1];
// console.log(talkContent,scroll)
talkContent.innerHTML = `<textarea name="" cols="30" rows="10" maxlength="100" class="txt"></textarea>
<button class="push">发布</button>
<div class="scroll">
<ul class="comment">
<li>
<p>
<img src="../img/login/wx.png" alt="">
<span>哈哈哈哈哈</span>
<span>21:12</span>
</p>
<p>这是一个无营养的评价</p>
</li>
</ul>
</div>`;
//获取元素
var talkDiv = classDetail.querySelector(".scroll");
// console.log(talkDiv);
//数据绑定
talkbindData(commentList);
function talkbindData(data) {
//循环遍历数组
data.forEach(function (val, index) {
//创建ul
var ul = document.createElement("ul");
ul.className = "comment";
//创建li
var li = document.createElement("li");
li.innerHTML = `<p><img src="${val.src}" alt="">
<span>${val.name}</span>
<span>${val.time}</span></p>
<p>${val.content}</p>`;
//把li添加到ul中
ul.appendChild(li);
//把ul添加到talkDiv中
talkDiv.appendChild(ul);
})
//把talkDiv添加到talkContent中
talkContent.appendChild(talkDiv);
// console.log( talkContent)
}
//增加讨论
//获取元素
var btn = oContent[1].querySelector(".push");
var textarea = oContent[1].querySelector(".txt")
var div = oContent[1].querySelector(".scroll")
// console.log(btn, textarea, div)
//获取实时时间
var date = new Date();
var hour = date.getHours();
var minutes = date.getMinutes();
// console.log(hour, minutes)
//绑定事件
btn.onclick = function () {
//创建ul
var ul = document.createElement("ul");
ul.className = "comment";
//创建li
var li = document.createElement("li");
li.innerHTML = `<p>
<img src="../img/login/wx.png" alt="">
<span>哈哈哈哈哈</span>
<span>${hour}:${minutes}</span>
</p>`;
//创建p
var p = document.createElement("p");
//输入内容不为空
if (textarea.value) {
p.innerHTML = textarea.value;
} else {
alert("请输入内容");
}
//把p添加到li中
li.appendChild(p);
//将li添加到ul中
ul.appendChild(li);
//将ul添加到div中
div.insertBefore(ul, div.firstElementChild)
// console.log(div)
}
//授课师资
//获取元素
var introduce = document.querySelector(".introduce");
// console.log(introduce)
var teacherleft = introduce.querySelector(".left");
var teacherright = introduce.querySelector(".right");
teacherleft.innerHTML = `<p class="img">
<img src="${videoDetail.imgSrc}" alt="">
</p>
<p class="right">
<span>${videoDetail.teacher}</span>
<span>${videoDetail.teacherTitle}</span>
</p>`;
teacherright.innerHTML = `${videoDetail.introduce}`;
})();
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
