使用javascript或jquery的隨機詞彈出腳本

Question

所以我發現this已經在這裏，它幾乎正是我想要的。唯一的區別是，而不是創建箱子，我想他們是從一個數組中的詞 - 就像

var textarray = [ 
    "wow", 
    "so amaze", 
    "much hunt", 
    "such treasure"]; 

這樣，而不是顏色框彈出隨機那將是這些隨機單詞一個隨機有色。這是jsfiddle的代碼。

(function makeDiv(){ 
    var divsize = ((Math.random()*100) + 50).toFixed(); 
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
    $newdiv = $('<div/>').css({ 
     'width':divsize+'px', 
     'height':divsize+'px', 
     'background-color': color 
    }); 

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 

    $newdiv.css({ 
     'position':'absolute', 
     'left':posx+'px', 
     'top':posy+'px', 
     'display':'none' 
    }).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function(){ 
     $(this).remove(); 
     makeDiv(); 
    }); 
})(); 

Answer 1

這是怎麼回事？ http://jsfiddle.net/x2EXz/1/

var textArray = [ 
    "wow", 
    "so amaze", 
    "much hunt", 
    "such treasure"]; 

function makeDiv(){ 
    var divsize = ((Math.random()*100) + 50).toFixed(); 
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
    $newdiv = $('<div/>').css({ 
     'width': ' 30 px', // sets width to constant 
     'height': '10px', // sets height to constant 

    // removes background-color property of div, but keeps 
    // generating random colors that will be applied to the random words 
    // 'background-color': color 

    }); 

    // randomWord will accommodate for textArray of any size 
    var randomWord = textArray[ (Math.floor(Math.random() * textArray.length)) ] 
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed(); 
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed(); 

    // appends randomWord to new div 
    $newdiv.text(randomWord).css({ 
     'position':'absolute', 
     'left':posx+'px', 
     'top':posy+'px', 
     'display':'none', 
     // adds randomly generated color to random word 
     'color' : color 
    }).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function(){ 
     $(this).remove(); 
     makeDiv(); 
    }); 
} 


makeDiv();