JS网页交互实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Cherry_King/article/details/99335756

本文介绍如何使用JavaScript实现网页上的按钮点击弹框及替换div内容的功能，通过具体代码示例展示了基本的网页交互操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.点我弹框

建立index.jsp，内容如下所示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		function clickMe(){
			alert("被点击了");
		}
	</script>
</head>
<body>
	<input type="button" value ="ClickMe ,弹框" onclick="clickMe()"/>
	<div>
		点击弹框！
	</div>
</body>
</html>

访问界面：
点击后效果：

2.点我替换div里内容

index.jsp内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script>
		function clickMe(){
			var div= document.getElementById("div1")
			div.innerHTML="<font color ='red'>内容被替换掉了！</font>"
		}
	</script>
</head>
<body>
	<input type="button" value ="ClickMe ,修改内容" onclick="clickMe()"/>
	<div id="div1">
		要求改的内容！！
	</div>
</body>
</html>