<!DOCTYPE html>
<html>
<head>
<title>Html5網頁計數器</title>
<meta charset="utf-8">
<style>
body{ margin:0; padding:0; font-family:Arial, sans-serif; }
.counter{ width:100%; background-color:#ddd; }
.counter-inner{ max-width:800px; margin:0 auto; padding:20px; text-align:center; }
.counter-value{ font-size:60px; font-weight:bold; color:#333; margin-bottom:20px; }
.counter-button{ display:inline-block; background-color:#333; color:#fff; padding:10px 20px; border-radius:5px; text-decoration:none; transition:all .3s ease; }
.counter-button:hover{ background-color:#666; }
</style>
</head>
<body>
<div class="counter">
<div class="counter-inner">
<p class="counter-value"></p>
<a href="#" class="counter-button">點擊計數</a>
</div>
</div>
<script>
var valueElem = document.querySelector('.counter-value');
var buttonElem = document.querySelector('.counter-button');
var count = 0;
valueElem.textContent = count;
buttonElem.addEventListener('click', function(){
count++;
valueElem.textContent = count;
});
</script>
</body>
</html>在這個HTML5網頁計數器的代碼中，我們首先創建了一個具有計數器樣式的
元素，并在其中嵌套了一個
元素和一個元素。
計數器的核心代碼在