zoukankan      html  css  js  c++  java
  • 学习笔记-数字滚动效果原理

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数字滚动效果</title>
    <script type="text/javascript">
    var a=[];
    var ind=0;//下标

    function x(num){
    for(var i=0;i < num.length;i++){
    //拆分数字,把每一个数字塞到数组a;
    var n=num.charAt(i);
    a.push(n);
    }

    m();

    }
    //行动
    function m(){
    var k=0;//数字初始值
    var span = document.createElement('span');// 创建span标签
    document.body.appendChild(span);//appendChild() 方法在节点的子节点列表末添加新的子节点

    var p = window.setInterval(function(){
    span.innerHTML = k;
    if(k == a[ind]){ //通过下标对比数组
    window.clearInterval(p);
    ind++;//坐标后移

    if(a[ind]){//如果不超过a数组范围,就重新调用
    m();
    }
    }
    k++;
    },100)
    }
    window.onload=function(){
    x('1980');
    }
    </script>
    </head>

    <body>
    </body>
    </html>
  • 相关阅读:
    AOP
    关于zookeeper部署的个数
    Zookeeper 简介
    Java 正则表达式
    面试记录
    面试题
    Spring Framework官方文档翻译(中英文版)
    java知识巩固
    mysql sql记录
    redis入门
  • 原文地址:https://www.cnblogs.com/opcec/p/6646297.html
Copyright © 2011-2022 走看看