<!DOCTYPE html> <html> <head> <title>Html5網(wǎng)頁計數(shù)器</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">點(diǎn)擊計數(shù)</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網(wǎng)頁計數(shù)器的代碼中,我們首先創(chuàng)建了一個具有計數(shù)器樣式的
元素,并在其中嵌套了一個
元素和一個元素。
計數(shù)器的核心代碼在