一，效果图。
二，代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 简介</title>
<script type="text/javascript">
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<!--第一个javascript程序-->
<h1>我的第一个javascript程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
<!--JavaScript：直接写入 HTML 输出流-->
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
<!--对事件的反应-->
<button type="button" onclick="alert('欢迎!')">点我!</button>
<!--改变 HTML 内容-->
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction() {
x = document.getElementById("demo"); // 找到元素
x.innerHTML = "Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
<!--改变 HTML 图像-->
<script>
function changeImage() {
element = document.getElementById('myimage')
if (element.src.match("bulbon")) {
element.src = "/images/pic_bulboff.gif";
} else {
element.src = "/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
<!--改变 HTML 样式-->
<h1>我的第一段Javascript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("demo").value;
if (x == "" || isNaN(x)) {
alert("不是数字");
};
}
</script>
<button type="button" onclick="myFunction()">点here</button>
</body>
</html>
参考资料：《菜鸟教程》