您的位置：首页 > Web前端 > JavaScript

Javascript实现的一个简单的弹幕效果-优化版

2017-09-13 01:03 741 查看

在上一篇文章中,弹幕的基本效果已经完成,这里主要是对一些内容的优化补充!

随机色

因为上一篇固定了颜色为红色,我想让每一次的颜色都随机显示所以可以封装一个函数,用来表示随机色;

随机高度

上一次高度固定为400,这一次可以修改成随机的top值

键盘的键入事件

当我按键盘上面的enter键时,自动触发click事件

function getColor() { //随机色函数
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
var str = '#';
var len = arr.length; for (var i = 0; i < 6; i++) {
var num = parseInt(Math.random() * len);
str += arr[num];
}
return str;
}

function getTop() { //随机高度
var randomY = parseInt(Math.random() * 400);
return randomY;
}

修改完成以后,完整的代码如下:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-family: "微软雅黑";
font-size: 62.5%;
}

.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

.idDom {
width: 100%;
height: 100px;
background: #666;
position: fixed;
bottom: 0px;
}

.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}

.title {
display: inline;
font-size: 4em;
vertical-align: bottom;
color: #fff;
}

.text {
border: none;
width: 300px;
height: 30px;
border-radius: 5px;
font-size: 2.4em;
}

.btn {
width: 60px;
height: 30px;
background: #f90000;
border: none;
color: #fff;
font-size: 2.4em;
}

span {
width: 300px;
height: 40px;
position: absolute;
overflow: hidden;
color: #000;
font-size: 4em;
line-height: 1.5em;
cursor: pointer;
white-space: nowrap;
}
</style>
</head>

<body>
<div class="boxDom" id="boxDom">
<div class="idDom" id="idDom">
<div class="content">
<p class="title">吐槽:</p>
<input type="text" class="text" id="text" />
<input type="button" class="btn" id="btn" value="发射">
</div>
</div>
</div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script>
function getColor() {
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
var str = '#';
var len = arr.length; for (var i = 0; i < 6; i++) {
var num = parseInt(Math.random() * len);
str += arr[num];
}
return str;
}

function getTop() {
var randomY = parseInt(Math.random() * 400);
return randomY;
}
$(function() {

var $txt = $('#text');

$('#btn').click(function() {

if ($txt.val().trim() === '') {
return;
}

$('<span></span>')
.text($txt.val())
.css({
color: getColor(),
left: $(window).width(),
top: getTop()
})
.animate({
left: -200
}, 10000, 'linear', function() {
$(this).remove();
})
.appendTo('#boxDom');

$txt.val('');
});

$('#text').keyup(function(e) {
if (e.keyCode === 13) {
$('#btn').click();
}
})
});
</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航