html按钮点击代码示例

luby HTML 2026-07-02 15:45 230 阅读

下面是一段html文档,你可以点击运行代码预览效果

<html lang="zh-cn">
<head>
<meta charset="utf-8">
<style>
body {
  font-family: sans-serif;
  padding: 20px;
  text-align: center;
}
h1 { color: #007bff; }
button {
  padding: 10px 20px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
<title>html按钮点击</title>
</head>
<body>
<h1>Hello World</h1>
<p>欢迎您来到本站!</p>
<button id="btn">点击我</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
  alert('按钮被点击了!');
  this.style.backgroundColor = '#dc3545';
  this.innerText = '已点击';
});
</script>
</body>
</html>

下面是另一个示例:

console.log("This is JS");
评论 (0)
发表评论
海内存知己, 天涯若比邻。
点击按钮开始验证
快捷回复: 👍 👎 ❤️ 表情: ☺
评论列表
评论加载中...
验证码加载中...
图片加载失败
向右拖动滑块完成拼图
→