HTML Clicker Example: Interactive Button with Count
<!DOCTYPE html>
<html>
<head>
<title>Clicker Example</title>
<style>
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.clicker{
font-size: 3rem;
padding: 1rem;
border-radius: 5px;
background-color: #3498db;
color: #fff;
cursor: pointer;
}
.count{
margin-top: 1rem;
font-size: 2rem;
}
</style>
</head>
<body>
<div class='container'>
<h1>Clicker Example</h1>
<p>Click on the button to increase the count:</p>
<button class='clicker'>Click me!</button>
<p class='count'>Count: 0</p>
</div>
<script>
var count = 0;
var clicker = document.querySelector('.clicker');
var countEl = document.querySelector('.count');
<pre><code> clicker.addEventListener('click', function(){
count++;
countEl.textContent = 'Count: ' + count;
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lsuV 著作权归作者所有。请勿转载和采集!