SOURCE

console 命令行工具 X clear

                    
>
console
let count = 0;
const counterElement = document.getElementById('counter');

document.getElementById('increase').addEventListener('click', () => {
  count++;
  counterElement.textContent = count;
});

document.getElementById('decrease').addEventListener('click', () => {
  count--;
  counterElement.textContent = count;
});
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<div class="container">
  <h1>简单计数器示例</h1>
  <div class="counter" id="counter">0</div>
  <div>
    <button id="decrease">减少</button>
    <button id="increase">增加</button>
  </div>
</div>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}
.container {
  text-align: center;
  padding: 2rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
  color: #333;
}
.counter {
  font-size: 2rem;
  margin: 1rem 0;
  color: #0066ff;
}
button {
  background-color: #0066ff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0.5rem;
}
button:hover {
  background-color: #0052cc;
}