一、笔记
二、弹幕案例
效果：
js+循环定时器setInterval() 实现弹幕效果
代码：
<!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;
}
body {
/* 超出隐藏 */
overflow: hidden;
}
</style>
</head>
<body>
<input type="text" id="words">
<input type="button" value="Go" id="btn">
<script>
// 获取元素
var ipt = document.querySelector('#words')
var btn = document.querySelector('#btn')
// 获取视口宽高(即可随着窗口大小改变而变化)
var left = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
// 给按钮绑定事件
btn.onclick = function () {
// 创建节点
var span = document.createElement('span')
// 赋值
span.textContent = ipt.value;
// 清空input框(为了便于演示这里隐去了)
// ipt.value = '';
// 设置新增节点的位置等样式
// 绝对定位(为了不影响页面原来元素，使用层级布局)
span.style.position = 'absolute'
// left
span.style.left = left + 'px';
// height
span.style.top = (Math.random() * (height - ipt.clientHeight) + ipt.clientHeight) + 'px';
// 使文本不换行
span.style.whiteSpace = 'nowrap'
// 挂载
document.body.append(span)
// 用循环定时器循环左移--20ms向左移动10px
var timer = setInterval(function () {
// 当节点循环左出后删除其循环定时器
if (parseInt(span.style.left) < -span.offsetWidth) {
clearInterval(timer)
}
span.style.left = (parseInt(span.style.left) - 10) + 'px'
}, 20)
}
</script>
</body>
</html>