转自此处https://segmentfault.com/a/1190000008853924感觉逻辑有些负责,遂进行优化并错误留做以后使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RollingNumber</title>
<style>
.input_center{
display: block;
margin: 50px auto 0;
}
.num_span {
border: 1px solid #911004;
width: 184px;
overflow: hidden;
font-size: 20px;
height: 20px;
margin: 10px auto;
}
.num_span span {
float: right;
width: 20px;
/* 书写模式*/
writing-mode: vertical-rl;
/* 控制行内字符的旋转*/
text-orientation: upright;
margin-top: 0em;
-webkit-transition: margin-top 1.5s ease-out;
-o-transition: margin-top 1.5s ease-out;
transition: margin-top 1.5s ease-out;
}
span{
font-size:1em;
}
</style>
</head>
<body>
<input type="text" class="input_center" id="valueRGB" placeholder="请输入最大9位的数字">
<div class="num_span">
<span class="one">0123456789</span>
<span class="two">0123456789</span>
<span class="three">0123456789</span>
<span class="four">0123456789</span>
<span class="five">0123456789</span>
<span class="six">0123456789</span>
<span class="seven">0123456789</span>
<span class="eight">0123456789</span>
<span class="nine">0123456789</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$("#valueRGB").on("change",function(){
let val = parseInt($(this).val());
if(0<=val<100000){
console.log(val);
animate_RGB($(this).val());
}
});
function animate_RGB(rgb){
rgb=PrefixInteger(rgb,9);
console.log(rgb);
let arr = [];
let strs = rgb.split("");
let $div = $(".num_span");
let numLength=strs.length;
clearAllEm($div);
$div.find('.one').css('margin-top',-strs[8]+'em');
$div.find('.two').css('margin-top',-strs[7]+'em');
$div.find('.three').css('margin-top',-strs[6]+'em');
$div.find('.four').css('margin-top',-strs[5]+'em');
$div.find('.five').css('margin-top',-strs[4]+'em');
$div.find('.six').css('margin-top',-strs[3]+'em');
$div.find('.seven').css('margin-top',-strs[2]+'em')
$div.find('.eight').css('margin-top',-strs[1]+'em')
$div.find('.nine').css('margin-top',-strs[0]+'em');
}
function clearAllEm(event){//清空所有格状态
event.find('span').css('margin-top','0em');
}
function PrefixInteger(num, n) {//连接字符串前面补0
return (Array(n).join(0) + num).slice(-n);
}
</script>
</body>
</html>