现代网页的设计常以友好的动态视觉效果为优，我就经常见到在各种主流的 APP 中开发人员都对变化频率高的数字部分做出了像是以前那种上下的拨轮数字转盘效果，网页中用这种效果的并不算多，此篇文章贴出我在网页中模拟实现此种效果的代码，先看看下面的动图效果：
实现思路是为每个数字都做个从 0 ~ 9 的长条，只展示出够 1 个数字显示的区域，其它的则隐藏，变化数字时使用 CSS transform 逻辑使其垂直位移并配以过渡动画，下面是完整的页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div_container {
display: flex;
}
.DIV_numbers_box {
font-size: 3em;
height: 3em;
margin: 0 .1em 0 0;
overflow: hidden;
}
.DIV_numbers_scroller {
height: 100%;
transition: transform 1s;
transform: translateY(0%);
}
.DIV_numbers_scroller > span {
display: flex;
height: 100%;
justify-content: center;
flex-direction: column;
}
</style>
</head>
<body>
<div id="div_container">
<div id="div_numbers1" class="DIV_numbers_box" data-number="1">
<div class="DIV_numbers_scroller">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div id="div_numbers2" class="DIV_numbers_box" data-number="2">
<div class="DIV_numbers_scroller">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div id="div_numbers3" class="DIV_numbers_box" data-number="3">
<div class="DIV_numbers_scroller">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
</div>
<button type="button" onclick="RandomSet()">随机设 3 个数</button>
<script>
function GetRandomInt(_start, _end) {
var x = _end - _start;
var num = Math.random() * x + _start;
return parseInt(num, 10);
}
function SetNumbers(selector, number) {
var div_number_box = document.querySelector(selector)
var new_percent_translateY = -number * 100
div_number_box.children[0].style.transform = "translateY(" + new_percent_translateY + "%)"
div_number_box.dataset.number = number
}
function RandomSet() {
var number1 = GetRandomInt(0, 10)
var number2 = GetRandomInt(0, 10)
var number3 = GetRandomInt(0, 10)
SetNumbers("#div_numbers1", number1)
SetNumbers("#div_numbers2", number2)
SetNumbers("#div_numbers3", number3)
}
RandomSet()
</script>
</body>
</html>