Kilikilinode1
Kilikili首页布局设计1(仿照Bilibili)
前言:模仿Bilibili的首页样式自己设计一个网页布局拥有动态配合,需要CSS+HTML+JS,用到serilize插件和bootstrap插件,用户的信息暂时存放在本地存储.这次没有用到接口,将会在后部分中使用。使用接口编写一个天气预报。注意有主页面登录页面还有注册页面三个页面
引入两个插件和axios库
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> //用于制作弹出框
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> //为后面调接口做准备
https://www.npmjs.com/package/form-serialize //收集表单数据
一、整体布局分析
1、分为三部分head,channel和body
2、head一个版心,lchannel和body一个版心
总结:先整体再局部,从上到下,从左到右。
二、具体代码
1、head设计
思路:分为三个部分,左边首页到下载客户端,中间搜索框,右边用户头像到投稿。并且加上背景图片
1.1 html设计
<div class="head">
<!-- head背景图片 -->
<div class="headbgi">
<div class="wrapper">
<!-- logo -->
<div class="logo"><h1><a href="https://www.bilibili.com/?spm_id_from=333.1007.0.0" class="iconfont icon-bilibili"></a></h1></div>
<!-- 左边小导航 -->
<div class="headleft">
<ul>
<li><a href="https://www.bilibili.com/?spm_id_from=333.1007.0.0" class="firsttu" target="_blank"><span class="iconfont icon-bilibili-line"></span><p class="firstzi">首页</p></a></li>
<li><a href="#"><p>番剧</p></a></li>
<li><a href="#"><p>直播</p></a></li>
<li><a href="#"><p>游戏中心</p></a></li>
<li><a href="#"><p>会员购</p></a></li>
<li><a href="#"><p>漫画</p></a></li>
<li><a href="#"><p>赛事</p></a></li>
<li><a href="#"><p>畅玩S13</p></a></li>
<li><a href="#" class="lasttu"><span class="iconfont icon-bottom"></span><p class="downzi">下载客户端</p></a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="headmid">
<input type="text" placeholder="Clannad">
<span class="iconfont icon-suosou"></span>
</div>
<!-- 右边用户功能 -->
<div class="headright">
<ul>
<div class="header-login-entry"><span> 登录 </span></div>
<li><a href="#"><span class="iconfont icon-wodedahuiyuan"></span><p class="firstzi">大会员</p></a></li>
<li><a href="#"><span class="iconfont icon-xinxi"></span><p class="firstzi">消息</p></a></li>
<li><a href="#"><span class="iconfont icon-dongtai"></span><p class="firstzi">动态</p></a></li>
<li><a href="#"><span class="iconfont icon-shoucang"></span><p class="firstzi">收藏</p></a></li>
<li><a href="#"><span class="iconfont icon-lishijilu"></span><p class="firstzi">历史</p></a></li>
<li><a href="#"><span class="iconfont icon-chuangzuozhongxin"></span><p class="firstzi">创作中心</p></a></li>
<li><a href="#" class="tougao"><span class="iconfont icon-shangchuan"></span><p class="firstzi">投稿</p></a></li>
</ul>
</div>
</div>
</div>
</div>
1.2 CSS设计
/* 头部的wrapper */
.head .wrapper {
/* width: 100%; */
margin: 0 auto;
width: 1440px;
padding: 0 24px;
display: flex;
/* justify-content: center; */
align-items: center;
/* background-color: blueviolet; */
padding-top: 12px;
position: relative;
}
/* .主要内容的wrapper */
.wrapper {
padding: 0 60px;
width: 1440px;
}
/* 头部的背景图片 */
.head .headbgi {
position: relative;
width: 100%;
height: 155px;
background-color: black;
/* margin-top: -20px; */
background-image: url(../images/headbgi2.jpg);
background-repeat: no-repeat;
background-size: cover;
min-width: 1456px;
}
/* logo部分 */
.head .logo {
width: 78px;
height: 162px;
position: absolute;
float: left;
top: 80px;
left: 90px;
}
.head .logo a {
position: absolute;
display: block;
width: 110px;
height: 45px;
/* background-image: url(../images/-56879509f84f10da.gif); */
/* background-color: #fff; */
/* font-size: 0; */
background-size: contain;
background-repeat: no-repeat;
/* background-color: #fff; */
}
.head .logo .iconfont {
color: #fff;
/* font-size: large; */
/* width: 100%;
height: 100%; */
font-size: 50px;
}
/* 左边的部分 */
.head .headleft ul {
display: flex;
margin-right: 24px;
}
.head .wrapper .headleft li {
margin-right: 15px;
}
/* head的所有字 */
.head .wrapper li p {
color: #fff;
font-size: 14px;
font-weight: 500;
}
/* head左边第一个图标 */
.head .wrapper .firsttu {
display: flex;
/* justify-content: center; */
}
.head .wrapper .headleft .firsttu span {
margin-right: 3px;
/* align-items: center; */
margin-bottom: 1px;
font-size: 20px;
}
/* head的左边的最后一个图标 */
.head .wrapper .headleft .lasttu {
display: flex;
/* justify-content: center; */
}
.head .wrapper .lasttu span {
margin-right: 3px;
/* align-items: center; */
margin-top: 1px;
font-size: 18px;
}
/* 中间的部分 */
.head .headmid {
position: relative;
display: flex;
margin-right: 15px;
width: 300px;
height: 35px;
border-right: none;
}
/* 头部输入框 */
.head .headmid input {
/* border-radius: 30px; */
width: 0;
flex: 1;
outline: none;
border-right: none;
border-bottom: none;
}
/* 头部输入框搜索图标 */
.head .headmid .iconfont {
font-size: 26px;
color: black;
margin-top: 5px;
position: absolute;
/* float: right; */
right: 10px;
cursor: pointer;
background-color: #fff;
transition: background-color 1s;
border-radius: 20%;
}
.head .headmid .iconfont:hover {
background-color: #f3e9eb;
}
.head .headmid input::placeholder {
padding-left: 5px;
}
/* 右边的部分 */
.head .headright ul {
display: flex;
align-items: center;
}
.head .wrapper .headright li {
margin-right: 20px;
}
/* 设置右边的图标和字都是垂直居中对齐一个在上一个在下 */
.head .wrapper .headright li a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 设置所有head的所有图标的大小颜色和粗细 */
.head .wrapper a span {
/* line-height: 10px; */
/* margin-right: 3px; */
/* align-items: center; */
/* margin-top: 1px; */
font-size: 18px;
color: #fff;
font-weight: 700;
}
/* 用户图像设置 */
.header-login-entry {
width: 36px;
height: 36px;
border-radius: 50%;
color: #fff;
background: #00AEEC;
text-align: center;
letter-spacing: 0;
font-size: 14px;
line-height: 36px;
margin-right: 10px;
cursor: pointer;
}
.header-login-entry img {
width: 100%;
height: 100%;
border-radius: 50%;
cursor: pointer;
border: #fff 2px solid;
}
.head .headright .user-img img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid white;
}
/* 给最后一个在改成inherit继承父级元素a的flex,变成水平 */
.head .wrapper .headright .tougao {
/* display: flex; */
flex-direction:inherit;
width: 88px;
height: 35px;
background-color: #fb7299;
border-radius: 8px;
}
.head .wrapper .headright .tougao span {
margin-right: 5px;
font-size: 15px;
}
1.3 JS设计
document.querySelector('.header-login-entry').addEventListener('click', e => {
// console.log(123)
location.href = './login.html'
})
// 登录成功后登录按钮消失变成用户随机头像
const uname = localStorage.getItem('uname')
const pwd = localStorage.getItem('pwd')
// console.log(uname,pwd)
if (uname && pwd ) {
// console.log(123)
document.querySelector('.header-login-entry').innerHTML = `<img src="./images/userimg.jpg" alt="">`
} else (
document.querySelector('.header-login-entry').innerHTML = `<span> 登录 </span>`
)
1.4 遇到的问题总结
1.4.1 问题1
图标和字要垂直居中对齐,而且图标要调整垂直距离
解决方法:给图标和字外面再套一个盒子,盒子flex弹性盒子并且改变主轴方向,水平居中,垂直居中,图标设置line-height行高调整
1.4.2 问题2
设置head的上边距的时候出现背景图也移动了,这是因为子标签会跟父标签的边框会重合
解决方法:给父级加上边的内边距1px;给父级添加overflow:hidden;为父元素或者子元素声明绝对定位;或者给子标签加内边距
1.4.3 问题3
给投稿项设置样式的时候需要再设置图标在左,字在右边
解决方法:给图标元素添加flex-direction:inherit;继承a的位置元素flex
1.4.4 问题4
设置背景图片后浏览器缩小后背景图片没显示全部,背景图会变动
解决方法:在设置背景图片的选择器里面再加上min-width:你的浏览器的最宽宽度;
2、channel设计
思路:一个大盒子,里面放三个小盒子,采用ul嵌套li的方式布局,记得弹性盒子,还用gird网格布局
1.1 html设计
<!-- 频道区域channel -->
<div class="main">
<div class="wrapper">
<div class="channel">
<div class="iconfontpic">
<div class="iconfontleft">
<a href="#">
<img src="./images/userimg.jpg" alt="">
<span class="title">动态</span>
</a>
</div>
<div class="iconfontright">
<a href="#">
<div class="iconfont icon-remen"></div>
<span class="title">热门</span>
</a>
</div>
</div>
<div class="channelleft"><ul>
<li><a href="#">番剧</a></li>
<li><a href="#">国创</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">动画</a></li>
<li><a href="#">鬼畜</a></li>
<li><a href="#">舞蹈</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">汽车</a></li>
<li><a href="#">运动</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">电视剧</a></li>
<li><a href="#">纪录片</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">影视</a></li>
<li><a href="#">知识</a></li>
<li><a href="#">咨询</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">时尚</a></li>
<li><a href="#">更多 <div class="iconfont icon-xiangxiajiantou"></div></a></li>
</ul></div>
<div class="channelright">
<ul>
<li><a href="#"><span class="iconfont icon-zhuanlan"></span><span>专栏</span></a></li>
<li><a href="#"><span class="iconfont icon-zhibo"></span><span>直播</span></a></li>
<li><a href="#"><span class="iconfont icon-huodong"></span><span>活动</span></a></li>
<li><a href="#"><span class="iconfont icon-ketang"></span><span>课堂</span></a></li>
<li><a href="#"><span class="iconfont icon-shequzhongxin"></span><span>社区中心</span></a></li>
<li><a href="#"><span class="iconfont icon-remen1"></span><span>新歌热榜</span></a></li>
</ul>
</div>
</div>
</div>
</div>
1.2 CSS设计
/* channel部分 */
.channel {
display: flex;
/* margin-top: 1px; */
height: 110px;
}
/* 最左边图标部分 */
.channel .iconfontpic {
height: 72px;
width: 140px;
/* background-color: skyblue; */
/* border: 1px solid black; */
/* margin-right: 6px; */
margin: 19px 6px 19px 0;
}
/* .中间频道 */
.channel .channelleft {
width: 932px;
height: 66px;
/* background-color: yellow; */
/* border: 1px solid black; */
/* margin-right: 27px; */
margin: 22px 27px 22px 0;
}
/* .右边的频到 */
.channel .channelright {
width: 240px;
height: 66px;
/* background-color: red; */
border-left: 1px solid #E3E5E7;
margin: 22px 0 22px 0;
}
/* 最左边的 */
.channel .iconfontpic {
display: flex;
}
.channel .iconfontpic span {
font-size: 14px;
}
/* 左边设计 */
.channel .iconfontpic .iconfontleft {
width: 46px;
height: 72px;
margin-right: 24px;
text-align: center;
cursor: pointer;
}
.channel .iconfontpic .iconfontleft img {
width: 46px;
height: 46px;
border-radius: 50%;
}
/* 右边设计 */
.channel .iconfontpic .iconfontright {
width: 46px;
height: 72px;
margin-right: 24px;
text-align: center;
cursor: pointer;
}
/* .channel .iconfontpic .iconfontright a { */
/* cursor: pointer; */
/* width: 46px;
height: 71.1px; */
/* } */
.channel .iconfontpic .iconfontright .iconfont {
width: 46px;
height: 46px;
margin-bottom: 4px;
background-color: rgb(101, 125, 220);
border-radius: 50%;
line-height: 46px;
}
.channel .iconfontpic .iconfontright .iconfont {
font-size: 20px;
color: #fff;
}
/* 中间频道 */
.channel .channelleft ul{
display: grid;
width: 100%;
grid-auto-flow: column;
grid-column: span 4;
grid-gap: 10px;
grid-template-rows: repeat(2,1fr);
border-right: 1px solid var(--line_regular);
}
.channel .channelleft ul li {
width: 74px;
height: 27.4px;
text-align: center;
line-height: 25px;
background-color: #f6f7f8;
border-radius: 15%;
/* transition: background-color .3s,color .3s; */
transition: all ;
}
.channel .channelleft ul li:hover {
background-color: rgba(192, 237, 237, 0.871);
}
/* 字体样式 */
.channel .channelleft ul li a{
font-weight: 400;
font-size: 13.5px;
color: #61666d;
}
/* 设置更多图标位置 */
.channel .channelleft ul a:last-child {
position: relative;
}
.channel .channelleft ul .iconfont {
position: absolute;
left: 35px;
top: 0px;
font-size: 10px;
font-weight: 700;
}
/* 右边的频道 */
.channelright ul {
margin-left: 10px;
grid-row-gap: 10px;
grid-auto-flow: column;
display: grid;
grid-template-rows: repeat(2,1fr);
/* width: 168px; */
flex-shrink: 0;
margin-top: 7px;
}
/* 字和图标样式 */
.channelright ul li span {
font-size: 14.5px;
margin-right: 4px;
}
1.3 JS设计
待定
1.4 遇到的问题总结
1.用ul嵌套li的方式布局,发现22个li怎么换行,一行11,B站用的是网格布局grid。学习一下grid
3、body设计
1.1 html设计
<div class="mainvideo">
<div class="wrapper">
<div class="swiper">
<div class="img">
<a target="_blank" href="https://www.bilibili.com/bangumi/play/ss1539?spm_id_from=333.337.0.0"><img src="./images/lunbo1.png" alt=""></a>
</div>
<div class="foot">
<div class="titleAndDot">
<p>我的青春物语果然有问题</p>
<div class="dot">
<div class="dotLeft"><button><</button></div>
<div class="dotRight"><button>></button></div>
</div>
</div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="topVideoRight">
<ul>
<!-- 这是放的就是map循环出来的视频数据 -->
</ul>
</div>
</div>
</div>
1.2 CSS设计
/* 主页视频部分 */
.mainvideo .wrapper{
display: flex;
}
.mainvideo .swiper {
width: 500px;
height: 374px;
/* background-color: yellow; */
border-radius: 2%;
}
/* 轮播的图设置 */
.mainvideo .swiper .img {
width: 500px;
height: 281.76px;
/* background-color: yellowgreen; */
border-radius: 2% 2% 0 0;
}
.mainvideo .swiper .img img {
width: 100%;
height: 281.76px;
}
/* 底部介绍样式设置 */
.mainvideo .swiper .foot {
width: 500px;
height: 93.2px;
/* background-color: rgb(139, 98, 66)' */
background-color: rgb(139, 98, 66);
}
.mainvideo .swiper .foot .titleAndDot {
/* display: fle; */
width: 100%;
height: 22.57px;
display:inline-block;
margin: 20px 20px 7px 10px;
width:450px
}
.mainvideo .swiper .foot .titleAndDot p {
font-size: 15px;
color: #fff;
float: left;
}
.mainvideo .swiper .foot .titleAndDot .dot {
width: 45px;
float: right;
display: flex;
justify-content: space-between;
margin-right: 0px;
}
.mainvideo .swiper .foot .titleAndDot .dot button {
width: 20px;
height: 20px;
margin-right: 12px;
cursor: pointer;
}
.mainvideo .swiper .foot ul {
display: flex;
margin: 0px 0px 7px 10px;
align-items: center;
}
.mainvideo .swiper .foot ul li {
height: 10px;
width: 10px;
background-color: black;
margin-right: 14px;
border-radius: 50%;
cursor: pointer;
line-height: 10px;
}
.mainvideo .swiper .foot ul li.active {
height: 15px;
width: 15px;
background-color: #fff;
}
/* 右边部分 */
.mainvideo .topVideoRight ul {
margin-left: 20px;
display: flex;
flex-wrap: wrap;
/* justify-content: space-between; */
/* align-content: flex-start; */
}
.mainvideo .topVideoRight ul li {
width: 248px;
height: 214.5px;
/* background-color: yellowgreen; */
/* flex: 1; */
margin-left: 10px;
position: relative;
}
.mainvideo .topVideoRight ul li:nth-child(n+4) {
margin-top: 10px;
}
.mainvideo .topVideoRight ul .img {
display: block;
width: 100%;
height: 139.5px;
margin-bottom: 10px;
border-radius: 50%;
}
.mainvideo .topVideoRight ul li img {
width: 100%;
height: 100%;
/* margin-bottom: 10px; */
}
/* 视频播放信息 */
.mainvideo .topVideoRight ul .videoDetal {
display: flex;
position: absolute;
margin-left: 8px;
/* background-color: white; */
margin-bottom: 10px;
font-size: 12px;
top: 120px;
color: #fff;
/* height: 10px; */
}
.mainvideo .topVideoRight ul .videoDetal .data2 {
/* display: block; */
width: 35px;
}
.mainvideo .topVideoRight ul .videoDetal .icon-danmu {
font-size: 11px;
/* margin-top: 2px; */
margin: 1px 84px 0 15px;
}
.mainvideo .topVideoRight ul li:nth-child(1) .videoDetal .icon-danmu {
margin: 1px 120px 0 15px;
}
.mainvideo .topVideoRight ul li:nth-child(3) .videoDetal .icon-danmu {
margin: 1px 75px 0 15px;
}
/* UP信息 */
.mainvideo .topVideoRight ul li .anotherMessage {
display: flex;
font-size: 12px;
margin-top: 2px;
opacity: 0.7;
}
.mainvideo .topVideoRight ul li .anotherMessage .author {
margin: 0 14px 0 8px;
}
1.3 JS设计
// 轮播图的
// 准备数据
const sliderData = [
{ url: './images/lunbo1.png', title: '我的青春物语果然有问题', color: 'rgb(139, 98, 66)', videoSrc:'https://www.bilibili.com/bangumi/play/ss1539?spm_id_from=333.337.0.0'},
{ url: './images/lunbo2.png', title: 'ギルティ・サワ氏!犯泽先生', color: 'rgb(43, 35, 26)' ,videoSrc:'https://www.bilibili.com/bangumi/play/ss44903/'},
{ url: './images/lunbo3.png', title: '假面骑士极狐最终集!', color: 'rgb(245, 222, 179)' ,videoSrc:'https://www.bilibili.com/bangumi/play/ep736811?spm_id_from=333.337.0.0&from_spmid=666.25.episode.0'},
{ url: './images/lunbo4.png', title: '冬天到了,一起堆雪人吗', color:'rgb(0, 255, 255)' ,videoSrc:'https://www.bilibili.com/video/BV1RU4y1f7nt/?spm_id_from=333.337.search-card.all.click'},
{ url: './images/lunbo5.png', title: '拉过勾的事情就一定要做到!!!', color: 'rgb(67, 90, 92)',videoSrc:'https://www.bilibili.com/video/BV1w64y1Z7X7/?spm_id_from=333.337.search-card.all.click' },
{ url: './images/lunbo6.png', title: 'BiliBili夏日祭来咯!!!', color: '#aeccea',videoSrc:'https://www.bilibili.com/video/BV1D64y147ME/?spm_id_from=333.337.search-card.all.click&vd_source=1be1aa6d7dacbe358b482fe3b1c4c6dc' }
]
// 先获取图片的元素
const img = document.querySelector('.mainvideo .swiper .img img')
// console.log(img.src)
const videoSrc = document.querySelector('.mainvideo .swiper a')
const title = document.querySelector('.mainvideo .swiper .foot .titleAndDot p')
const foot = document.querySelector('.mainvideo .swiper .foot')
const dotRight = document.querySelector('.dotRight button')
const dotLeft = document.querySelector('.dotLeft button')
const box = document.querySelector('.mainvideo .swiper')
let liac = 0
// console.log(liac)
let li = 0
// 设置间隔函数每两秒替换一次
let i = 0
let ti = setInterval(function() {
i++
if(i === sliderData.length) {
i = 0
}
trans()
}, 2000)
// 设置悬停事件(经过)
box.addEventListener('mouseenter', function() {
clearInterval(ti)
})
// 设置悬停事件(离开)
box.addEventListener('mouseleave', function() {
againStart()
})
// 给按钮绑定点击事件
dotLeft.addEventListener('click', function() {
i--
if (i < 0) {
i = 5
}
trans()
})
dotRight.addEventListener('click', function() {
i++
i = i >= sliderData.length ? 0 : i
trans()
})
// 设置函数以后要用
function trans () {
// 定时更换图片
img.src = sliderData[i].url
// 视频链接
videoSrc.href = sliderData[i].videoSrc
// 标语
title.innerHTML = sliderData[i].title
// 底部背景颜色
foot.style.backgroundColor = sliderData[i].color
liac = document.querySelector('.foot ul .active')
liac.classList.remove('active')
li = document.querySelector(`.foot ul li:nth-child(${i + 1})`)
li.classList.add('active')
}
// 再声明一个函数放自动播放间隔函数
function againStart() {
// 这里再停止定时器是一个习惯,要开启前一定要先关掉
// 这个是为了防止一打开 网页鼠标就在块上,定时器还没
// 关闭后再开启是新的定时器,所以逻辑上一个新的定时器应该先关闭再开启
clearInterval(ti)
ti = setInterval(function() {
i++
if (i === sliderData.length) {
i = 0
}
trans()
}, 2000)
}
// 放右边视频的内容
const rightVideoDataObj = [
{videoUrl: 'https://www.bilibili.com/video/BV1rZ4y1r7N5/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/lunbo1.png',data1:'331',data2:'0',data3:'00:30',title:'【由比滨结衣】团子美图 我的青春恋爱物语果然有问题',author:'开开心心赢大奖',date:'2022-03-06'},
{videoUrl: 'https://www.bilibili.com/video/BV1d4411F7QQ/?spm_id_from=333.999.0.0',imgUrl:'./images/一刀修罗!.webp',data1:'127.7w',data2:'1519',data3:'03:50',title:'【一刀修罗】以我的最弱,战胜你的最强',author:'秋山澪゛',date:'2019-07-09'},
{videoUrl: 'https://www.bilibili.com/video/BV1XJ411Y7oK/?spm_id_from=333.337.search-card.all.click',imgUrl:'./images/100名.webp',data1:'1377.3w',data2:'15.8w',data3:'14:11',title:'100部动漫角色联手拯救世界!!!',author:'在下雷姆有何贵干',date:'2019-12-27'},
{videoUrl: 'https://www.bilibili.com/video/BV1px411C76R/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/zohujielun.webp',data1:'231.4w',data2:'1.1w',data3:'10:33',title:'周杰伦十大忘词现场',author:'大腿说什么',date:'2017-03-10'},
{videoUrl: 'https://www.bilibili.com/video/BV1QV411y7C3/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/spireman.webp',data1:'386.7w',data2:'2722',data3:'02:26',title:'喜欢蜘蛛侠的人,应该都会被推送到吧!',author:'I996-TV',date:'2020-11-09'},
{videoUrl: 'https://www.bilibili.com/video/BV1RV41117ii/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/DNA.webp',data1:'583.4w',data2:'3.3w',data3:'03:57',title:'刻在DNA里的那些动漫台词跟场面,你知道多少?',author:'-影子a',date:'2020-10-07'},
]
const rightVideoData = rightVideoDataObj.map(item => {
return `
<li>
<a href="${item.videoUrl}" class="img" target="_blank"><img src="${item.imgUrl}" alt=""></a>
<div class="videoDetal"><span class="iconfont icon-bofangliang" style="font-weight: 400; margin-bottom: 1px;"></span><span class="data1">${item.data1}</span><span class="iconfont icon-danmu"><span class="data2" style="margin-left: 2px;">${item.data2}</span></span><span style="margin-top: 0.5px;">${item.data3}</span></div>
<a href="#"><p class="title">${item.title}</p></a>
<div class="anotherMessage"><span class="iconfont icon-UPzhu"></span><span class="author">${item.author}</span><span class="time">${item.date}</span></div>
</li>
`
}).join('')
// console.log(rightVideoData)
document.querySelector('.topVideoRight ul').innerHTML = rightVideoData
1.4 遇到的问题总结
1.设置轮播图
// 再声明一个函数放自动播放间隔函数
function againStart() {
// 这里再停止定时器是一个习惯,要开启前一定要先关掉
// 这个是为了防止一打开 网页鼠标就在块上,定时器还没
// 关闭后再开启是新的定时器,所以逻辑上一个新的定时器应该先关闭再开启
clearInterval(ti)
ti = setInterval(function() {
i++
if (i === sliderData.length) {
i = 0
}
trans()
}, 3000)
}
2.引入JS文件报错,找不到图片标签
得把引入的标签写在</body>上面,也就是说得等页面加载出来那些图片之后,才可以获取到
3.播放量的图标怎么设置成透明的,也能看到视频的
检查才发现,我忘记把背景颜色去掉了
4.遍历循环出现结构不一致
用了结构伪类选择器解决了,选择后面三个设置不一样的结构就可以了
.mainvideo .topVideoRight ul li:nth-child(n+4) {
margin-top: 10px;
}
5.怎么判断有没有值然后显示用户头像呢
// 登录成功后登录按钮消失变成用户随机头像
const uname = localStorage.getItem('uname')
const pwd = localStorage.getItem('pwd')
// console.log(uname,pwd)
//if (uname !== '' && pwd !== '')
if (uname && pwd ) {
// console.log(123)
document.querySelector('.header-login-entry').innerHTML = `<img src="./images/userimg.jpg" alt="">`
} else (
document.querySelector('.header-login-entry').innerHTML = `<span> 登录 </span>`
)
//注意这里取不到本地存储,本地存储时null,null也不等于空字符,所以会成立,所以直接判断有没有就行
4、login和register设计
这里简略放一些主要在后部分补充
CSS部分
Login
css
body {
background-image: url(../images/headbgi2.jpg);
}
h1 {
color: #fff;
}
.register {
/* margin: auto; */
margin-left: 900px;
}
.form {
margin-top: 40px;
margin-left: 530px;
display: flex;
flex-direction: column;
width: 400px;
/* margin: auto; */
}
register
body {
background-image: url(../images/headbgi2.jpg);
}
.form {
margin-top: 40px;
margin-left: 525px;
display: flex;
flex-direction: column;
width: 400px;
/* margin: auto; */
}
/* 提示框 */
.alert{
margin-top: 100px;
/* margin-right: 100px; */
width: 400px;
position: fixed;
top: 100px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.show{
display: block !important;
}
JS部分
login
// 还没注册先注册
const register = document.querySelector('.register')
register.addEventListener('click', e => {
// console.log(123)
location.href = 'register.html'
})
const form = document.querySelector('.form')
form.addEventListener('click', e => {
e.preventDefault() //组织默认事件
})
// 点击登录后跳转到首页
document.querySelector('.form .login').addEventListener('click', e => {
// console.log(123)
const formDataObj = serialize(form, {hash:true,empty:true})
// console.log(formDataObj.uname)
// console.log(localStorage.getItem('uname'))
const uname = localStorage.getItem('uname')
const pwd = localStorage.getItem('pwd')
if (formDataObj.uname !== uname || formDataObj.uname === '') {
// console.log(123)
myAlert(false, '用户名不能为空或请检查用户名输入是否正确,新用户请先注册')
}else if (formDataObj.pwd !== pwd || formDataObj.pwd === '') {
myAlert(false, '密码不能为空或请检查密码输入是否正确,新用户请先注册')
} else {
myAlert(true, '登录成功')
setTimeout(function(){
location.href = '主网页.html'
}, 2000)
}
})
register
const form = document.querySelector('.form')
form.addEventListener('click', e => {
e.preventDefault() //组织默认事件
})
// 点击登录后跳转到首页
document.querySelector('.form .login').addEventListener('click', e => {
// console.log(123)
// 使用serialize插件收集表单数据
const registerObj = serialize(form, {hash:true, empty:true})
// console.log(registerObj)
// console.log(registerObj.uname)
// 判断不为空就存进去并且跳转
if (registerObj.uname !== '' && registerObj.pwd !== '') {
localStorage.setItem('uname', registerObj.uname)
localStorage.setItem('pwd', registerObj.pwd)
myAlert(true, '注册成功')
setTimeout(function() {
// console.log(123)
location.href = 'login.html'
},2000)
}else {
myAlert(false, '注册用户名和内容不能空,请重新输入')
form.reset()
}
})
三、总结(问题、想法、优化)
笔记思路最好是先静态,然后在动态业务逻辑
设置用户登录的时候,可以加一个退出登录按钮,一点击退出就跳转到首页头像消失。再登录的时候还可以用之前注册的信息再登录一次。
注册登录的时候使用正则表达式精准匹配,设置用户设用户名和密码的格式