在前端開發(fā)中，經(jīng)常需要使用彈窗來展示信息或交互，而循環(huán)彈窗是其中一個(gè)比較常見的需求。下面介紹一個(gè)基于HTML的循環(huán)彈窗代碼。
<html>
<head>
<title>循環(huán)彈窗</title>
</head>
<body>
<button onclick="startLoop()">開始循環(huán)彈窗</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<p id="modalText"></p>
</div>
</div>
<script>
// 定義彈窗文本數(shù)組
var textArray = [
"循環(huán)彈窗 1",
"循環(huán)彈窗 2",
"循環(huán)彈窗 3",
"循環(huán)彈窗 4",
"循環(huán)彈窗 5"
];
var modal = document.getElementById("myModal");
var textIndex = 0;
// 開始循環(huán)彈窗
function startLoop() {
modal.style.display = "block";
setText();
setTimeout(closeModal, 3000);
}
// 關(guān)閉彈窗
function closeModal() {
modal.style.display = "none";
setTimeout(startLoop, 2000);
}
// 設(shè)置彈窗文本
function setText() {
var modalText = document.getElementById("modalText");
modalText.innerHTML = textArray[textIndex];
textIndex = (textIndex + 1) % textArray.length;
}
</script>
</body>
</html>以上代碼中，我們定義了一個(gè)基礎(chǔ)的HTML頁面，并使用JavaScript來實(shí)現(xiàn)循環(huán)彈窗的功能。我們使用了一個(gè)文本數(shù)組textArray來存儲(chǔ)彈窗顯示的文本內(nèi)容，然后通過定義startLoop、closeModal和setText等函數(shù)來實(shí)現(xiàn)彈窗的循環(huán)顯示。
在startLoop函數(shù)中，我們首先展示彈窗，然后調(diào)用setText函數(shù)設(shè)置彈窗文本，設(shè)置一個(gè)定時(shí)器讓彈窗在3秒后自動(dòng)關(guān)閉。在closeModal函數(shù)中，我們關(guān)閉彈窗，并設(shè)置一個(gè)定時(shí)器在2秒后重新開啟循環(huán)彈窗。setText函數(shù)中則實(shí)現(xiàn)了每次彈窗展示不同文本的功能。
以上就是一個(gè)基于HTML的循環(huán)彈窗代碼。通過HTML和JavaScript的結(jié)合，我們可以實(shí)現(xiàn)各種各樣的前端交互效果。