JavaScript 常用示例

此頁面包含JavaScript可以做什么的一些示例。

注意：如果這些示例使用的是您尚未學(xué)習(xí)的方法，請不要擔(dān)心。您將在下一章中了解它們。

JavaScript可以修改HTML內(nèi)容

該getElementById()方法返回其ID與指定值匹配的元素。

本示例使用該方法查找HTML元素（id="para"），并將元素內(nèi)容（innerHTML）更改為“ Hello world”：

document.getElementById("para").innerHTML = "Hello world";

JavaScript可以更改HTML屬性值

在此示例中，JavaScript更改了<img>標(biāo)簽的src屬性的值：

男女

單擊按鈕更改頭像：

JavaScript可以更改HTML樣式（CSS）

JavaScript style屬性可用于設(shè)置元素的內(nèi)聯(lián)樣式。

document.getElementById("demo").style.color = "blue";

JavaScript可以隱藏HTML元素

隱藏HTML元素可以通過更改顯示樣式來完成。

document.getElementById("demo").style.display = "none";

JavaScript可以顯示HTML元素

顯示隱藏的HTML元素也可以通過更改顯示樣式來完成。

document.getElementById("demo").style.display = "block";

JavaScript可以創(chuàng)建警報(bào)彈出窗口

在此示例中，JavaScript創(chuàng)建一個(gè)警報(bào)對(duì)話框。

alert("Hello world!");

JavaScript可以將事件處理程序附加到文檔

在此示例中，JavaScript監(jiān)視鼠標(biāo)單擊事件并對(duì)其做出反應(yīng)。

document.addEventListener("click", myFunc);
function myFunc() {
   document.body.style.backgroundColor = "coral";
}

JavaScript可以顯示時(shí)間

在此示例中，JavaScript顯示當(dāng)前時(shí)間。

var intervalID = setInterval(startTimer, 1000);
function startTimer() {
    var date = new Date();
    var x = document.getElementById("result");
    x.innerHTML = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}