<!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>
