今天给大家分享一个用原生JS实现的好看计数器，效果如下：
以下是代码实现，欢迎大家复制粘贴和收藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS实现一个好看计数器</title> <style> * { font-family: '微软雅黑', sans-serif; box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000d0f; } .container { position: relative; width: 80px; height: 50px; border-radius: 40px; border: 2px solid rgba(255, 255, 255, 0.2); transition: 0.5s; } .container:hover { width: 120px; border: 2px solid rgba(255, 255, 255, 1); } .container .next { position: absolute; top: 50%; right: 30px; display: block; width: 12px; height: 12px; border-top: 2px solid #fff; border-left: 2px solid #fff; z-index: 1; transform: translateY(-50%) rotate(135deg); cursor: pointer; transition: 0.5s; opacity: 0; } .container:hover .next { opacity: 1; right: 20px; } .container .prev { position: absolute; top: 50%; left: 30px; display: block; width: 12px; height: 12px; border-top: 2px solid #fff; border-left: 2px solid #fff; z-index: 1; transform: translateY(-50%) rotate(315deg); cursor: pointer; transition: 0.5s; opacity: 0; } .container:hover .prev { opacity: 1; left: 20px; } #box span { position: absolute; display: none; width: 100%; height: 100%; text-align: center; line-height: 46px; color: #00deff; font-size: 24px; font-weight: 700; user-select: none; } #box span:nth-child(1) { display: initial; } </style> </head> <body> <div class="container"> <div class="next" onclick="nextNum()"></div> <div class="prev" onclick="prevNum()"></div> <div id="box"> <span>0</span> </div> </div> <script> let index = 0; var numbers = document.getElementById('box'); for (let i = 0; i < 100; i++) { let span = document.createElement('span'); span.textContent = i; numbers.appendChild(span); }; let num = numbers.getElementsByTagName('span'); function nextNum() { num[index].style.display = 'none'; index = (index + 1) % num.length; num[index].style.display = 'initial'; }; function prevNum() { num[index].style.display = 'none' index = (index - 1 + num.length) % num.length num[index].style.display = 'initial' }; </script> </body> </html>