jQuery-弹幕

最新推荐文章于 2023-01-13 22:32:11 发布

AsaZyf

最新推荐文章于 2023-01-13 22:32:11 发布

阅读量243

点赞数

CC 4.0 BY-SA版权

分类专栏：实用文章标签：弹幕简单粗暴

本文链接：https://blog.youkuaiyun.com/AsaZyf/article/details/80904852

实用同时被 2 个专栏收录

43 篇文章

订阅专栏

jQuery初级

11 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了基本的弹幕显示功能。用户可以在输入框中输入文字并通过按钮发送，文字将以滚动形式显示在指定区域。此外还提供了一个清空当前显示弹幕的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该方法可能有bug，毕竟简单粗暴

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

.video {
margin: 50px auto 10px auto;
width: 500px;
height: 500px;
border: 1px solid pink;
}

.btn {
width: 40px;
height: 25px;
background: #26d4bd;
color: #fff;
border: none;
outline: none;
}
.active{
width: 65px;
background: red;
}
.box{
margin: 0px auto;
width: 500px;
height: 500px;
}
</style>
</head>

<body>
<div class="video" id="video"></div>
<div class="box">
<input type="text" id="text"/> <button type="button" id="btn" class="btn">发送</button>
<button type="button" id="clear" class="btn active">清空弹幕</button>
</div>

<script>
$("#btn").click(function(){
$("#video").append('<marquee behavior="scroll" direction="left" loop="1" scrollamount="100" scrolldelay="500">'+$("#text").val()+'</marquee>')
$("#text").val("")
})

$("#clear").click(function(){
$("#video").empty()
})
</script>
</body>

</html>