首页 > 编程语言 > 详细

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

时间:2017-08-26 17:39:36      阅读:282      评论:0      收藏:0      [点我收藏+]

文字的滚动

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

 

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

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

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