用jsp写一个图形界面中间包含一个直角三角形
时间: 2024-09-15 21:14:14 浏览: 51
jsp编写的 一个登陆界面
3星 · 编辑精心推荐
在JSP (JavaServer Pages) 中,你可以使用HTML、CSS和JavaScript来创建一个基本的图形界面,其中包含一个动态显示的直角三角形。这里是一个简单的示例:
```jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<title>直角三角形</title>
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red; /* 可以改变颜色 */
}
</style>
</head>
<body>
<div class="triangle"></div>
<!-- 使用JavaScript动态调整三角形大小 -->
<script type="text/javascript">
function resizeTriangle() {
var triangle = document.querySelector('.triangle');
var inputWidth = parseInt(document.getElementById('width').value);
triangle.style.width = inputWidth + 'px';
triangle.style.borderLeftWidth = inputWidth + 'px';
triangle.style.borderRightWidth = inputWidth + 'px';
triangle.style.height = inputWidth * 2 + 'px'; // 直角三角形高是底边长度的两倍
}
</script>
<!-- 用户可以输入三角形宽度 -->
<input type="number" id="width" oninput="resizeTriangle()" value="50">
<p>更改宽度并点击文本框观察三角形变化:</p>
</body>
</html>
```
在这个例子中,我们首先设置了静态的红色直角三角形样式。然后通过JavaScript,当用户改变`<input>`标签的值时,会触发`resizeTriangle`函数,动态调整三角形的尺寸。
阅读全文