用js实现一个无聊名字的生成器

最新推荐文章于 2023-04-24 11:53:17 发布

清风a50

最新推荐文章于 2023-04-24 11:53:17 发布

阅读量2.1k

点赞数

分类专栏： javascript学习文章标签： js实现无聊名字生成器简单用例

本文链接：https://blog.csdn.net/a5421901/article/details/38584973

版权

javascript学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html部分：

<!DOCTYPE html>
<html>
<head>
<title>Silly Name Generator</title>
<script src="script05.js"></script>
</head>
<body>
<h1>What's your silly name?</h1>
<table>
<tr>
<td class="rtAlign">First Name:</td>
<td><input type="text" id="fName" size="30"></td>
</tr>
<tr>
<td class="rtAlign">Last Name:</td>
<td><input type="text" id="lName" size="30"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit" id="sillySubmit">
</tr>
</table>
<p id="msgField"> </p>
</body>
</html>

js部分：

window.onload = initAll;
function initAll() {
document.getElementById("sillySubmit").onclick = function() {
document.getElementById("msgField").innerHTML = getSillyName();
return false;
}
}
function getSillyName() {
var firstName = ["Runny", "Buttercup","Dinky", "Stinky", "Crusty", "Greasy","Gidget", "Cheesypoof",
"Lumpy","Wacky", "Tiny", "Flunky", "Fluffy","Zippy", "Doofus", "Gobsmacked","Slimy", "Grimy",
"Salamander","Oily", "Burrito", "Bumpy", "Loopy","Snotty", "Irving", "Egbert"];

分析部分：

1. document.getElementById("msgField").innerHTML = getSillyName();
return false;
当最初加载页面时，将submit按钮的onclick处理程序设置为调用一个函数，这里是这个函数
的内容。首先，调用getSillyName()。这个函数返回一个字符串值（要么是无聊名，要么是一个错
误消息），我们会把这个字符串写到页面上。然后返回false，这样onclick就不会尝试将表单提交
到服务器。

2. var firstNm = document.getElementById("fName").value.toUpperCase();
var lastNm = document.getElementById("lName").value.toUpperCase();
页面要求每个访问者在文本字段中输入他们的名字和姓氏。当提交表单时，在getSillyName()函
数中，首先将名字和姓氏转换为全大写，并且将结果存储在变量firstNm和lastNm中。
3. if (firstNm = ="") {
validName = false;
}
页面要求访问者第一次在名字字段中至少输入一个字符，所以在这里进行检查。请记住，这个表
达式的意义是“如果firstNm为空，那么……”。如果是这种情况，就将validName设置为false。
4. var firstNum = firstNm.charCodeAt(0) - 65;
否则，charCodeAt()方法从字符串中取出一个字符。这个字符的位置取决于传递给方法的数字参
数。在这个示例中，取出0位置上的字符，也就是字符串中的第一个字符（请记住，JavaScript 从0
开始编号），并且返回这个字符的ASCII值。大写字母A的ASCII值为65，Z的ASCII值为90。所
以将返回值减65应该获得0～25的值，将结果保存在firstNum中。
5. if (firstNum < 0 || firstNum > 25) {
validName = false;
}
如果用户输入的名字并非以A～Z的字符开头，那么就没有对应的无聊名。所以，在检查姓氏之
前，要确保首字母处于这个范围中。如果不满足这个条件，就将validName设置为false。
6. if (!validName) {
document.getElementById("fName").focus();
document.getElementById("fName").select();
return "That's not a valid first name";
}
在这里检查validName，如果validName是false，就意味着用户输入的名字是无效的。当发生这
种情况时，我们将输入光标放进这个字段，选择这个字段中的所有内容，并且返回上一个错误消息。
7. if (lastNm == "") {
validName = false;
}
与名字一样，访问者必须在姓氏字段中输入一些内容。
8. var lastNum1 = lastNm.charCodeAt(0) - 65;
var lastNum2 = lastNm.charCodeAt((lastNm.length-1)) - 65;
为了找到访问者的无聊姓氏，需要找到姓氏的第一个字符和最后一个字符的ASCII值。第一个字
符的处理与步骤4中相似。最后一个字符是通过lastNm字符串的长度减1，然后将这个数字传递给
charCodeAt()方法找到的。
9. if (lastNum1 < 0 || lastNum1 > 25 || lastNum2 < 0 || lastNum2 > 25) {
validName = false;
}
与名字字段一样，必须确保姓氏的第一个字符和最后一个字符包含A～Z的字符；如果不满足条
件，就将validName再次设置为false。

10. if (!validName) {
document.getElementById("lName").focus();
document.getElementById("lName").select();
return "That's not a valid last name";
}
与第6步中一样，如果姓氏是无效的，就向用户显示错误
消息。
11. return "Your silly name is " + firstName[firstNum] +
➝" "+ lastName1[lastNum1] + lastName2[lastNum2];
如果通过了所有测试，就要计算这个新的无聊名了。因为
已经将字符转换为0～25 的数字，所以可以将结果用作
firstName、lastName1和lastName2数组的索引。将每个数组查
找的结果依次拼接起来，并且在名字和姓氏之间加一个空格。
注意，姓氏的两部分是直接拼接的，没有加空格。完成之后，
将这个姓名返回并放进文档中