JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JavaScript 用法 JavaScript 教程

JavaScript 常用示例

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

注意：如果这些示例使用的是您尚未学习的方法，请不要担心。您将在下一章中了解它们。

JavaScript可以修改HTML内容

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

本示例使用该方法查找HTML元素（id="para"），并将元素内容（innerHTML）更改为“ Hello world”：

示例

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

测试看看‹/›

JavaScript可以更改HTML属性值

在此示例中，JavaScript更改了<img>标签的src属性的值：

单击按钮更改头像：

JavaScript可以更改HTML样式（CSS）

JavaScript style属性可用于设置元素的内联样式。

示例

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可以创建警报弹出窗口

在此示例中，JavaScript创建一个警报对话框。

示例

alert("Hello world!");

测试看看‹/›

JavaScript可以将事件处理程序附加到文档

在此示例中，JavaScript监视鼠标单击事件并对其做出反应。

示例

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

测试看看‹/›

JavaScript可以显示时间

在此示例中，JavaScript显示当前时间。

示例

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

测试看看 ‹/›

JavaScript 用法 JavaScript 教程