<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <script> <!--一、写入html输出--> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>"); </script> <!--二、对事件做出反应 alert警告--> <button type="button" onclick="alert('欢迎')">点击这里</button> <!--三、改变 HTML 内容--> <p id="p1"> JavaScript 能改变 HTML 元素的内容。 </p> <script> <!--function 函数--> function myFunction() {x=document.getElementById("p1"); x.innerHTML="Hello JavaScript" } </script> <!--onclick 鼠标单击--> <button type="button" onclick="myFunction()">请点击这里 </button> <!--四、自动换图片--> <!--document文件--> <script> function change() { x=document.getElementById("myimage") if(x.src.match("baidu1")) { x.src="素材/baidu2.png"; } else { x.src="素材/baidu1.png"; } } </script> <img id="myimage" onclick="change()" src="素材/baidu1.png"> <!--五、改变html样式--> <p id="styles"> JavaScript 能改变 HTML 元素的样式。 </p> <script> function change() { x=document.getElementById("styles") // 找到元素 x.style.color="#ff0000"; // 改变样式 } </script> <button type="button" onclick="change()">变色</button> <!--六、验证输入--> <p> 请输入数字，如果输入值不是数字，浏览器会弹出提示框。 </p> <input type="text" id="number"> <script> function numbers() { var x=document.getElementById("number").value; if(x==""||isNaN(x)) { alert("不是数字"); } else { alert("是数字"); } } </script> <button type="button" onclick="numbers()">点击显示是不是数字</button> </body> </html>