码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-08-26 18:27:43      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:index   word   有用   set   滚动效果   doc   rip   turn   span   

文字的滚动

<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 利用随机数和定时器完成几个有用的文字小操作 文字的滚动效果,文字的打印效果和文字的颜色闪烁

标签:index   word   有用   set   滚动效果   doc   rip   turn   span   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!