今天我們來聊一下JavaScript的交互實例。JavaScript可以幫助我們實現(xiàn)網(wǎng)頁的動態(tài)效果和用戶操作的響應，下面就舉幾個例子來說明。
首先，我們來實現(xiàn)一個簡單的導航欄。當鼠標移動到其中的一個鏈接時，它的顏色會發(fā)生變化。這個效果非常簡單，只需要用到CSS:hover偽類和JavaScript的document.getElementById函數(shù)就可以了。
下面是代碼：

html
<p>導航欄：</p>
<ul>
<li><a href="#" id="link1" onmouseover="changeColor('link1')" onmouseout="changeColor('link1')">鏈接1</a></li>
<li><a href="#" id="link2" onmouseover="changeColor('link2')" onmouseout="changeColor('link2')">鏈接2</a></li>
<li><a href="#" id="link3" onmouseover="changeColor('link3')" onmouseout="changeColor('link3')">鏈接3</a></li>
</ul>
<script>
function changeColor(id) {
document.getElementById(id).style.color = "red";
}
</script>

這段代碼中，我們定義了一個changeColor函數(shù)，接受一個參數(shù)id，表示要改變顏色的鏈接的ID。當鼠標移動到鏈接上時，會調(diào)用這個函數(shù)，將鏈接的顏色改為紅色。
另一個常見的交互效果是展示隱藏的元素。例如，我們想讓一個元素在點擊時顯示，再次點擊時隱藏。這個效果需要用到JavaScript的事件監(jiān)聽和DOM操作。
下面是代碼：

html
<p>點擊按鈕顯示隱藏的元素：</p>
<button onclick="toggleVisibility('hiddenDiv')">顯示/隱藏</button>
<div id="hiddenDiv" style="display:none">
這是一個隱藏的元素。
</div>
<script>
function toggleVisibility(id) {
var element = document.getElementById(id);
if (element.style.display === "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
</script>

這段代碼中，我們定義了一個toggleVisibility函數(shù)，接受一個參數(shù)id，表示要顯示/隱藏的元素的ID。當按鈕被點擊時，會調(diào)用這個函數(shù)，首先通過document.getElementById獲取到對應的元素，然后判斷這個元素是否已經(jīng)被顯示。如果是，我們把它的display屬性改為none，隱藏它；如果不是，我們把它的display屬性改為block，顯示它。這樣，每次點擊按鈕，就能實現(xiàn)元素的顯示和隱藏了。
最后，我們再來看一個更復雜的例子。下面這個效果要求在輸入框中輸入內(nèi)容后，點擊按鈕才能提交。如果輸入框為空，按鈕應該被禁用，防止誤提交。
下面是代碼：

html
<p>輸入框和提交按鈕：</p>
<input type="text" id="inputField" oninput="checkInput()" />
<button onclick="submitForm()" id="submitButton" disabled>提交</button>
<script>
function checkInput() {
var inputField = document.getElementById("inputField");
var submitButton = document.getElementById("submitButton");
if (inputField.value === "") {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
}
function submitForm() {
var inputField = document.getElementById("inputField");
alert("提交的內(nèi)容是：" + inputField.value);
}
</script>

這段代碼中，我們定義了兩個函數(shù)。checkInput函數(shù)在輸入框的值改變時被調(diào)用，用來檢查輸入框是否為空。如果為空，我們通過submitButton.disabled屬性把提交按鈕禁用；如果不為空，我們把提交按鈕解禁。
submitForm函數(shù)在提交按鈕被點擊時被調(diào)用，它通過document.getElementById獲取到輸入框中的值，然后彈出一個對話框，顯示提交的內(nèi)容。
這三個例子分別展示了JavaScript實現(xiàn)交互效果的三種方式：改變樣式、展示隱藏的元素、監(jiān)聽事件。通過這些基礎操作，我們可以實現(xiàn)豐富多彩、用戶友好的Web應用程序。