基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果

雨涵和大地

于 2024-09-29 21:22:01 发布

阅读量248

点赞数 11

分类专栏： html 文章标签： html css javascript

本文链接：https://blog.csdn.net/2201_76060199/article/details/142644011

版权

这段代码实现了一个基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果。以下是代码的详细解释说明：

基础设置：
- <!DOCTYPE html> 声明文档类型为HTML5。
- <html lang="en"> 指定文档语言为英文。
- <meta charset="UTF-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置字符编码和视口，确保页面在各种设备上正确显示。
主体结构：
- <div class="container"> 包含整个数字滚动效果的容器。
- <button> 一个按钮，用于生成11位随机数字。
- <input type="text" id="input" placeholder="请输入金额"> 一个输入框，用于手动输入金额。
- <div class="amount"> 包含多个数字滚动器的容器。
  - 每个数字滚动器由 <div id="counter" class="animated"> 和内部的 <ul class="digits column"> 组成，<ul> 包含从0到9的数字<li>项。

全局样式：
- * { padding: 0; margin: 0; box-sizing: border-box; } 清除所有元素的默认边距和填充，设置边框盒模型。
- body { font-size: 50px; height: 100vh; display: grid; place-items: center; background: #0e141b; } 设置页面背景色，使用网格布局将内容居中。
容器和按钮样式：
- .container button 设置按钮的样式，包括填充、字体大小等。
- #input 设置输入框的样式。
数字滚动器样式：
- .amount 设置数字滚动器容器的样式。
- .digits 设置数字列表的样式，包括颜色、行高等。
- .column 为数字列表设置动画效果。
- .column li 设置每个数字项的最小高度。

变量初始化：
- const input = document.getElementById('input') 获取输入框元素。
- const digits = document.querySelectorAll('.digits') 获取所有数字列表元素。
- const counters = document.querySelectorAll('.animated') 获取所有动画容器元素。
- const button = document.getElementsByTagName('button')[0] 获取按钮元素。
- let size = 50, amount = '18'; 设置数字项的高度和初始金额。
事件绑定：
- input.onblur 当输入框失去焦点时，更新显示的金额。
- button.onclick 当按钮被点击时，生成11位随机数字并更新显示的金额。
更新金额函数 updateAmount：
- 根据输入的金额或默认金额，更新每个数字滚动器的显示。
- 使用 parseInt 解析每个数字，计算偏移量，并通过 transform: translateY() 设置滚动效果。
- item.style.transitionDelay 设置每个数字项的动画延迟