本节是一个小测验，要求你运用所学知识制作一个笑话生成器。祝玩的愉快！
| 预备知识： | 请读完本章所有小节的内容后再开始这个测验。 |
|---|---|
| 目标： | 测试你对变量、数字、操作符、字符串和数组等 Javascript 基本概念的理解程度。 |
测验开始之前需要下载并保存 index.html、style.css、raw-text.txt。
注： 你还可以用类似 JSBin 或 Thimble 这些在线编辑器来完成测验。你可以把 HTML、CSS 及 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript 版面，可以随时在 HTML 页面中添加 <script> 元素。
我们提供了一些原始的 HTML / CSS，以及若干字符串和 JavaScript 函数，还需要你来编写一些 JavaScript 代码让项目运行起来：
可以尝试操作一下：（别偷看源代码哦！）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
font-family: helvetica, sans-serif;
width: 350px;
border: 1px solid;
padding: 1em;
}
label {
font-weight: bold;
}
div {
padding-bottom: 20px;
}
input[type="text"] {
padding: 5px;
width: 150px;
}
p {
background: #FFC125;
color: #5E2612;
padding: 10px;
visibility: hidden;
}
</style>
</head>
<body>
<div>
<label for="customname" id="lbl-customname">请输入自定义的名字：</label>
<input id="customname" type="text" placeholder="李雷">
</div>
<div>
<label for="metric">公制</label><input id="metric" type="radio" name="measure" value="metric" checked>
<label for="american">美制</label><input id="american" type="radio" name="measure" value="american">
</div>
<div>
<button class="randomize">随机生成笑话</button>
</div>
<!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
<p class="story"></p>
<script>
const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');
function randomValueFromArray(array){
const random = Math.floor(Math.random() * array.length);
return array[random];
}
let storyText = '今天气温 35 摄氏度，:insertx:出门散步。当走到:inserty:门前时，突然就:insertz:。人们都惊呆了，李雷全程目睹但并没有慌，因为:insertx:是一个 140 公斤的胖子，天气又辣么热。';
let insertX = ['怪兽威利', '大老爹', '圣诞老人'];
let insertY = ['肯德基', '迪士尼乐园', '白宫'];
let insertZ = ['自燃了', '在人行道化成了一坨泥', '变成一只鼻涕虫爬走了'];
randomize.addEventListener('click', result);
function result() {
let newStory = storyText;
let xItem = randomValueFromArray(insertX);
let yItem = randomValueFromArray(insertY);
let zItem = randomValueFromArray(insertZ);
newStory = newStory.replace(':insertx:', xItem);
newStory = newStory.replace(':insertx:', xItem);
newStory = newStory.replace(':inserty:', yItem);
newStory = newStory.replace(':insertz:', zItem);
if(customName.value !== '') {
const name = customName.value;
newStory = newStory.replace('李雷', name);
}
if(document.getElementById("american").checked) {
const weight = Math.round(140 * 2.20462) + ' 磅';
const temperature = Math.round(35 * 9 / 5 + 32) + ' 华氏度';
newStory = newStory.replace('35 摄氏度', temperature);
newStory = newStory.replace('140 公斤', weight);
}
story.textContent = newStory;
story.style.visibility = 'visible';
}
</script>
</body>
</html>
{{ EmbedLiveSample('Silly_story_generator', '100%', 350, "", "", "hide-codepen-jsfiddle") }}
以下是你的工作。
初始化变量和函数:
customName 是对“输入自定义的名字”文本框的引用，randomize 是对“随机生成笑话”按钮的引用，story 是对 HTML 底部的、准备存放笑话的 {{htmlelement("p")}} 元素的引用）和一个函数（randomValueFromArray() 取一个数组作参数，随机返回数组中的一个元素）。storyText 变量保存第一个长字符串，“今天气温……”。insertX 数组保存第一组三个字符串，“怪兽威利……”。insertY 数组保存第二组三个字符串。“肯德基……”。insertZ 数组保存第三组三个字符串。“自燃了……”。放置事件处理器并补全：
main.js 文件。这将：
randomize 变量增加一个点击事件的监听器。于是当所引用的按钮被点击时，result() 函数就会运行。result() 函数定义。本测验剩下的工作就是完成这个函数，让程序正常运行起来。补全 result() 函数：
newStory 的值设置为 storyText。声明新变量有必要的，只有这样才能在每次按下按钮后、在函数运行时生成一个新的随机笑话。如果直接操作 storyText 则只能生成一次新故事xItem、yItem 和 zItem 分别设置为 randomValueFromArray(insertX)、randomValueFromArray(insertY) 和 randomValueFromArray(insertZ)。newStory 中的占位符（:inserta:、:insertb: 和 :insertc: ）替换为 xItem、yItem 和 zItem。有专用的字符串方法可供使用，并用该方法的返回值为 newStory 赋值。每当按下按钮时，这些占位符都会替换为随机的笑话字符串。再给你一点提示，我们所说的这种方法每次只会将所找到的首个子字符串进行替换，因此该方法对某个占位符需要执行两次。if 块中再次调用这个字符串替换方法，以使 newStory 字符串中的名字“李雷”替换为变量 name 的值 。这里我们说：“如果 customName 中有值，就把故事里的 “李雷”替换成它。” 如果是汉化版将newStory中的“李雷”替换成 name 的值；if 块中检查 american 单选按钮是否被选中。如果选中，就要将故事中的重量和温度值从公斤和摄氏度转换为磅和华氏度，具体事项如下：
weight、temperature 的行中，分别将美制单位按公式转化为英制，用 Math.round() 对计算结果取整。然后将英式单位连接到末尾。temperature 的值，将“140 公斤”替换为 weight 的值。story.textContent（程序中显示笑话结果的段落） 赋值为 newStory。document.querySelector('html').style.backgroundColor = 'red';Math.round() 是 Javascript 的内建函数，可取得与传入小数最接近的整数。replace() 方法，也可使用正则表达式。例如：var text = 'I am the biggest lover, I love my love'; 或 text.replace(/love/g,'like'); 会将所有的“love”替换为“like”。记住,字符串本身是不可修改的!如果你是在课堂上进行这个测验，你可以把作品交给导师或教授去打分了。如果你是在自学，也可以在 本节测验的讨论页 或者 Mozilla 聊天室 的 #mdn 频道取得帮助。要自己先尝试，作弊是不会有收获的！
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}