資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 JavaScript 和 CSS 實現打字和刪除效果
藉助 CSS 動畫，我們可以使用 JavaScript 建立打字機打字和刪除效果。無限迴圈效果也已設定。自定義函式將被呼叫，並且文字將以該效果顯示。最後，這些文字將使用另一個自定義函式刪除。
為文字和游標設定一個 div
首先，使用 <p> 元素設定一個父 div 容器。其中一個 <p> 將包含文字，另一個包含游標。
<div> <p id="text"></p> <p>|</p> </div>
設定 <p> 元素的樣式
為文字設定專業字型：
p {
font-family: "Courier Monospace";
font-size: 2em;
color: red;
}
“:last-of-type” 選擇器
要匹配其父元素的最後一個子元素，請使用“:last-of-type”選擇器。為其父元素的最後一個 <p> 元素設定動畫：
p:last-of-type {
animation: type 0.33s infinite;
}
上面，動畫名稱為 type，它使用關鍵幀設定動畫規則。這裡，使用 opacity 屬性設定不透明度：
@keyframes type{
to { opacity: .0; }
}
初始文字
設定以下文字，頁面載入時將以打字效果進行動畫：
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
頁面載入
頁面載入時呼叫自定義函式進行打字：
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
deleteNow();
return false;
};
counter = setTimeout(loopTyping, 200);
};
loopTyping();
};
對於刪除效果：
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
} else {
i = 0;
};
typeNow();
return false;
};
counter = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
超時
為了使打字和刪除效果正常工作，呼叫了 setTimeout() 函式。以下程式碼適用於這兩個事件，即輸入和刪除字母時：
counter = setTimeout(loopDeleting, 200);
示例
以下示例顯示此效果：
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 4%;
padding: 2%;
box-shadow: inset 0 0 12px blue;
}
p {
font-family: "Courier Monospace";
font-size: 2em;
color: red;
}
p:last-of-type {
animation: type 0.33s infinite;
}
@keyframes type{
to { opacity: .0; }
}
</style>
</head>
<body>
<div>
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
let i = 0;
let counter;
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
deleteNow();
return false;
};
counter = setTimeout(loopTyping, 200);
};
loopTyping();
};
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
} else {
i = 0;
};
typeNow();
return false;
};
counter = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
typeNow();
</script>
</body>
</html>
更新於：2024年1月2日
2K+ 次瀏覽
廣告