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

Question

所以我發現這已經在這里，它是幾乎正是我想要的。 唯一的區別是，我希望將它們做成從數組中提取的單詞，而不是創建盒子，例如

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();