隨機(jī)動(dòng)態(tài)文字效果JS代碼怎么寫(xiě)

2012/10/22 12:52:59作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

隨機(jī)動(dòng)態(tài)文字效果

【實(shí)例描述】

隨機(jī)性的動(dòng)態(tài)文字，對(duì)文字的顏色、大小等都沒(méi)有固定。此效果就是把一些不規(guī)則的字體拼湊在一起。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁(yè)</title>
<script>
var s=new Array("LOVE","晚上","看","電影","9點(diǎn)","必須",
"秘密開(kāi)始行動(dòng)","如見(jiàn)","不到","請(qǐng)等待","10點(diǎn)","不見(jiàn)","趕緊閃人！")
function txtFont(str){
    var n=Math.floor(Math.random()*5);
    var obj1=document.createElement("B");           //創(chuàng)建黑體標(biāo)簽
    var obj2=document.createElement("font");        //創(chuàng)建字體標(biāo)簽
    obj2.size=Math.floor(Math.random()*5+4);        //隨機(jī)字體大小
    obj2.innerText=str                             
    if(n>4){
     obj2.size=20                                //設(shè)置字體大小
     obj1.appendChild(obj2);                     //添加字體標(biāo)簽到黑體標(biāo)簽內(nèi)
     return obj1.outerHTML                       //輸出
    }else{
     return obj2.outerHTML
    }
}
for(var i=0;i<10;i++)
document.write(txtFont(s[i])+" ")                  //輸出內(nèi)容  
</script>
</head>
<body>
</body>
</html>

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是隨機(jī)字體的選取，以及動(dòng)態(tài)創(chuàng)建標(biāo)簽。“B”標(biāo)簽表示字體為“黑體”，“font”標(biāo)簽用來(lái)設(shè)置字體的大小“Math random”用來(lái)獲取。0~l之間的隨機(jī)數(shù)，“Mathfloor“取數(shù)據(jù)的整數(shù)部分。

【源碼下載】

本實(shí)例JS代碼下載

標(biāo)簽：文字 JS代碼