1.onclick事件
<button type="button" onclick="alert('Welcome!')">点击这里</button>
<div onclick="alert('Welcome!')">点击这个div</div>
2.改变 HTML 内容
添加按钮，并调用onclick事件
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>//设置事件触发按钮
3.图片替换
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("图片1链接"))
{
element.src="图片2链接";
}
else
{
element.src="图片1链接";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="图片1链接">
4.改变标签的css
<body>
<p id="demo" style="color: black;">JavaScript 能改变 HTML 元素的样式。</p> <!--需要改变样式的标签-->
<script>//设置改变方法
function myf()
{
x=document.getElementById("demo");
if(x.style.color.match('black'))
{
x.style.color="red";
}
else if(x.style.color.match('red'))
{
x.style.color="blue";
}
else
{
x.style.color="black";
}
}
</script>
<input type="button" onclick="myf()" value="点击这里" /> <!--点击方法-->
</body>
5.判断输入是否是数字
<body>
<input id="demo" type="text" />
<script>//设置改变方法
function myf()
{
x=document.getElementById("demo").value;
if(x==""||isNaN(x)) //isNaN()代表非数字
{
alert("输入错误");
}
}
</script>
<input type="button" onclick="myf()" value="点击这里" /> <!--点击方法-->
</body>
<——第一节完——>