这段代码是一个简单的"幸福宝宝取名器"网页应用，主要功能是根据用户输入的姓氏、性别和生成数量，随机生成宝宝的名字。以下是代码的主要组成部分和功能简介：
- HTML 结构
-
文档类型和语言：使用 `<!DOCTYPE html>` 声明文档类型，并设置语言为中文（简体）。
-
头部信息：包含字符集设置、视口设置和页面标题。
-
样式：通过内联 CSS 定义了页面的样式，包括字体、背景、表单样式和响应式设计。
- 页面布局
-
标题：使用 `<h1>` 标签展示应用名称"幸福宝宝取名器"。
-
表单：包含多个输入字段：
-
姓氏输入框，要求输入1到3个中文字符。
-
性别选择下拉菜单（男、女）。
-
生成数量选择下拉菜单（5、10、15）。
-
提交按钮，触发生成名字的功能。
- PHP 逻辑
-
表单处理：在用户提交表单后，使用 PHP 处理 POST 请求。
-
名字生成函数 `getRandomName` ：
-
定义了男孩和女孩的名字数组。
-
根据用户选择的性别随机选择两个名字，并组合成完整的姓名。
-
返回生成的姓名数组。
-
输出生成的姓名：将生成的姓名以列表形式展示在页面上。
- 响应式设计
- 使用媒体查询（ `@media` ）调整在小屏幕设备上的字体大小和按钮样式，确保在不同设备上的可读性和可用性。
- 用户体验
-
提供了输入提示和错误信息，确保用户输入有效的姓氏。
-
在生成姓名后，清晰地展示生成的结果，增强用户体验。
php
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幸福宝宝取名器</title>
<style>
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #f8f9fa;
color: #333;
text-align: center;
padding: 50px;
background-image: url('1.jpg');
background-size: cover;
}
h1 {
color:black;
font-size: 3em;
margin-bottom: 30px;
font-family: 'KaiTi', serif; /* 使用楷体 */
}
form {
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 500px;
}
label {
font-size: 1.2em;
margin-bottom: 10px;
display: block;
text-align: left;
}
input[type="text"], select {
padding: 12px;
font-size: 1em;
border-radius: 5px;
border: 1px solid #ced4da;
margin-bottom: 20px;
width: calc(100% - 24px);
transition: border-color 0.3s;
}
input[type="text"]:focus, select:focus {
border-color: #80bdff;
outline: none;
}
input[type="submit"] {
background-color: #007bff;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 1.2em;
transition: background-color 0.3s, box-shadow 0.3s;
}
input[type="submit"]:hover {
background-color: #0056b3;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
h2 {
margin-top: 30px;
color: #495057;
font-size: 2em;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin: 10px 0;
font-size: 1.5em;
color: #28a745;
}
@media (max-width: 600px) {
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.5em;
}
input[type="submit"] {
font-size: 1em;
}
}
</style>
</head>
<body>
<h1>幸福宝宝取名器</h1>
<form method="post" action="">
<label for="lastname">请输入您的姓氏：</label>
<input type="text" id="lastname" name="lastname" required maxlength="3" pattern="[\u4e00-\u9fa5]{1,3}" title="请输入1到3个中文字符">
<label for="gender">选择性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<label for="count">生成数量：</label>
<select id="count" name="count">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<input type="submit" value="生成随机姓名">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
function getRandomName($lastname, $gender, $count = 1) {
// 男孩名字数组
$male_firstname_arr = array('伟','刚','勇','毅','俊','峰','军','平','保','东','文','辉','力','明','永','健','世','广','志','义','兴','良','海','山','仁','波','宁','贵','福','生','龙',
'元','全','国','胜','学','祥','才','发','武','新','利','清','飞','彬','富','顺','信','子','杰','涛','昌','成','康','星','光','天','达','安','岩','中','茂','进','林','有','坚',
'和','彪','博','诚','先','敬','震','振','壮','会','思','群','豪','心','邦','承','乐','绍','功','松','善','厚','庆','磊','民','友','裕','河','哲','江','超','浩','亮','政','谦',
'亨','奇','固','之','轮','翰','朗','伯','宏','言','若','鸣','朋','斌','梁','栋','维','启','克','伦','翔','旭','鹏','泽','晨','辰','士','以','建','家','致','树','炎','德','行',
'时','泰','盛','雄','琛','钧','冠','策','腾','楠','榕','风','航','弘','秀');
// 女孩名字数组
$female_firstname_arr = array('静','娟','英','华','慧','巧',
'美','娜','淑','惠','珠','翠','雅','芝','玉','萍','红','娥','玲','芬'
,'芳','燕','彩','春','菊','兰','凤','洁','梅','琳','素','云','莲','真'
,'环','雪','荣','爱','妹','霞','香','月','莺','媛','艳','妮','妲','妞','姝','妍','媚',
'姬','娜','娥','娣','嫣','好',
'妹','媛','娅','娴','婵','婕',
'妙','如','姑','娘','嫦','嬉',
'妤','婧','姻','婷','嫙','娇',
'梦','岚','卿','柔','若','小',
'晓','静','淑','芝','枫','芸',
'冰','羽','飘','露','蕊','薇',
'寒','伊','亚','萍','云','叶',
'秋','春','珊','姣','婉','瑾',
'滢','洛','沁','斐','雅','筱',
'敏','美','靓','丽','莲','霞',
'月','香','莺','桂','艳','霄',
'影','宜','可','荔','枝','秀',
'娟','珠','翠','玉','芬','芳',
'燕','菊','莉','洁','梅','琳',
'璧','璐','琦','莎','瑶','雁',
'蓓','荷','蓉','苑','瑗','琰',
'园','馥','璇','凤','芙','颜',
'涵','凡','佳','思','瑞','枫',
'贞','英','华','慧','巧','惠',
'玲','嘉','勤','珍','真','荣',
'琼','锦','颖','怡','仪','君',
'然','馨','韵','艺','咏','聪',
'悦','昭','爽','茗','希','宁',
'欣','育','学','文','萱','轩',
'红','彩','兰','素','丹','蓝',
'虹','黛','青','菁','朱','绿',
'紫','绯','彤','赫','霓','蔚',
'碧','褐','靛','锈','胭','金',
'橙','榄','玄','茜','雪','冰',
'莹','雪','琳','晗','涵','琴','晴','丽','美','瑶','梦','茜','倩','希','夕','梅','月',
'悦','乐','彤','珍','依','沫','玉','灵','婷','菲','萱','欣','婷','雪','薇','佳','可',
'芳','芬','月','慧','俊','盈','莹','慈','薇','雪','璇','妍','莹','雪','琳','晗','涵',
'琴','晴','丽','美','瑶','梦','茜','倩','希','妍','琳','梦','丽','若','美','娅','清',
'舒','玉','映','蓉','长','英','丽','美','夕','文','琳','涵','燕','星','善','玲','宇',
'芳','铭','倩','琴','子','筱','雪','旭','妍','婷','怡','婷','莉','颖','悦','悦','芝',
'蓉','艳','玉','欣','颖','榕','嫣','晓','悦','秀','青','蓉','妍','羽','洁','玲','雨',
'蓉','胜','红','慧','琴','道','芳','辰','蓉','贞','颖','妍','婷','琼','昱','瑛','秀','祖','萍','雨','琼','瑞','娟','芳','瑶','国','娟','文','玉','颖','婷','娜','怡','臣','倩','儿','璐','梅','家','格','洋','莉','玟','心','文','瑄','景','羡','冉','玉','玉','怡','晨','宗','颖','研','悦','艾','琳','金','莹','琳','婷','育','歆','永','君','璐','萱','文','悦','新','霞','文','芮','倩','淇','玉','芳','方','文','怡','敏','宇','宇','希','悦','薇','婷','莹','美','秀','娟','英','华','慧','巧','美','娜','静','淑','惠','珠','翠','雅','芝','玉',
'萍','红','娥','玲','芬','芳','燕','彩','春','菊','兰','凤','洁','梅','琳','素','云','莲','真','环','雪','荣','爱','妹','霞','香','月',
'莺','媛','艳','瑞','凡','佳','嘉','琼','勤','珍','贞','莉','桂','娣','叶','璧','璐','娅','琦','晶','妍','茜','秋','珊','莎','锦','黛','青','倩','婷','姣','婉','娴','瑾','颖','露','瑶','怡','婵','雁','蓓','纨','仪','荷','丹','蓉','眉','君','琴','蕊','薇','菁','梦','岚','苑','婕','馨','瑗','琰','韵','融','园','艺','咏','卿','聪','澜','纯','毓','悦','昭','冰','爽','琬','茗','羽','希','宁','欣','飘','育','滢','馥','筠','柔','竹','霭','凝','晓','欢','霄','枫','芸','菲','寒','伊','亚','宜','可','姬','舒','影','荔','枝','思','丽',
'淇','馨','彦','榆','婷','忆','宁','蓉',
'霄','虞','雯','滢','宁','俪','童','佳',
'润','茹','凉','丽','萌','瑾','阳','诗',
'万','梓','怡','滢','迪','宛','影','筱',
'馥','痴','正','筠','桐','桐','寻','歆',
'菡','雨','云','新','翔','忆','蕊','怡',
'惜','荣','翾','姿','甜','娜','冬','皎',
'泽','婧','书','洁','妙','钰','冉','缘',
'絮','缦','觅','帆','雅','瑾','蓓','绮',
'珍','江','嫣','菱','阳','瑶','璟','念',
'滢','瑾','卿','茜','笛','豆','汐','菱',
'笛','婷','灵','瑛','婷','菡','甯','翾',
'泽','伊','媛','甜','蕾','倩','奇','兮',
'雯','林','宛','昕','沐','钰','微','菡',
'莉','念','倩','蓉','晴','梵','萱','嫣',
'然','慧','沁','又','熙','宛','妮','惜',
'慕','令','奇','莎','澜','丽','又','娅',
'波','冰','怀','娜','趣','甯','问','婕',
'叶','芊','语','书','梓','孤','傲','卿',
'恩','翾','茜','灵','江','柯','问','宸',
'铃','正','婧','碧','娜','欣','卓','婧',
'缦','歆','兮','孤','娇','嫦','帆','爽',
'净','悦','以','正','蕾','芷','昕','静',
'妤','向','傲','优','白','甯','儿','悠',
'豆','白','儿','洁','翾','夏','唯','孤',
'梵','夏','希','桂','睿','朵','绮','华',
'缘','甜','颍','瑾','岚','涵','颖','皎',
'寻','音','茜','若','舒','岚','兰','歆',
'筠','若','莎','芷','淼','安','爽','靖',
'馥','桂','涵','然','恩','万','可','泉',
'帆','萱','翔','采','净','又','菡','悦',
'娣','薇','菲','蓓','睿','倩','儿','钰',
'敏','云','晓','雯','璟','柯','清','倩',
'滢','娣','江','颖','婕','晴','润','盼',
'恬','琳','茜','澜','芷','昊','枫','兔',
'慧','慕','佑','新','亦','龄','榆','缘',
'婉','铃','丝','舒','惜','雅','自','恩',
'敏','如','瑶','梵','娴','蓉','婉','妍',
'敏','瑜','若','瑶','语','莎','缦','筠',
'然','缦','榆','江','水','玥','俪','曦',
'彩','笛','可','丽','玥','蓓','知','桂',
'鸣','妹','迪','悠','兔','浩','昊','令',
'听','芙','任','沁','笛','霄','君','恬',
'娅','翔','馨','趣','馨','妤','采','微',
'寄','芙','媛','珺','兰','秋','娣','泉',
'睿','听','姗','爱','双','恩','婷','波',
'杏','叶','璇','甜','问','如','碧','唯',
'南','奕','伊','波','辰','颍','爱','嫣',
'萱','琼','妹','白','凉','新','沁','甯',
'童','碧','靖','珍','君','瑜','璟','思',
'萌','冉','楚','初','优','知','乐','影',
'知','颍','娴','语','恬','黛','瑾','艺',
'琳','蓉','如','问','璐','妍','慕','薇',
'依','杏','瑛','珠','诗','旋','彦','阳',
'妮','妍','洛','沐','黛','沐','普','思',
'平','念','梦','澜','莉','洛','絮','珺',
'爽','迪','敏','娇','影','迪','润','妮',
'然','梓','萌','裳','熙','令','乐','碧',
'淼','冬','冉','筱','妹','以','霄','洁',
'芊','云','黛','佳','兮','听','琦','沛',
'思','安','恬','嫦','童','桂','普','语',
'悠','翔','呜','超','歆','晴','卿','沁',
'音','浩','舒','夜','莉','俪','谷','兰',
'君','楚','惜','珺','阳','妤','卓','灵',
'知','平','寄','怡','音','静','向','超',
'媱','枫','絮','以','铃','梦','昕','曦',
'妮','璇','薇','安','艺','伊','梵','泽',
'桐','馨','悠','初','欣','梦','媱','蓝',
'璇','紫','熙','娴','书','紫','可','绿',
'虹','璇','瑜','薇','含','颖','旋','姝',
'南','知','彩','君','伊','傲','筠','芊',
'娜','芷','爱','娇','芙','乐','正','嫣',
'音','觅','宁','娇','玥','蕊','夜','慧',
'靖','楚','超','馥','彦','伊','忆','龄',
'紫','童','觅','万','茹','卿','潼','茹',
'奇','奕','莹','唯','朵','辰','盼','兮',
'筱','朵','婧','安','昊','采','南','珠',
'云','绮','灵','姝','姿','莹','璟','孤',
'铃','痴','兔','优','姿','谷','雯','盼',
'波','杏','淼','茵','珺','白','慕','旋',
'茜','汐','妙','裳','爽','妙','晓','沐',
'菱','秋','笑','筱','鸣','菱','诗','宛',
'茵','琼','珞','豆','珍','蕾','洛','琦',
'听','亦','谷','冰','初','鸣','平','昕',
'淼','含','令','诗','绿','岚','娅','悦',
'珞','芍','莎','若','帆','茵','唯','笑',
'璐','趣','珠','皎','熙','普','缘','恩',
'忆','任','平','林','琼','岚','潼','旋',
'怀','林','瑛','淇','卓','水','儿','华',
'爱','鸣','絮','净','婕','荣','虞','俪',
'萌','莹','雅','妍','华','怡','夏','念',
'含','怀','晓','呜','真','含','瑶','冰',
'雨','萱','丝','芍','佳','姗','菡','自',
'又','珞','清','汐','以','希','凉','芙',
'娜','绮','涵','万','馥','凉','泉','珠',
'熙','楚','璐','痴','娅','婉','水','菲',
'双','睿','虹','绿','娅','颖','娣','姗',
'龄','姝','珍','语','新','秋','双','甜',
'雨','傲','兔','瑜','霄','普','怀','辰',
'奕','真','依','艺','彩','初','枫','如',
'自','虹','正','盼','裳','潼','笑','寻',
'书','钰','娴','向','依','趣','浩','杏',
'丽','净','南','薇','冬','龄','辰','佑',
'清','妹','映','寻','蕾','璐','琦','优',
'呜','舒','乐','虞','枫','玥','芊','靖',
'妤','泽','可','兰','茹','兰','婉','梦',
'洛','淇','琳','卓','映','汐','媛','馨',
'潼','妙','清','瑜','嫦','彩','静','映',
'莹','江','微','亦','曦','谷','澜','笑',
'蕊','梓','真','润','秋','淇','微','静',
'雨','姿','佑','宸','冰','沛','姝','叶',
'宸','彦','任','亦','水','冬','婕','任',
'蓝','琼','琳','朵','夜','昊','思','夏',
'真','沛','柯','希','洁','叶','嫣','茵',
'菲','依','梓','紫','奕','欣','蓓','荣',
'雅','宁','慧','采','荣','林','双','欣',
'丝','倩','芍','丝','淇','蕊','馨','向',
'乐','黛','华','希','痴','艺','珞','泉',
'琦','晴','裳','豆','自','珍','虞','柯',
'冉','蓝','泉','桐','媱','姗','蓝','嫦',
'莉','涵','绿','映','宸','呜','佑','佳','萱','润','涵','觅','悦','奇','曦','寄',
'兮','颍','超','寄','皎','虹','紫','媱','蓓','菲','沛','卿','芍','玥','悠','影',
'虹','瑛','媛','晓','雨','林','榆','夜','瑞','凡','佳','嘉','琼','勤','珍','贞','莉','桂','娣','叶','璧','璐','娅','琦','晶','妍','茜','秋','珊','莎','锦','黛','青','倩','婷','姣','婉','娴','瑾','颖','露','瑶','怡','婵','雁','蓓','纨','仪','荷','丹','蓉','眉','君','琴','蕊','薇','菁','梦','岚','苑','婕','馨','瑗','琰','韵','融','园','艺','咏','卿','聪','澜','纯','毓','悦','昭','冰','爽','琬','茗','羽','希','欣','飘','育','滢','馥','筠','柔','竹','霭','凝','晓','欢','霄','枫','芸','菲','寒','伊','亚','宜','可','姬','舒','影','荔','枝','丽','阳','妮','宝','贝','初','程','梵','恒','鸿','桦','剑','娇','纪','宽','苛','灵','玛','媚','琪','晴','容','睿','烁','堂','唯','威','韦','雯','苇','萱','阅','彦','宇','雨','洋','忠','宗','曼','紫','逸','贤','蝶','菡','绿','蓝','儿','翠','烟','雨');
$names = [];
for ($i = 0; $i < $count; $i++) {
// 根据性别选择名字数组
if ($gender === 'male') {
$key1 = rand(0, count($male_firstname_arr) - 1);
$two_name = $male_firstname_arr[$key1];
$key2 = rand(0, count($male_firstname_arr) - 1);
$three_name = $male_firstname_arr[$key2];
} else {
$key1 = rand(0, count($female_firstname_arr) - 1);
$two_name = $female_firstname_arr[$key1];
$key2 = rand(0, count($female_firstname_arr) - 1);
$three_name = $female_firstname_arr[$key2];
}
// 组合姓名
$name = $lastname . $two_name . $three_name;
$names[] = $name;
}
return $names;
}
// 获取用户输入的姓氏和性别
$lastname = htmlspecialchars(trim($_POST["lastname"]));
$gender = $_POST["gender"];
$count = intval($_POST["count"]);
// 生成随机姓名并输出
$randomNames = getRandomName($lastname, $gender, $count);
echo "<h2>生成的随机姓名：</h2>";
echo "<ul>";
foreach ($randomNames as $name) {
echo "<li>" . $name . "</li>";
}
echo "</ul>";
}
?>
</body>
</html>