在兩個月前我寫下的所有混亂之后，我想再次問這個問題。
下面的代碼顯示了字母的影片。理想的視覺效果是，一旦我進入這個頁面，就會有一個黑色的背景和一個白色的游標，它開始生成一行隨機字符，一個接一個地跟隨整個行的白色游標。之后，游標將在下面的新行上，并開始生成新的一行隨機字符，與上一行相同。這樣的程序將自行進行。
問題是，我不知道如何將游標移動到下面的新行，并開始生成新行隨機字符的程序。
感謝所有曾經幫助過我的人，感謝所有可能在未來幫助我的人！非常感謝！
索引.html：
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<p id="text"></p>
</div>
<script src="script.js"></script>
</body>
</html>
腳本.js：
const text = document.getElementById('text');
text.innerHTML = create_random_string(15) '<br>';
function create_random_string(string_length){
var random_string = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (var i, i = 0; i < string_length; i ) {
random_string = characters.charAt(Math.floor(Math.random() * characters.length));
}
return random_string;
}
var MyInterval = setInterval(NewLine, 21000);
function NewLine() {
text.innerHTML = create_random_string(15) '<br>';
}
function StopNewLine() {
clearInterval(MyInterval);
}
StopNewLine();
樣式.css：
body {
background-color: #000000;
margin: 0;
padding: 0;
overflow: hidden;
display: grid;
height: 100vh;
width: 100vw;
}
#container {
place-content: center;
text-align: center;
line-height: 6vh;
}
#text {
font-family: 'Courier New', Courier, monospace;
font-size: 4vw;
letter-spacing: 3vw;
font-weight: bold;
color: #ffffff;
position: relative;
}
#text::before,
#text::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#text::before {
background: #000000;
animation: typewriter 20s steps(15) forwards;
}
#text::after {
width: 0.125em;
bottom: 1.5vh;
Top: 1vh;
background: #ffffff;
animation: TypingBar 20s steps(15) forwards,
blink 750ms steps(15) infinite;
}
@keyframes typewriter {
0% {left: 0;}
6.7% {left: 7vw;}
100% {left: 90vw;}
}
@keyframes TypingBar {
0%, 6.7% {left: 8vw;}
100% {left: 89.5vw;}
}
@keyframes blink {
to {
background: transparent;
}
}
uj5u.com熱心網友回復：
影片對帶有 的元素執行一次id="text"。您可以做的是id="text"在每個函式呼叫上創建一個新元素，它將執行該元素的影片：
let divElem = document.getElementById('container');
function NewLine() {
let text = document.createElement("p");
text.setAttribute("id", "text");
text.innerHTML = create_random_string(15) '<br>';
divElem.appendChild(text);
}
唯一的問題是行尾的尾隨閃爍游標，我將其隱藏opacity: 0;：
@keyframes TypingBar {
0%, 6.7% {left: 8vw;}
99% {left: 89.5vw; opacity: 1;} /* escape fade-in effect */
100% {opacity: 0;} /* hide trailing cursor */
}
function create_random_string(string_length){
var random_string = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
for (var i, i = 0; i < string_length; i ) {
random_string = characters.charAt(Math.floor(Math.random() * characters.length));
}
return random_string;
}
let divElem = document.getElementById('container');
NewLine();
var MyInterval = setInterval(NewLine, 21000);
function NewLine() {
let text = document.createElement("p");
text.setAttribute("id", "text");
text.innerHTML = create_random_string(15) '<br>';
divElem.appendChild(text);
}
function StopNewLine() {
clearInterval(MyInterval);
}
//StopNewLine();body {
background-color: #000000;
margin: 0;
padding: 0;
overflow: hidden;
display: grid;
height: 100vh;
width: 100vw;
}
#container {
place-content: center;
text-align: center;
line-height: 6vh;
}
#text {
font-family: 'Courier New', Courier, monospace;
font-size: 4vw;
letter-spacing: 3vw;
font-weight: bold;
color: #ffffff;
position: relative;
}
#text::before,
#text::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#text::before {
background: #000000;
animation: typewriter 20s steps(15) forwards;
}
#text::after {
width: 0.125em;
bottom: 1.5vh;
Top: 1vh;
background: #ffffff;
animation: TypingBar 20s steps(15) forwards,
blink 750ms steps(15) infinite;
}
@keyframes typewriter {
0% {left: 0;}
6.7% {left: 7vw;}
100% {left: 90vw;}
}
@keyframes TypingBar {
0%, 6.7% {left: 8vw;}
99% {left: 89.5vw; opacity: 1;}
100% {opacity: 0;}
}
@keyframes blink {
to {
background: transparent;
}
}<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<p id="text"></p>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481865.html
標籤：javascript css 动画 CSS动画