原生JS实现非常好看的计数器原生JS实现非常好看的计数器

今天给大家分享一个用原生JS实现的好看计数器，效果如下：

文章图片

以下是代码实现，欢迎大家复制粘贴和收藏。

原生JS实现一个好看计数器* {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; } 0

【原生JS实现非常好看的计数器】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。