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;
}