JS题目8-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_88624699/article/details/145660505

题八：滚动弹幕

要求：

1.页面上漂浮字体大小不一、颜色不一，从左向右滚动的弹幕；

2.底部中间有一个发送功能，可以发送新的弹幕；

3.底部的发送部分可以向下收起和弹出。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

margin: 0;

padding: 0;

}

.n1{

width: 70%;

background-color: black;

height: 500px;

}

.n2{

width: 100%;

height: 100px;

}

.content{

margin-left: 300px;

}

input{

width: 50%;

height: 30px;

background-color: rgb(29, 228, 66);

}

.btn{

height: 34px;

width: 100px;

margin-top: 3px;

margin-left: -5px;

background-color: rgb(5, 228, 91);

}

</style>

<body>

</div>

const body = document.querySelector('.n1');

const btnObj = document.querySelector('#btn');

const textObj = document.querySelector('#text');

btnObj.onclick = function () {

const ranColor = '#' + Math.random().toString(16).slice(-6);

const ranTop = parseInt(Math.random() * 400);

const spanObj = document.createElement('span');

spanObj.style.color = ranColor;

spanObj.style.top = ranTop + 'px';

spanObj.style.left = 1500 + 'px';

const textObjval = textObj.value;

spanObj.innerHTML = textObjval;

body.appendChild(spanObj);

const timer = setInterval(() => {

spanObj.style.left = spanObj.offsetLeft - 10 + 'px';

if (spanObj.offsetLeft <= -10) {

clearInterval(timer);

spanObj.remove();

}

}, 30);

}

textObj.addEventListener('keyup', function (event) {

let e = event || window.event;

if (e.keyCode == 13) {

btnObj.onclick();

}

});

</script>

</body>

</html>