你前端代码用写一个事例
时间: 2023-06-25 10:04:08 浏览: 77
好的,下面是一个简单的前端代码示例,它使用HTML、CSS和JavaScript来创建一个按钮,点击该按钮会显示一个文本框:
```html
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
<style>
button {
background-color: blue;
color: white;
font-size: 18px;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
#output {
display: none;
margin-top: 20px;
padding: 10px;
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<button onclick="showOutput()">显示文本框</button>
<div id="output"></div>
<script>
function showOutput() {
var output = document.getElementById("output");
output.style.display = "block";
output.innerHTML = "你好,世界!";
}
</script>
</body>
</html>
```
这个示例定义了一个蓝色的按钮,当用户单击该按钮时,它会调用JavaScript函数 `showOutput()` 来显示一个文本框,并在其中显示一条简单的问候语。CSS用于定义按钮和文本框的样式,而JavaScript用于处理按钮的单击事件。
阅读全文