首页帮我使用html css javascript 写一个简单的列子

帮我使用html css javascript 写一个简单的列子

时间: 2023-08-06 16:02:30 浏览: 105

好的，以下是一个使用 HTML、CSS 和 JavaScript 的简单例子，它包括一个按钮和一个计数器，每次点击按钮时计数器会加 1。 HTML： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计数器</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>计数器</h1> <p>点击按钮计数：</p> <button id="countButton">点击我</button> <p id="counter">0</p> <script src="script.js"></script> </body> </html> ``` CSS： ```css body { font-family: Arial, sans-serif; background-color: #f4f4f4; text-align: center; } h1 { color: #333; } button { padding: 10px; border-radius: 5px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } button:hover { background-color: #0069d9; } #counter { font-size: 2em; font-weight: bold; color: #333; } ``` JavaScript： ```javascript let count = 0; const countButton = document.getElementById('countButton'); const counter = document.getElementById('counter'); countButton.addEventListener('click', () => { count++; counter.innerText = count; }); ``` 这个例子很简单，但它涵盖了 HTML、CSS 和 JavaScript 的基本概念。HTML 定义了页面的结构和内容，CSS 控制了页面的样式和布局，JavaScript 使页面具有交互性和动态效果。

阅读全文