javaScript 利用随机数和定时器完成几个有用的文字小操作文字的滚动效果，文字的打印效果和文字的颜色闪烁...

最新推荐文章于 2021-06-24 10:26:23 发布

anyi1057

最新推荐文章于 2021-06-24 10:26:23 发布

阅读量217

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yongguolong/p/7435887.html

版权

文字的滚动

<body>
    <textarea id="textarea"></textarea>
    <script>
        str=" 文 字 的 滚 动 效 果";
        function roll(){
            str=str.substr(1,str.length)+str.substring(0,1);
            document.getElementById("textarea").style.fontSize="20px";
            document.getElementById("textarea").innerText=str;     
        }
        setInterval(roll,200);
    </script>
</body>

文字的打印

<body>
    <textarea id="textarea"></textarea>
    <script>
        var str="文字的打印效果";
        var index=0;
        function type() {  
            if(index == str.length+1) {  
                index = 0;  
            }
            document.getElementById("textarea").style.fontSize="15px";
            document.getElementById("textarea").innerText = str.substring(0, index++);
        }
        setInterval(type, 500);
    </script>
</body>

文字的颜色闪烁

<body>
    <span id="s1">文</span>
    <span id="s2">字</span>
    <span id="s3">的</span>
    <span id="s4">颜</span>
    <span id="s5">色</span>
    <span id="s6">闪</span>
    <span id="s7">烁</span>
    <script>
        str="文字的颜色闪烁";
        function color(){
            r=Math.floor(Math.random()*256);
            g=Math.floor(Math.random()*256);
            b=Math.floor(Math.random()*256);
            return "rgb("+r+","+g+","+b+")"
        }
        function word(){
            document.getElementById("s1").style.color=color();
            document.getElementById("s2").style.color=color();
            document.getElementById("s3").style.color=color();
            document.getElementById("s4").style.color=color();
            document.getElementById("s5").style.color=color();
            document.getElementById("s6").style.color=color();
            document.getElementById("s7").style.color=color();
        }
        setInterval(word,500);
    </script>
</body>