数字倒数效果

当页面初步加载时，显示数字滚动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:12px/1 arial; background:#3f3f3f;}
        .num{ width:500px; padding:10px 0;border-radius:15px;text-shadow:1px 1px 1px #999; color:#fff;text-align:center; margin:120px auto; font-size:62px; font-weight:bold; border:5px solid #ccc; background:#fff;}
        .num strong{ font-weight:normal; border:1px solid #ccc; background:#333; padding:0 10px; text-align:center;}
    </style>
</head>
<body>
<div id="num" class="num" style="display:none;">1000000</div>
<script type="text/javascript">
    String.prototype.repeat = function(n){
        return Array(n + 1).join(this);
    };
    var addFixed = 5, // 单次增加值
        node = document.getElementById('num'),
        emTotal  = node && node.innerHTML;
    function numAnim(){
        var len        = 1,
            last       = 0,  // 最终值
            n          = 0;  // 需要填充的空白0
        if(addFixed < emTotal){ // 跳出setTimeout条件
            addFixed  += Math.ceil((emTotal - addFixed) / 3);
            len        = emTotal.length - (addFixed + '').length;
            last       = n + '' + addFixed;
            n          = '0'.repeat(10).slice(len);
            if(len == 0){ // 如果等于0后删除首位
                last = last.slice(1);
            }
            last = last.split('');
            last = '<strong>' + last.join('</strong><strong>') + '</strong>';
            node.innerHTML = last;
        }
        setTimeout(numAnim, 100);
    }
    node.style.display = 'block';
    numAnim();
</script>
</body>
</html>

posted @ 2012-10-24 09:40 豪情阅读(3663) 评论(0) 编辑收藏举报

刷新页面返回顶部

数字倒数效果

公告