首页 > 其他 > 详细

模拟一串数字更新的效果

时间:2017-12-04 13:52:30      阅读:212      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,html{
margin: 0;
padding: 0;
font-size: 16px
}
.number li {
width: 16px;
height: 16px;
line-height: 16px;
display: inline-block;
overflow: hidden;
}
 
.number li span {
display: block;
transform: translateY(0%);
}
 
.number li.active span {
    animation: move 0.3s;
animation-fill-mode: forwards;
}
 
@keyframes move {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<ul id="main" class="number"></ul>
<script type="text/javascript">
function makeThreeNum(num){
var num = (num || "").toString();
return num.match(/\d{1,3}/g).join(‘,‘);
}
function getRand(max, min){
return parseInt(Math.random()*(max-min)+min);
}
function addStep(base){10
return (parseInt(getRand(0, 10)) + parseInt(base));
}
var w_old = 123456789;
function update(oldNum, newNum){
w_old = newNum;
var oldNum = makeThreeNum(oldNum),
newNum = makeThreeNum(newNum),
numberHTML = ‘‘;
for (var i = 0; i < oldNum.length; i++) {
if(oldNum[i] !== newNum[i]){
numberHTML += "<li class=\"group active\"><span class=\"old\">" + oldNum[i] + "</span><span class=\"new\">" + newNum[i] + "</span></li>";
}else{
numberHTML += "<li class=\"group\"><span class=\"old\">" + oldNum[i] + "</span><span class=\"new\">" + newNum[i] + "</span></li>";
}
}
document.getElementById(‘main‘).innerHTML = numberHTML;
 
}
window.setInterval(function(){
update(w_old, addStep(w_old));
}, 1000);
</script>
</body>
</html>

WEB前端学习交流群21 598399936
 
 
 

模拟一串数字更新的效果

原文:http://www.cnblogs.com/luludehuhuan/p/7976669.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!