HTML5多媒体标签（音频和视频）
视频标签
CSS选择器汇总
多类选择器
结构选择器
属性选择器
标签属性
伪类选择器
非常小众的伪类选择器
伪元素选择器
常见案例
气泡聊天界面的实现
<template>
<div class="chat-container">
<!-- 消息显示区域 -->
<div class="chat-window">
<!-- 遍历并显示消息 -->
<div v-for="(message, index) in sortedMessages" :key="index"
:class="['chat-bubble-container', message.isMine ? 'mine' : 'theirs']">
<div class="chat-bubble">
<div class="message-content">
<!-- 根据消息类型显示不同内容 -->
<div v-if="message.type === 'text'">{{ message.content }}</div>
<img v-if="message.type === 'image'" :src="message.content" alt="Image" class="chat-image" />
<video v-if="message.type === 'video'" :src="message.content" controls class="chat-video"></video>
</div>
<!-- 显示消息的时间戳 -->
<div class="timestamp">{{ formatTime(message.timestamp) }}</div>
</div>
</div>
</div>
<!-- 消息输入区域 -->
<div class="chat-input">
<!-- 输入框，用于输入新消息 -->
<input v-model="newMessage" type="text" placeholder="Type a message..." @keyup.enter="sendMessage" />
<!-- 发送按钮 -->
<button @click="sendMessage">Send</button>
<!-- 上传文件按钮 -->
<input type="file" @change="handleFileUpload" ref="fileInput" hidden />
<button @click="triggerFileInput">📎</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 消息列表，包含消息内容、是否为自己发送的、消息类型和时间戳
messages: [
{ content: "Hello!", isMine: false, type: "text", timestamp: 1691568300000 },
{ content: "Hi, how are you?", isMine: true, type: "text", timestamp: 1691571900000 },
{ content: "I'm good, thanks!", isMine: false, type: "text", timestamp: 1691575500000 },
],
newMessage: "", // 用户输入的新消息
};
},
computed: {
// 根据时间戳对消息进行排序
sortedMessages() {
return this.messages.sort((a, b) => a.timestamp - b.timestamp);
},
},
methods: {
// 发送消息
sendMessage() {
if (this.newMessage.trim() !== "") {
this.messages.push({
content: this.newMessage,
isMine: true,
type: "text",
timestamp: Date.now(),
});
this.newMessage = ""; // 发送后清空输入框
}
},
// 触发文件上传的输入框
triggerFileInput() {
this.$refs.fileInput.click();
},
// 处理文件上传
handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
const fileType = file.type.split("/")[0];
const reader = new FileReader();
reader.onload = () => {
const messageType = fileType === "image" ? "image" : fileType === "video" ? "video" : "text";
this.messages.push({
content: reader.result,
isMine: true,
type: messageType,
timestamp: Date.now(),
});
};
reader.readAsDataURL(file); // 读取文件数据
}
},
// 格式化时间戳为时分格式
formatTime(timestamp) {
const date = new Date(timestamp);
return `${date.getHours()}:${String(date.getMinutes()).padStart(2, "0")}`;
},
},
};
</script>
<style scoped>
/* 聊天容器样式 */
.chat-container {
display: flex;
flex-direction: column;
height: 80vh;
max-width: 600px;
margin: 0 auto;
border: 1px solid #ddd;
border-radius: 10px;
}
/* 消息显示区域样式 */
.chat-window {
flex-grow: 1;
padding: 10px;
overflow-y: auto;
background-color: #f5f5f5;
margin-bottom: 20px;
}
/* 消息气泡容器样式 */
.chat-bubble-container {
display: flex;
margin-bottom: 20px;
}
/* 自己发送的消息样式 */
.mine {
justify-content: flex-end;
}
/* 对方发送的消息样式 */
.theirs {
justify-content: flex-start;
}
/* 消息气泡样式 */
.chat-bubble {
max-width: 70%;
padding: 10px;
border-radius: 10px;
background-color: #e0e0e0;
color: black;
position: relative;
word-wrap: break-word;
}
/* 自己发送的消息气泡样式 */
.mine .chat-bubble {
background-color: #4caf50;
color: white;
}
/* 消息内容样式 */
.message-content {
margin-bottom: 5px;
}
/* 时间戳样式 */
.timestamp {
font-size: 0.8em;
color: #999;
position: absolute;
bottom: -18px;
left: 10px;
}
/* 自己发送的消息时间戳样式 */
.mine .timestamp {
right: 10px;
left: auto;
}
/* 消息输入区域样式 */
.chat-input {
display: flex;
padding: 10px;
border-top: 1px solid #ddd;
background-color: white;
}
/* 输入框样式 */
.chat-input input[type="text"] {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 20px;
margin-right: 10px;
}
/* 发送按钮样式 */
.chat-input button {
padding: 10px 15px;
border: none;
border-radius: 50%;
background-color: #4caf50;
color: white;
cursor: pointer;
}
/* 图片样式 */
.chat-image {
max-width: 100%;
border-radius: 10px;
}
/* 视频样式 */
.chat-video {
max-width: 100%;
border-radius: 10px;
}
</style>
抖音无限下滑视频功能
<template>
<div class="testsw">
<div class="container" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag" @mouseleave="stopDrag"
@touchstart="startDrag" @touchend="stopDrag" @touchmove="drag"
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
<div v-for="(box, index) in boxes" :key="index" class="box"
:style="{ top: box.top + 'px', backgroundColor: box.color, width: boxWidth + 'px', height: boxHeight + 'px' }">
<video ref="videos" class="videoone" :src="videonum[index]" preload="true" loop
x5-video-player-type="h5-page" x5-video-player-fullscreen="false" webkit-playsinline="true"
x5-playsinline="true" playsinline="true">
<p>您的浏览器不支持 video 标签。</p>
</video>
</div>
</div>
</div>
</template>
<script>
import oneImg from '@/assets/one.mp4';
import twoImg from '@/assets/two.mp4';
import threeImg from '@/assets/three.mp4';
import fourImg from '@/assets/four.mp4';
export default {
data() {
return {
isDragging: false,
startY: 0,
currentY: 0,
boxWidth: 400,
activeIndex: null,
boxHeight: 800,
boxes: [],
videonum: [oneImg, twoImg, threeImg, fourImg],
};
},
created() {
this.boxes = [
{ color: "red", top: 0, boxtest: "推荐" },
{ color: "blue", top: 1 * this.boxHeight, boxtest: "直播" },
{ color: "yellow", top: 2 * this.boxHeight, boxtest: "关注" },
{ color: "pink", top: 3 * this.boxHeight, boxtest: "同城" },
];
},
mounted() {
this.updateVideoPlayback();
},
methods: {
startDrag(event) {
event.preventDefault();
this.isDragging = true;
this.startY = this.getEventClientY(event) - this.currentY;
},
stopDrag(event) {
event.preventDefault();
this.isDragging = false;
this.updateBoxPositionBasedOnCurrentY();
this.updateVideoPlayback();
},
drag(event) {
if (this.isDragging) {
let newY = this.getEventClientY(event) - this.startY;
newY = Math.max(-(this.boxHeight * (this.boxes.length - 1)), Math.min(newY, 0));
this.currentY = newY;
this.updateBoxesPosition();
}
},
getEventClientY(event) {
return event.type.startsWith("touch") ? event.touches[0].clientY : event.clientY;
},
updateBoxesPosition() {
this.boxes.forEach((box, index) => {
box.top = this.currentY + index * this.boxHeight;
});
},
updateBoxPositionBasedOnCurrentY() {
const nearestIndex = Math.round(Math.abs(this.currentY) / this.boxHeight);
this.currentY = -nearestIndex * this.boxHeight;
this.updateBoxesPosition();
},
updateVideoPlayback() {
this.$refs.videos.forEach((video, index) => {
const box = this.boxes[index];
const boxTop = box.top;
const boxBottom = boxTop + this.boxHeight;
const containerHeight = this.boxHeight;
// 如果视频盒子完全在视口内，播放视频，否则暂停
if (boxTop >= 0 && boxBottom <= containerHeight) {
video.play();
} else {
video.pause();
}
});
},
go(index) {
this.activeIndex = index;
const newY = -index * this.boxHeight;
this.currentY = newY;
this.updateBoxesPosition();
this.updateVideoPlayback();
},
},
};
</script>
<style scoped>
.videoone {
display: block;
z-index: 10;
width: 100%;
height: 100%;
object-fit: cover;
}
.container {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.box {
position: absolute;
transition: top 0.3s ease;
}
</style>
抖音视频播放界面（左右滑动切换直播推荐 上下滑动切换视频）
<template>
<div class="testsw">
<!-- 显示当前的X位置、起始位置以及是否正在拖动的状态 -->
<p>current: {{ currentX }}</p>
<p>start: {{ startX }}</p>
<p>isDragging: {{ isDragging }}</p>
<ul ref="ul" class="nav-list">
<li @click="go(index)" v-for="(box, index) in boxes" :key="index" :class="{ active: activeIndex === index }">
{{ box.boxtest }}
</li>
</ul>
<!-- 容器div，包含鼠标和触摸事件监听 -->
<div class="container" @mousedown="startDrag" @mouseup="stopDrag" @mousemove="drag" @mouseleave="stopDrag"
@touchstart="startDrag" @touchend="stopDrag" @touchmove="drag"
:style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
<!-- 循环渲染每个box，设置样式 -->
<div v-for="( box, index ) in boxes " :key="index" class="box"
:style="{ left: box.left + 'px', backgroundColor: box.color, width: boxWidth + 'px', height: boxHeight + 'px' }">
<shi-ping v-if="index % 2 === 0"></shi-ping> <!-- 偶数索引使用 ShiPing -->
<shi-ping-one v-else></shi-ping-one> <!-- 奇数索引使用 ShiPingOne -->
</div>
</div>
</div>
</template>
<script>
import ShiPing from '../components/shiping.vue';
import ShiPingOne from '../components/shipingone.vue';
export default {
data() {
return {
isDragging: false, // 是否正在拖动的标志
startX: 0, // 拖动的起始X位置
currentX: 0, // 当前的X位置
boxWidth: 400, // 每个box的宽度
activeIndex: null, // 当前被点击的li索引
boxHeight: 800,
boxes: [
] // box的数据，包括颜色和左边距
};
},
components: {
ShiPing,
ShiPingOne
},
created() {
// 初始化 boxes 的数据，包括颜色和左边距
this.boxes = [
{ color: "red", left: 0, boxtest: "推荐" },
{ color: "blue", left: this.boxWidth, boxtest: "直播" },
{ color: "yellow", left: 2 * this.boxWidth, boxtest: "关注" },
{ color: "pink", left: 3 * this.boxWidth, boxtest: "同城" },
];
},
methods: {
startDrag(event) {
event.preventDefault();
this.isDragging = true;
this.startX = this.getEventClientX(event) - this.currentX;
},
stopDrag(event) {
event.preventDefault();
this.isDragging = false;
this.updateBoxPositionBasedOnCurrentX();
},
drag(event) {
if (this.isDragging) {
let newX = this.getEventClientX(event) - this.startX;
newX = Math.max(-(this.boxWidth * (this.boxes.length - 1)), Math.min(newX, 0));
this.currentX = newX;
this.updateBoxesPosition();
this.updateLiPosition();
}
},
getEventClientX(event) {
return event.type.startsWith("touch") ? event.touches[0].clientX : event.clientX;
},
updateBoxesPosition() {
this.boxes.forEach((box, index) => {
box.left = this.currentX + index * this.boxWidth;
});
},
updateBoxPositionBasedOnCurrentX() {
const nearestIndex = Math.round(Math.abs(this.currentX) / this.boxWidth);
this.currentX = -nearestIndex * this.boxWidth;
this.updateBoxesPosition();
this.updateLiPosition();
},
updateLiPosition() {
const ul = this.$refs.ul;
const lis = ul.querySelectorAll('li');
lis.forEach((li, index) => {
const liWidth = li.offsetWidth;
const boxLeft = this.currentX + index * this.boxWidth;
li.style.transform = `translateX(${boxLeft}px)`;
});
},
go(index) {
this.activeIndex = index;
const newX = -index * this.boxWidth;
this.currentX = newX;
this.updateBoxesPosition();
this.updateLiPosition();
},
}
};
</script>
<style scoped>
/* 去掉li前面的黑点 */
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
/* 使用flex布局 */
overflow: hidden;
/* 隐藏溢出部分 */
width: 100%;
/* ul宽度 */
}
/* 横向排列li */
.nav-list {
display: flex;
/* 使用flex布局 */
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 8px;
/* 可选：为每个li元素添加间距 */
white-space: nowrap;
/* 确保文本不换行 */
cursor: pointer;
/* 添加鼠标手型指示 */
padding: 6px;
/* 为li添加内边距 */
transition: transform 0.3s ease;
/* 位置变化的过渡效果 */
}
/* 被点击的li的样式 */
li.active {
font-weight: bold;
color: red;
/* 可自定义为你想要的颜色 */
text-decoration: underline;
/* 添加下划线 */
border-bottom: 2px solid red;
/* 可选：为active状态添加下边框 */
}
.container {
display: flex;
/* 使用flex布局 */
position: relative;
/* 相对定位 */
overflow: hidden;
/* 隐藏溢出部分 */
}
.box {
position: absolute;
/* 绝对定位 */
transition: left 0.3s ease;
/* 位置变化的过渡效果 */
}
</style>
抖音菜单栏的出现
<template>
<div class="sex">
<caidan :style="caidancss"></caidan>
<div :style="boxvideocss">
<button @click="showcaidanone">show</button>
</div>
</div>
</template>
<script>
import caidan from '../components/caidan.vue';
export default {
data() {
return {
caidanone: "caidanone",
caidancss: {
position: 'absolute',
right: '400px',
bottom: '0px',
transition: 'right 0.5s ease' /* 控制位置变化的动画 */
},
boxvideocss: {
width: '400px',
height: '800px',
backgroundColor: 'blue',
transform: 'translateX(0px)',
overflow: 'hidden',
transition: 'transform 0.5s ease' /* 控制位置变化的动画 */
}
};
},
components: {
caidan
},
methods: {
showcaidan() {
this.caidanone = this.caidanone === "caidanone" ? "caidantwo" : "caidanone";
},
showcaidanone() {
// 更新 caidancss 的位置
this.caidancss.right = this.caidancss.right === "400px" ? "200px" : "400px";
// 使用 Vue 的 $set 方法来触发响应式系统检测到 transform 属性变化
this.$set(this.boxvideocss, 'transform', this.boxvideocss.transform === "translateX(0px)" ? "translateX(200px)" : "translateX(0px)");
}
}
};
</script>
<style scoped>
.sex {
width: 400px;
height: 800px;
overflow: hidden;
}
.caidanone {
position: absolute;
right: 400px;
bottom: 0px;
}
.caidantwo {
position: absolute;
right: 200px;
bottom: 0px;
}
.boxvideo {
width: 400px;
height: 800px;
background-color: blue;
overflow: hidden;
position: relative;
}
</style>
无限滚动效果
前端每次最多加载20条数据 再往下滑动就会再次请求后端20条数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无限滚动示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
padding: 20px;
}
.item {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 10px;
}
.loading {
text-align: center;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<div class="container" id="container">
<div id="item-container">
<!-- 内容项将会被加载到这里 -->
</div>
<div class="loading" id="loading">加载中...</div>
</div>
<script>
let currentPage = 1;
const pageSize = 20; // 每次加载 20 条数据
let loading = false; // 防止多次加载
function getCommentList(params) {
return fetch(`http://localhost:3000/api/items?page=${params.currentPage}&pageSize=${params.pageSize}`)
.then(response => response.json());
}
function loadMoreItems() {
if (loading) return; // 防止重复加载
loading = true;
// 显示加载提示
document.getElementById('loading').style.display = 'block';
getCommentList({ currentPage, pageSize }).then(response => {
if (response.data.length === 0) {
document.getElementById('loading').innerText = '没有更多内容了';
return;
}
const container = document.getElementById('item-container');
response.data.forEach(item => {
const div = document.createElement('div');
div.className = 'item';
div.textContent = item;
container.appendChild(div);
});
currentPage++;
loading = false; // 允许再次加载
document.getElementById('loading').style.display = 'none';
}).catch(error => {
console.error('加载数据失败:', error);
loading = false; // 允许再次加载
document.getElementById('loading').style.display = 'none';
});
}
function handleScroll() {
const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
if (scrollTop + clientHeight >= scrollHeight - 10) {
loadMoreItems();
}
}
window.addEventListener('scroll', handleScroll);
// 初始化加载
loadMoreItems();
</script>
</body>
</html>后端（node.js)准备了1000条数据 等待前端的分页查询请求
const express = require("express");
const cors = require("cors"); // 引入 CORS 中间件
const app = express();
const port = 3000;
app.use(cors()); // 使用 CORS 中间件
app.use(express.json());
// 模拟的数据库数据
const items = Array.from({ length: 1000 }, (_, i) => `内容项 ${i + 1}`);
// 获取分页数据的接口
app.get("/api/items", (req, res) => {
const page = parseInt(req.query.page) || 1;
const pageSize = parseInt(req.query.pageSize) || 5;
const start = (page - 1) * pageSize;
const end = start + pageSize;
const result = items.slice(start, end);
res.json({
data: result,
current: page,
size: pageSize,
total: items.length,
});
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
移动端开发基础
流式布局
弹性盒子
子元素随着父元素自动缩小
<template>
<div class="box">
<div class="box1 yangshi"></div>
<div class="box2 yangshi"></div>
<div class="box3 yangshi"></div>
</div>
</template>
<style scoped>
.box {
display: flex;
width: 200px;
height: 200px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.1);
}
.yangshi {
width: 200px;
height: 200px;
background-color: red;
margin: 10px;
flex-wrap: nowrap;
/* 不允许缩小 */
}
</style>flex布局失效的情况
技巧
转换和动画
2d转换
transition 给元素变化增加过度效果
三角形
不影响其他盒子
动画
透明度
背景
小案例
字体编辑
文字垂直居中
文字换行
文字的下划线编辑
文字不可被选择
学成在线案例
链接标签
表格
盒子模型
画圆和三角形
元素显示模式（块元素 行内元素）
浮动
浮动-清除浮动
、
定位
背景色渐变
元素的显示与隐藏
vh单位
如何限制vh或者vm的最大值和最小值
移动端适配rem
媒体查询@media
less
rem适配
rem的写法注意事项
bootstrap和响应式布局（类似elementui）
end：之前学的杂七杂八的
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
