從數組中生成隨機句子Javascript

-1

對於課堂作業，我們需要製作一個有趣的網站，突出JavaScript的隨機功能。我的網站是一個喲媽媽笑話生成器，所以每次刷新頁面時都會出現一個新的笑話。然而，我的代碼不工作，我似乎無法弄清楚爲什麼它不是。我是初學者，所以任何幫助將不勝感激！ :)從數組中生成隨機句子Javascript

這裏是我的代碼：

function setup() { 
    createCanvas(windowWidth, windowHeight, WEBGL); 

    smooth(); 
} 


function draw() { 
    background (255, 255, 255); 
} 

function getRandomSentence() { 
    var index= Math.floor(Math.random() * (maxSentences - 1)); 
    return sentences[index]; 
} 

var sentences= [ 
    'so fat not even Dora can explore her', 
    'so fat I swerved to miss her and ran out of gas', 
    'so smelly she put on Right Guard and it went left', 
    'so fat she hasn’t got cellulite, she’s got celluheavy', 
    'so fat she don’t need no internet – she’s already world wide', 
    'so hair her armpits look like Don King in a headlock', 
    'so classless she could be a Marxist utopia', 
    'so fat she can hear bacon cooking in Canada', 
    'so fat she won 「The Bachelor」 because she all those other bitches', 
    'so stupid she believes everything that Brian Williams says', 
    'so ugly she scared off Flavor Flav', 
    'is like Domino’s Pizza, one call does it all', 
    'is twice the man you are', 
    'is like Bazooka Joe, 5 cents a blow', 
    'is like an ATM, open 24/7', 
    'is like a championship ring, everybody puts a finger in her' 
], 

maxSentences = sentences.length;

，這裏是我的html：

<html> 
    <head> 
     <title>new tab</title> 

     <meta charset="utf-8"> 

     <script src='./js/jquery-2.1.1.min.js' type='text/javascript'></script> 
     <script src='./js/p5.min.js' type='text/javascript'></script> 
     <script src='./js/sketch.js' type='text/javascript'></script> 
     <script src='./js/main.js' type='text/javascript'></script> 

     <link href='./css/reset.css' media='all' rel='stylesheet' type='text/css' /> 
     <link href='./css/main.css' media='all' rel='stylesheet' type='text/css' /> 
    </head> 
    <body> 

    </body> 
</html>

來源

2015-10-16 musst248

你回來了一個隨機的句子，然後呢？文本如何繪製到頁面上？ – Nayuki

你是什麼意思'不工作'？在這裏發佈您的HTML。 – CurseStacker

@CurseStacker這裏是我的html – musst248

我不知道我爲什麼這麼做;我對這個世界太軟了嗎？

這是一個粗略的模板，你可以開始與

<!DOCTYPE html> 
<html> 
<head> 
<!-- You need UTF-8 here because you use some characters not in ASCII --> 
<meta http-equiv="content-type" content="text/html; charset=UTF8"> 
<script> 
/* 
    Math.random() returns a number between 0 and 1 excluding 1 itself. 
    That together with floor function returns a number between 0 and 
    max-1 (here max = sentence.length) and fits the zero-based numbering 
    of the elements in the array 
*/ 
function getRandomSentence() { 
    var index= Math.floor(Math.random() * (sentences.length)); 
    return sentences[index]; 
} 

var sentences= [ 
    'so fat not even Dora can explore her', 
    'so fat I swerved to miss her and ran out of gas', 
    'so smelly she put on Right Guard and it went left', 
    'so fat she hasn’t got cellulite, she’s got celluheavy', 
    'so fat she don’t need no internet – she’s already world wide', 
    'so hair her armpits look like Don King in a headlock', 
    'so classless she could be a Marxist utopia', 
    'so fat she can hear bacon cooking in Canada', 
    'so fat she won 「The Bachelor」 because she all those other bitches', 
    'so stupid she believes everything that Brian Williams says', 
    'so ugly she scared off Flavor Flav', 
    'is like Domino’s Pizza, one call does it all', 
    'is twice the man you are', 
    'is like Bazooka Joe, 5 cents a blow', 
    'is like an ATM, open 24/7', 
    'is like a championship ring, everybody puts a finger in her' 
]; 

function scribble(){ 
    // get the canvas element you want to write to 
    var canvas = document.getElementById("woodcut"); 
    // get a handle for the above canvas (here 2d only for simple text) 
    var context = canvas.getContext("2d"); 
    // the canvas is blank the first time only, so erase the content 
    // even if it is already blank, checking for it would be more 
    // complicated and slower, too 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    // choose a font (you can choose the size also as you can see) 
    context.font = "30px Arial"; 
    // the letters are filled and they are filled in red 
    context.fillStyle = "red"; 
    // center the text horizontally 
    context.textAlign = "center"; 
    // put a random line in the middle of the canvas 
    // the +10 account for the fonttype's height 
    context.fillText(getRandomSentence(),0, canvas.height/2 + 10); 
} 
</script> 
</head> 
<body> 
An indifferent opinion<br> 
<canvas id="woodcut" width="1000" height="100" 
style="border:10px solid #665599;"> 
This text shows up if the canvas element is not supported 
</canvas> 
<br> 
<button onclick="scribble()">scribble</button> 


</body> 
</html>

這是不是最好的風格打，至少可以說，它只是一個玩耍。

嗷，太晚了！再次！

來源

2015-10-16 02:07:27 deamentiaemundi

謝謝，這工作！無論如何，我可以在不點擊按鈕的情況下使句子出現。我的意圖是每次刷新頁面時都會出現一個新頁面 – musst248

您可以使用'>'但一些用戶可能已禁用'onload'（例如，我有） – deamentiaemundi

在HTML文件中，<body> ... </body>之間，加入這行代碼：

<p id="MyRandomSentence"></p>

在JavaScript文件的末尾添加以下幾行代碼：

var element = $("#MyRandomSentence"); 
var sentence = getRandomSentence(); 
element.text(sentence);

來源

2015-10-16 01:58:14 Nayuki

謝謝！我試過這個，出於某種原因，它仍然沒有讓這個句子出現。我是否需要在代碼中調用文本？ – musst248

您可能有語法錯誤。你可以在'maxSentences'之前的'句子'末尾看到代碼中的']，'？請更改爲'];' – Nayuki

我修正了錯誤，但仍未出現。有什麼我需要把我的HTML文件呢？我一直在嘗試一堆不同的東西，但沒有任何東西會使句子加載 – musst248

從數組中生成隨機句子Javascript

回答

相關問題