<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-</title>
</head>
<body>
<p>
JavaScript 能直直接写入HTML输出流中
</p>
<script>
document.write("<h1>This is a heading</h1>")
document.write("<p>This is a paragraph.</p>")
</script>
<p>
在HTML流中使用document.write。如果在已加载后使用（如:函数中）,将会覆盖。
</p>
<!--点击弹窗时间 onclick-->
<h1>我的第一段JavaScript</h1>
<p>
JavaScript对点击事件的处理，弹窗时间
</p>
<button type="button" onclick="alert('你好，欢迎')">点击这里试试</button>
<!--改变HTML内容-->
<h1>
我的第一段JS
</h1>
<p id="demo">我是一个段落</p>
<script>
function myFunction(){
x = document.getElementById("demo"); //找到id = demo的元素
x.innerHTML = "Hello JS, I love you!"; //变更的内容
}
function myFunction2(){
y = document.getElementById("demo"); //找到id = demo的元素
y.innerHTML = "JS, 我要学会你！！！"; //变更内容
}
</script>
<button type="button" onclick="myFunction()">点击我试一下</button>
<button type="button" onclick="myFunction2()">点我试试</button>
<!--改变图片-->
<br>
<img id="myimage" onclick="changeImages()" src="images/color_off.png">
<script>
function changeImages(){
element = document.getElementById('myimage')
if(element.src.match("color_on")){
element.src = "images/color_off.png";
}else{
element.src = "images/color_on.png";
}
}
</script>
<!--改变样式-->
<br>
<h1>
变更样式
</h1>
<p id="changeStyle">
我要改变的样式
</p>
<script>
function changeColor(){
x = document.getElementById("changeStyle");
x.style.color = "red";
}
</script>
<button type="button" onclick="changeColor()">点我试试</button>
</body>
</html>
