JavaScript 实现文字动态闪烁切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> :root { font-s...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
:root {
font-size: 15px;
}
.board {
background: black;
color: red;
display: inline-block;
padding: 10px;
border: 2px solid;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="board">
<span class="text"></span>
</div>
<script>
let board = document.querySelector('.board');
let text = board.querySelector('.text');
let arr = ['第一个', '第二个', '第三个', '第四个', '第五个'];
let current = 0;
text.textContent = arr[current];
boot();
function boot() {
startFlash();
}
function isVisible() {
return getComputedStyle(text).opacity != 0;
}
function toggleText() {
if (isVisible()) {
text.style.opacity = 0;
} else {
text.style.opacity = 1;
}
}
function toggleBorder() {
if (isVisible()) {
board.style.borderColor = 'transparent';
} else {
board.style.borderColor = 'inherit';
}
}
function toggleArr() {
if (!isVisible()) {
current++;
if (current >= arr.length) {
current = 0;
}
text.textContent = arr[current];
}
}
function startFlash() {
setInterval(function () {
isVisible();
toggleBorder();
toggleArr();
toggleText();
}, 500)
}
</script>
</body>
</html>
- 发表于 2020-06-26 21:14
- 阅读 ( 463 )
- 分类：web前端开发
