与之前相比添加了暂停和开始和隔一段时间才能发送功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 500px;
margin: 40px auto;
}
.box_top {
width: 800px;
height: 465px;
overflow: hidden;
position: relative;
}
.box_top img {
width: 100%;
height: 100%;
}
.box_bottom {
width: 800px;
height: 35px;
}
.box_bottom .content {
width: 696px;
line-height: 35px;
float: left;
font-size: 18px;
}
.box_bottom button {
width: 100px;
line-height: 35px;
float: right;
}
span {
position: absolute;
white-space: nowrap;
font-size: 18px;
}
</style>
</head>
<body>
<button class="pause">暂停</button>
<button class="start">开始</button>
<div class="box">
<div class="box_top">
<img src="../img/t4.jpg" alt="">
</div>
<div class="box_bottom">
<input class="content">
<button id="btn">发送</button>
</div>
</div>
</body>
<script>
var box_top = document.getElementsByClassName('box_top')[0];
var content = document.getElementsByClassName("content")[0];
var pause = document.getElementsByClassName("pause")[0];
var start = document.getElementsByClassName("start")[0];
var btn = document.getElementById('btn')
var timer;
var timer1;
var count =3;
btn.onclick = function () {
var creatSpan = document.createElement("span");
box_top.appendChild(creatSpan)
creatSpan.innerHTML = content.value;
var maxHeight = box_top.clientHeight - creatSpan.clientHeight;
var rightStart = creatSpan.clientWidth;
creatSpan.style.right = -rightStart + 'px';
creatSpan.style.color = `rgb(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)})`
var randomHeight = Math.round(Math.random() * maxHeight);
creatSpan.style.top = randomHeight + 'px';
move(creatSpan, "left", -rightStart);
getDisable(btn);
}
pause.onclick = function () {
if(count){
clearInterval(timer1)
btn.innerHTML = '发送';
count =3;
btn.disabled = true;
}
var spansList = document.querySelectorAll('span');
for (let i = 0; i < spansList.length; i++) {
clearInterval(spansList[i].timer);
}
}
start.onclick = function () {
btn.disabled = false;
var spansList = document.querySelectorAll('span');
for (let i = 0; i < spansList.length; i++) {
clearInterval(spansList[i].timer);
var rightStart = spansList[i].clientWidth;
move(spansList[i], "left", -rightStart);
}
}
function move(ele, attr, end) {
var speed = 0;
var start = parseFloat(getStyle(ele, attr));
console.log(start)
ele.timer = setInterval(function () {
end = parseFloat(end)
speed = (end - start) / 20;
console.log(speed)
ele.style[attr] = parseFloat(getStyle(ele, attr)) + speed + 'px';
if (parseFloat(getStyle(ele, attr)) <= end) {
ele.style[attr] = end + 'px';
clearInterval(ele.timer);
}
},200)
}
function getDisable(ele) {
ele.disabled = true;
timer1 = setInterval(function () {
count--;
ele.innerHTML = `还有${count}秒可发送`
if (count == 0) {
ele.disabled = false;
ele.innerHTML = '发送';
count =3;
clearInterval(timer1)
}
}, 1000)
}
function getStyle(ele, attr) {
if (window.getComputedStyle) {
return getComputedStyle(ele)[attr];
} else {
return ele.currentStyle[attr];
}
}
</script>
</html>