做汽车网可参考网站,互联网行业现状分析,wordpress 分享 赞,怎么黑掉织梦做的网站这段代码是一个简单的“幸福宝宝取名器”网页应用#xff0c;主要功能是根据用户输入的姓氏、性别和生成数量#xff0c;随机生成宝宝的名字。以下是代码的主要组成部分和功能简介#xff1a;
1. HTML 结构 - 文档类型和语言#xff1a;使用 !DOCTYPE html 声明文…这段代码是一个简单的“幸福宝宝取名器”网页应用主要功能是根据用户输入的姓氏、性别和生成数量随机生成宝宝的名字。以下是代码的主要组成部分和功能简介
1. HTML 结构 - 文档类型和语言使用 !DOCTYPE html 声明文档类型并设置语言为中文简体。 - 头部信息包含字符集设置、视口设置和页面标题。 - 样式通过内联 CSS 定义了页面的样式包括字体、背景、表单样式和响应式设计。
2. 页面布局 - 标题使用 h1 标签展示应用名称“幸福宝宝取名器”。 - 表单包含多个输入字段 - 姓氏输入框要求输入1到3个中文字符。 - 性别选择下拉菜单男、女。 - 生成数量选择下拉菜单5、10、15。 - 提交按钮触发生成名字的功能。
3. PHP 逻辑 - 表单处理在用户提交表单后使用 PHP 处理 POST 请求。 - 名字生成函数 getRandomName - 定义了男孩和女孩的名字数组。 - 根据用户选择的性别随机选择两个名字并组合成完整的姓名。 - 返回生成的姓名数组。 - 输出生成的姓名将生成的姓名以列表形式展示在页面上。
4. 响应式设计 - 使用媒体查询 media 调整在小屏幕设备上的字体大小和按钮样式确保在不同设备上的可读性和可用性。
5. 用户体验 - 提供了输入提示和错误信息确保用户输入有效的姓氏。 - 在生成姓名后清晰地展示生成的结果增强用户体验。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title幸福宝宝取名器/titlestylebody {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[typetext], 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[typetext]:focus, select:focus {border-color: #80bdff;outline: none;}input[typesubmit] {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[typesubmit]: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[typesubmit] {font-size: 1em;}}/style
/head
bodyh1幸福宝宝取名器/h1form methodpost actionlabel forlastname请输入您的姓氏/labelinput typetext idlastname namelastname required maxlength3 pattern[\u4e00-\u9fa5]{1,3} title请输入1到3个中文字符label forgender选择性别/labelselect idgender namegenderoption valuemale男/optionoption valuefemale女/option/selectlabel forcount生成数量/labelselect idcount namecountoption value55/optionoption value1010/optionoption value1515/option/selectinput typesubmit value生成随机姓名/form?phpif ($_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
