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

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

移動端

【實(shí)例名稱】

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

【實(shí)例描述】

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

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁</title>
<script>
var s=new Array("LOVE","晚上","看","電影","9點(diǎn)","必須",
"秘密開始行動","如見","不到","請等待","10點(diǎ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ī)字體的選取，以及動態(tài)創(chuàng)建標(biāo)簽?！癇”標(biāo)簽表示字體為“黑體”，“font”標(biāo)簽用來設(shè)置字體的大小“Math random”用來獲取。0~l之間的隨機(jī)數(shù)，“Mathfloor“取數(shù)據(jù)的整數(shù)部分。

【源碼下載】

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

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