个人博客弹幕留言板

已于 2024-08-26 14:19:31 修改
阅读量283 收藏 3
点赞数 9
分类专栏： 前端案例 文章标签： html javascript
于 2024-08-07 16:10:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76380626/article/details/140962724
版权

目录

1.准备元素与样式

2.渲染弹幕

3.开启弹幕运动

4.生成轨道，控制弹幕纵向位置

5.分批渲染

6.控制每条轨道分配弹幕的间隔

7.设置每个弹幕的颜色与时间

 总结:

1.准备元素与样式

<div class="container"></div>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 100vw;
            height: 100vh;
            background-image: url(https://pic4.zhimg.com/v2-17ec8cd47fa9fcf0b2d1094c5741c7d7_r.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        .bullet {
            position: absolute;
            top: 0;
            z-index: 100;
            color: #fff;
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 25px;
            padding-right: 10px;
            white-space: nowrap;
            cursor: pointer;
        }
        .bullet:hover {
            animation-play-state: paused;
            box-shadow: 0px 0px 15px #fff;
            transition: all 0.5s;
        }
        .nickname {
            margin-left: 5px;
            margin-right: 5px;
            font-weight: 700;
        }
        .bullet-waiting {
            left: 100%;
        }
        .bullet-done {
            left: 0%;
            transform: translateX(-100%);
        }
        .bullet-running {
            animation: run 5s linear;
        }
        @keyframes run {
            from {
            left: 100%;
            transform: translateX(0);
            }
            to {
            left: 0%;
            transform: translateX(-100%);
            }
        }
        .bullet img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

2.渲染弹幕

// 弹幕数据
        const bulletData = [
            {   id: 1,
                nickname: '小王',
                content: '你cscscscscscscscscscsc好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 2,
                nickname: '小李',
                content: '你好cscscscscscscc666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 3,
                nickname: '小红',
                content: 'Arecc you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 4,
                nickname: '小张',
                content: '你cscscscsc好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 5,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            },
            {   id: 6,
                nickname: '小王',
                content: '你好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 7,
                nickname: '小李',
                content: '你好666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 8,
                nickname: '小红',
                content: 'Are you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 9,
                nickname: '小张',
                content: '你好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 10,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            },
            {   id: 11,
                nickname: '小王',
                content: '你好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 12,
                nickname: '小李',
                content: '你好666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 13,
                nickname: '小红',
                content: 'Are you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 14,
                nickname: '小张',
                content: '你好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 15,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            },
            {   id: 16,
                nickname: '小王',
                content: '你好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 17,
                nickname: '小李',
                content: '你好666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 18,
                nickname: '小红',
                content: 'Are you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 19,
                nickname: '小张',
                content: '你好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 20,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            }
        ]

// 添加弹幕
        function createMessage() {
            const container = document.querySelector(".container")
                bulletData.forEach(message => {
                    
                    container.innerHTML += `
                        <div
                            id="${message.id}"
                            class="bullet-${message.status} bullet"
                        >
                            <div class="avatar">
                            <img src="${message.avatar}" alt="" />
                            </div>
                            <div class="nickname">${ message.nickname }:</div>
                            <div class="content">${ message.content }</div>
                        </div>` 
                })
        }
        createMessage()

3.开启弹幕运动

这里使用的css关键帧动画，为每个bullet元素添加对应的类名，来控制其对应的显示状态

        // 开启弹幕运动
        function startMessage(item) {
            const bullet = document.getElementById(item.id)
            bullet.classList.remove("bullet-waiting")
            bullet.classList.add("bullet-running")
            // 监听元素的动画结束事件
            bullet.addEventListener("animationend", () => {
                bullet.classList.remove("bullet-running")
                bullet.classList.add("bullet-done")
                // 一秒后重新添加弹幕
                setTimeout(() => {
                    bullet.classList.remove("bullet-done")
                    bullet.classList.add("bullet-waiting")
                    startMessage(item)
                })
            })
        }

这个函数可以开启磨一个弹幕的运动，由于页面上的弹幕众多，我们首次渲染是需要分次开启运动状态。

4.生成轨道，控制弹幕纵向位置

这里为了分清楚一次性最多添加多少弹幕以及弹幕的纵向位置，我们生成一个轨道数组，用于存放当前页面的轨道信息，每一项保存轨道位置和当前轨道状态。

// 每条轨道高度
        const trackHeight = 70

        // 轨道数据
        const trackData = []

        // 生成轨道
        function createTrack() {
            const container = document.querySelector(".container")
            // 计算轨道数量
            const trackCount = Math.floor(container.clientHeight / trackHeight)
            // 生成轨道数据
            for(let i = 0 ; i < trackCount ; i++) {
                trackData.push({
                    offset: i,
                    disabled: false
                })
            }
        }
        createTrack()

我们再编写一个为元素分配轨道的函数，其中每次分配后将本次轨道禁用，一定时间后重新开启轨道，这样在首次渲染时就不会有多个弹幕挤在同一轨道了。

        // 分配轨道
        function assignTrack(item) {
            // 获取可用轨道
            const availableTrack = trackData.filter(track => !track.disabled)
            // 随机获取一个可用轨道
            console.log(availableTrack);
            const index = Math.floor(Math.random() * availableTrack.length)
            const track = availableTrack[index]
            
            // 分配轨道
            item.track = track
            // 禁用轨道
            track.disabled = true
            setTimeout(() => {
                track.disabled = false
            },100)
        }

我们在开启弹幕的函数中调用分配轨道函数

       // 开启弹幕运动
        function startMessage(item) {
            // 分配轨道
            assignTrack(item)
            const bullet = document.getElementById(item.id)
            bullet.classList.remove("bullet-waiting")
            bullet.classList.add("bullet-running")
            bullet.style.top = `${item.track.offset * trackHeight}px`
            // 监听元素的动画结束事件
            bullet.addEventListener("animationend", () => {
                bullet.classList.remove("bullet-running")
                bullet.classList.add("bullet-done")
                // 一秒后重新添加弹幕
                setTimeout(() => {
                    bullet.classList.remove("bullet-done")
                    bullet.classList.add("bullet-waiting")
                    startMessage(item)
                })
            })
        }

5.分批渲染

由于弹幕数量原因，我们通过一个函数来分批渲染，每次渲染最大数量为当前轨道数。

// 分批渲染
        function startAllMessage() {
            // 批量添加弹幕
            for(let i = 0 ; i < trackData.length; i++) {
                const start = i * trackData.length
                const end = start + trackData.length
                const data = bulletData.slice(start,end)
                setTimeout(() => {
                    data.forEach((item) => startMessage(item))
            }, 1000 * i)
            }
        }
        startAllMessage()

6.控制每条轨道分配弹幕的间隔

比如当第一批弹幕渲染之后，由于弹幕的长度不一，轨道禁止使用的时长也是不同的。因此我们为了下一次渲染弹幕优先寻找已经完全空闲的轨道，我们需要动态计算当前轨道禁用的时长。我们假设当前弹幕运动时间为5s(后续会动态改变每个弹幕的运动时间，以此来改变速度），弹幕的运动速度=（页面宽度 + 弹幕本身宽度）/ 运动时间，所以弹幕全完进入页面耗时=弹幕自身长度 / 运动速度，以此我们计算出了弹幕全完进入页面所需要的时间，这这段时间内此弹幕都是用的轨道需要开启禁用状态。

代码如下：

        // 分配轨道
        function assignTrack(item) {
            // 获取可用轨道
            const availableTrack = trackData.filter(track => !track.disabled)
            // 随机获取一个可用轨道
            console.log(availableTrack);
            const index = Math.floor(Math.random() * availableTrack.length)
            const track = availableTrack[index]
            
            // 分配轨道
            item.track = track
            // 计算弹幕进入页面所用时间
            const w1 = document.querySelector(".container").clientWidth
            const w2 = document.getElementById(item.id).clientWidth
            const time = (w2 / (w1 +w2))*5*1000

            // 禁用轨道
            track.disabled = true
            setTimeout(() => {
                track.disabled = false
            },time )
        }

7.设置每个弹幕的颜色与时间

通过随机数生成每个弹幕元素的动画时间，使用hsl通过一个随机角度值来随机生成弹幕颜色。

 // 生成弹幕随机运动时间
item.duration = Math.floor(Math.random() * 15) + 10
bullet.style.animationDuration = `${item.duration}s`
// 生成随机颜色
const deg = Math.floor(Math.random() * 360)
bullet.style.color = `hsl(${deg}, 100%, 50%)`

 总结:

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 100vw;
            height: 100vh;
            background-image: url(https://pic4.zhimg.com/v2-17ec8cd47fa9fcf0b2d1094c5741c7d7_r.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        .bullet {
            position: absolute;
            top: 0;
            z-index: 100;
            color: #fff;
            display: flex;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 25px;
            padding-right: 10px;
            white-space: nowrap;
            cursor: pointer;
        }
        .bullet:hover {
            animation-play-state: paused;
            box-shadow: 0px 0px 15px #fff;
            transition: all 0.5s;
        }
        .nickname {
            margin-left: 5px;
            margin-right: 5px;
            font-weight: 700;
        }
        .bullet-waiting {
            left: 100%;
        }
        .bullet-done {
            left: 0%;
            transform: translateX(-100%);
        }
        .bullet-running {
            animation: run 5s linear;
        }
        @keyframes run {
            from {
            left: 100%;
            transform: translateX(0);
            }
            to {
            left: 0%;
            transform: translateX(-100%);
            }
        }
        .bullet img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

    </style>
</head>
<body>
    <div class="container"></div>

    <script>
        // 弹幕数据
        const bulletData = [
            {   id: 1,
                nickname: '小王',
                content: '你cscscscscscscscscscsc好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 2,
                nickname: '小李',
                content: '你好cscscscscscscc666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 3,
                nickname: '小红',
                content: 'Arecc you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 4,
                nickname: '小张',
                content: '你cscscscsc好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 5,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            },
            {   id: 6,
                nickname: '小王',
                content: '你好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 7,
                nickname: '小李',
                content: '你好666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 8,
                nickname: '小红',
                content: 'Are you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 9,
                nickname: '小张',
                content: '你好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 10,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            },
            {   id: 11,
                nickname: '小王',
                content: '你好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 12,
                nickname: '小李',
                content: '你好666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 13,
                nickname: '小红',
                content: 'Are you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 14,
                nickname: '小张',
                content: '你好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 15,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            },
            {   id: 16,
                nickname: '小王',
                content: '你好',
                avatar: "https://q2.itc.cn/q_70/images03/20240320/3df8c75302424a05864e62215a548e28.jpeg",
                status: "waiting"
            },
            {   id: 17,
                nickname: '小李',
                content: '你好666',
                avatar: "https://q4.itc.cn/q_70/images03/20240320/50c0867b3ae84ee88082ac4cef647a4d.jpeg",
                status: "waiting"
            },
            {   id: 18,
                nickname: '小红',
                content: 'Are you ok ?',
                avatar: "https://q0.itc.cn/q_70/images03/20240320/688db9e4a3fd44fabdaa1e5d1a6f07c4.jpeg",
                status: "waiting"
            },
            {   id: 19,
                nickname: '小张',
                content: '你好xasxaxax',
                avatar: "https://q1.itc.cn/q_70/images03/20240320/24386ce5c85b4742a9a74d2e57f498ea.jpeg",
                status: "waiting"
            },
            {   id: 20,
                nickname: '小刘',
                content: '你好发达按时吃撒参数擦拭擦拭擦擦',
                avatar: "https://q8.itc.cn/q_70/images03/20240320/cef5cfa10c0b42348dabf346d8c7eedb.jpeg",
                status: "waiting"
            }
        ]
        
        // 每条轨道高度
        const trackHeight = 70

        // 轨道数据
        const trackData = []

        // 生成轨道
        function createTrack() {
            const container = document.querySelector(".container")
            // 计算轨道数量
            const trackCount = Math.floor(container.clientHeight / trackHeight)
            // 生成轨道数据
            for(let i = 0 ; i < trackCount ; i++) {
                trackData.push({
                    offset: i,
                    disabled: false
                })
            }
        }
        createTrack()
        // 分配轨道
        function assignTrack(item) {
            // 获取可用轨道
            const availableTrack = trackData.filter(track => !track.disabled)
            // 随机获取一个可用轨道
            console.log(availableTrack);
            const index = Math.floor(Math.random() * availableTrack.length)
            const track = availableTrack[index]
            
            // 分配轨道
            item.track = track
            // 计算弹幕进入页面所用时间
            const w1 = document.querySelector(".container").clientWidth
            const w2 = document.getElementById(item.id).clientWidth
            const time = (w2 / (w1 +w2))*5*1000

            // 禁用轨道
            track.disabled = true
            setTimeout(() => {
                track.disabled = false
            },time )
        }
        // 添加弹幕
        function createMessage() {
            const container = document.querySelector(".container")
                bulletData.forEach(message => {
                    
                    container.innerHTML += `
                        <div
                            id="${message.id}"
                            class="bullet-${message.status} bullet"
                        >
                            <div class="avatar">
                            <img src="${message.avatar}" alt="" />
                            </div>
                            <div class="nickname">${ message.nickname }:</div>
                            <div class="content">${ message.content }</div>
                        </div>` 
                })
        }
        createMessage()

        // 开启弹幕运动
        function startMessage(item) {
            // 分配轨道
            assignTrack(item)
            const bullet = document.getElementById(item.id)
            bullet.classList.remove("bullet-waiting")
            bullet.classList.add("bullet-running")
            bullet.style.top = `${item.track.offset * trackHeight}px`
             // 生成弹幕随机运动时间
            item.duration = Math.floor(Math.random() * 15) + 10
            bullet.style.animationDuration = `${item.duration}s`
            // 生成随机颜色
            const deg = Math.floor(Math.random() * 360)
            bullet.style.color = `hsl(${deg}, 100%, 50%)`
            // 监听元素的动画结束事件
            bullet.addEventListener("animationend", () => {
                bullet.classList.remove("bullet-running")
                bullet.classList.add("bullet-done")
                // 一秒后重新添加弹幕
                setTimeout(() => {
                    bullet.classList.remove("bullet-done")
                    bullet.classList.add("bullet-waiting")
                    startMessage(item)
                })
            })
        }
        
        // 分批渲染
        function startAllMessage() {
            // 批量添加弹幕
            for(let i = 0 ; i < trackData.length; i++) {
                const start = i * trackData.length
                const end = start + trackData.length
                const data = bulletData.slice(start,end)
                setTimeout(() => {
                    data.forEach((item) => startMessage(item))
            }, 1000 * i)
            }
        }
        startAllMessage()

       
    </script>
</body>
</html>

DT——
关注
专栏目录
用HTML+CSS+JS实现一个简单的弹幕滚动留言板
猿小白的博客
10-28 917
【代码】用HTML+CSS+JS实现一个弹幕滚动留言板。
vue个人博客弹幕效果
m0_64787068的博客
10-30 530
展示。
哔哩哔哩弹幕视频网 -- bilibili 和 AcFun弹幕视频网 - 的 介绍
isuker的博客
04-16 2万+
哔哩哔哩弹幕视频网 - ( ゜- ゜)つロ 乾杯~ - bilibili http://www.bilibili.com/       bilibili是中国大陆一个动画、游戏相关的弹幕视频分享网站，也被称为哔哩哔哩、B站，其前身为视频分享网站Mikufans。该网站由原AcFun网友“⑨bishi”于2009年6月26日创建。由于AcFun网站在运行时往往不稳定，所以Mikufa
11.6k star! 超简单，推荐一款完全免费、开源快速搭建个人博客网站的系统
专注JAVA、算法、数据库等干货分享，同时维护【IT技术资源免费分享】圈子
06-25 1085
推荐一款完全免费、可快手上手搭建个人博客网站的系统
基于SpringBoot + Vue的个人博客
qq_46706269的博客
09-14 3186
基于Springboot + Vue 开发的前后端分离博客在线地址|目录结构|项目特点|技术介绍|运行环境|开发环境|项目截图|快速开始|注意事项|项目总结|交流群接入QQ、微博、Gitee、Github第三方登录自己花了大概三个多月的时间写完这个项目，经历各种Bug以及项目部署，总得来说太不容易了。X1192176811 (风丶宇)RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统。
个人博客——添加评论区样式和评论回复
qq_51946037的博客
09-17 484
添加评论区样式和评论回复功能
【超萌二次元动漫个人主页HTML源码】
孤客科技
04-21 1258
超萌二次元动漫个人主页HTML源码，值得拥有！
怎么做前后端分离的个人博客，内部还有仿网易云音乐模块？点进便知！（基于Vue，Springboot+mybatisplus+SpringCloud+ElasticSearch等框架实现）
热门推荐
Dlihctcefrep的博客
02-03 7万+
怎么做前后端分离的个人博客，内部还有仿网易云音乐模块？点进便知！（基于Vue，Springboot+mybatisplus+SpringCloud+ElasticSearch等框架实现）功能有博客展示，博客分类、标签管理，留言墙、查询博客，发布博客（markdown编辑器）等功能
hexo（butterfly）添加说说页面（Artitalk可在线发布）
cungudafa的博客
05-06 6822
文章目录一、前言二、我设置的记录参考1.申请leancloud国际版账号2.后台配置3.博客配置三、使用方法1. 输入内容2.输入密码3.发布说说、心情4.功能畅想四、更多 一、前言 之前有写一篇文章是如何在个人网站配置手写说说页面，这是我从drew叔 那搬运过来的，大家一直催问可不可以在线发布，终于drew叔动手了。 我看着他从leadcloud后台鼓捣到gtalk后台，再到leadcloud国...
web前端期末大作业(我的家乡广安网页设计与制作)HTML+CSS网页设计实例 企业网站制作
专注于dreamweaver网页设计制作
08-11 367
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
直播新玩法背后的音视频技术演进
LiveVideoStack
12-27 1515
点击上方“LiveVideoStack”关注我们近年来，直播改变了许多行业模式，其形态在不断的演进中也逐渐丰富起来。直播在字节跳动中衍生出了KTV歌房、直播答题、互动游戏、电商拍卖及企业直...
半年也没学会C语言，编程真的需要天赋么？
Hsuesh的博客
02-24 608
最近在知乎上看到了一个很有趣的问题，题目叫做：编程学习真的需要天赋吗? 提问题的题主说自己花了半年的时间硬啃C primer plus，结果看到链表的时候就再也看不下去了。然后又看算法导论，看得头疼欲裂。于是陷入了困惑，为什么同样是半年的时间，别人可以把基础的算法都学完，但是自己却一无所获呢，难道真的是天赋不行吗? 今天就和大家聊聊，希望能够帮助到大家。 不要通过啃书的方式入门 在我看来题主最大的问题可能不是天赋不够，而是选错了学习方法。 说起来不同的人有不同的方法，有些人喜欢看视频，有些人喜
html TAB切换按钮变色、自动生成table
TrueLink的博客
09-24 573
/ 为当前点击的按钮添加.active-tab类。/* 文本颜色变为白色，以便在蓝色背景上可见 */// 移除所有按钮的.active-tab类。/* 鼠标悬停时显示手指形状 */// 动态生成选项卡头部和内容。// 动态生成选项卡头部和内容。/* 选中时背景色变为蓝色 */// 默认显示第一个选项卡的内容。/* 增加内边距以便点击 */// 显示对应的选项卡内容。/* 初始背景色透明 *//* 添加一些间隔 */// 更多数据...// 更多数据.../* 简单的样式 */
HTML粉色烟花秀
兔子王
09-21 8111
HTML语言实现的粉红色跨年烟花秀的完整代码。
html TAB切换按钮变色、自动生成table--使用函数优化结构
TrueLink的博客
09-24 971
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 1px solid #ccc; padding: 1px
HTML中的padding和margin
最新发布
学无止境
09-27 700
作用增加元素内部的空间，使内容不显得过于拥挤。可以用来突出元素的重要性或增加视觉层次感。语法（分别对应上、右、下、左的内边距值为 10 像素和 20 像素）。也可以使用缩写形式，如（四个方向内边距均为 10 像素）。示例假设一个<div>元素，设置了，那么这个元素内部的内容与边框之间就会有 20 像素的距离。二、Margin（外边距）Margin 是指元素边框与相邻元素之间的距离。它用于控制元素之间的间隔。作用分隔不同的元素，使页面布局更加清晰。可以用来调整元素在页面中的位置。语法。
HTML元素居中
weixin_45596561的博客
09-23 455
⾏内元素⽔平垂直居中 设置⽗级标签。⽔平居中： text-align: center 垂直居中： line-height：盒⼦⾼度。绝对定位 + 四个方向 margin: auto。这三个需要一起用实现居中。
html博客弹幕留言板
06-09
您可以使用 JavaScript 和 Ajax 技术来实现一个简单的博客弹幕留言板。以下是一个简单的实现方式： 1.在您的 HTML 页面中添加一个文本框和一个按钮，用于输入留言和提交留言： ```html <input type="text" id="message-input"> <button id="submit-button">提交留言</button> ``` 2.在您的 HTML 页面中添加一个用于显示留言的区域： ```html <div id="message-list"></div> ``` 3.使用 JavaScript 和 Ajax 技术来处理提交留言和显示留言的逻辑。例如，当用户点击提交按钮时，您可以使用 Ajax 将留言发送到后端服务器并将其添加到留言列表中： ```javascript var messageInput = document.getElementById('message-input'); var submitButton = document.getElementById('submit-button'); var messageList = document.getElementById('message-list'); submitButton.addEventListener('click', function() { var message = messageInput.value; messageInput.value = ''; var xhr = new XMLHttpRequest(); xhr.open('POST', '/submit-message'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); var messageItem = document.createElement('div'); messageItem.textContent = response.message; messageList.appendChild(messageItem); } }; xhr.send(JSON.stringify({message: message})); }); ``` 4.您需要在后端服务器上实现一个接口，用于接收留言并将其保存到数据库中。具体实现方式取决于您使用的后端技术和数据库。 这是一个简单的示例，实际上，实现一个博客弹幕留言板需要考虑到许多方面，如数据安全性、用户身份验证等。希望这可以为您提供一些帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值