推荐模板：起名源码_宝宝起名模板（含整站源码）V1.1

演示地址：http://xin.zutian.com/

CMS版本：最低V 5.21

主题价格：1599.00元

发布日期：2023-12-13 23:46:41

下载安装：进入下载

下载次数：266 次

授权方式：顶级域名授权，无限开二级域名

说明： 1、可以更换域名, 一年不超过两次。

　　　 2、模板包含整站源码，使用者不得建立非法网站。

　　　 3、客服在线解答问题，永久免费更新升级。

　　　 4、系统源码永久开源，模板永久开源，方便自定义修改。

最佳答案

以下是一个简单的在线起名网站的PC端源代码示例：

index.html:

在线起名网



选择名字类型：

男孩名字
女孩名字
姓氏
宠物名字

名字长度：

style.css:

body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
label {
margin-bottom: 10px;
font-weight: bold;
color: #666;
}
select, input[type="number"] {
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#nameResult {
text-align: center;
font-weight: bold;
color: #333;
}

script.js:

```js

const nameGeneratorForm = document.getElementById('nameGeneratorForm');

const nameResult = document.getElementById('nameResult');

nameGeneratorForm.addEventListener('submit', function (e) {

e.preventDefault();

const nameType = document.getElementById('nameType').value;

const nameLength = document.getElementById('nameLength').value;

// 调用起名API生成随机名字

const generatedName = generateName(nameType, nameLength);

nameResult.innerHTML = generatedName;

});

function generateName(nameType, nameLength) {

let name = '';

// 根据选定的名字类型生成名字

switch (nameType) {

case 'male':

name = generateMaleName(nameLength);

break;

case 'female':

name = generateFemaleName(nameLength);

break;

case 'surname':

name = generateSurname();

break;

case 'pet':

name = generatePetName();

break;

}

return name;

}

function generateMaleName(nameLength) {

// 实现生成男孩名字的逻辑

}

function generateFemaleName(nameLength) {

// 实现生成女孩名字的逻辑

}

function generateSurname() {

// 实现生成姓氏的逻辑

}

function generatePetName() {

// 实现生成宠物名字的逻辑

}

请注意，此代码仅为示例，需要根据具体需求进行修改和完善。还需要实现生成具体名字的逻辑，并与后端交互来获得随机的名字。这里的代码中，只是给出了一个大致框架，你需要根据实际情况进行具体的实现和后台交互。

其他答案

以下是一个PC端的在线起名网站的源码示例：

HTML代码：

在线起名网



请输入姓名：

生成起名结果

CSS代码（style.css）：

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
main {
padding: 20px;
}
form {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input {
width: 300px;
padding: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
#result {
border: 1px solid #ddd;
padding: 20px;
}

JavaScript代码（script.js）：

```javascript

const form = document.querySelector('form');

const resultDiv = document.querySelector('#result');

form.addEventListener('submit', function(event) {

event.preventDefault();

// 获取用户输入的姓名

const nameInput = document.querySelector('#name');

const name = nameInput.value;

// 发送请求到后端，获取起名结果

// 这里使用了假数据作为示例

const result = generateName(name);

// 显示起名结果

resultDiv.textContent = `起名结果：${result}`;

});

// 假设的生成起名结果的函数

function generateName(name) {

return name + '先生/女士';

}

以上是一个简单的在线起名网站的源码示例，你可以根据自己的需求进行修改和扩展，比如可以使用真实的起名算法来生成起名结果，或者添加更多的用户交互和功能。