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