2012-10-22 来源:网络
【实例名称】
随机动态文字效果
【实例描述】
随机性的动态文字,对文字的颜色、大小等都没有固定。此效果就是把一些不规则的字体拼凑在一起。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页</title> <script> var s=new Array("LOVE","晚上","看","电影","9点","必须", "秘密开始行动","如见","不到","请等待","10点","不见","赶紧闪人!") function txtFont(str){ var n=Math.floor(Math.random()*5); var obj1=document.createElement("B"); //创建黑体标签 var obj2=document.createElement("font"); //创建字体标签 obj2.size=Math.floor(Math.random()*5+4); //随机字体大小 obj2.innerText=str if(n>4){ obj2.size=20 //设置字体大小 obj1.appendChild(obj2); //添加字体标签到黑体标签内 return obj1.outerHTML //输出 }else{ return obj2.outerHTML } } for(var i=0;i<10;i++) document.write(txtFont(s[i])+" ") //输出内容 </script> </head> <body> </body> </html>
【运行效果】
【难点剖析】
本例的重点是随机字体的选取,以及动态创建标签。“B”标签表示字体为“黑体”,“font”标签用来设置字体的大小“Math random”用来获取。0~l之间的随机数,“Mathfloor“取数据的整数部分。
【源码下载】