📅 最后修改于: 2023-12-03 15:25:31.893000 🧑 作者: Mango
年龄测试是一种简单有趣的小程序，可以用来测试用户的年龄或者心理年龄。程序会根据不同的问题和用户的回答给出最终的结论。
下面是一个简单实现的年龄测试程序，使用了Bootstrap框架来美化界面，Node.js/Express来处理后端逻辑，MongoDB来存储数据。
<!DOCTYPE html>
<html>
<head>
<title>年龄测试</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
body {
padding: 20px;
}
h1 {
margin-bottom: 30px;
}
.question {
margin-bottom: 30px;
}
.btn-group {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">年龄测试</h1>
<div class="question">
<h2>问题1：您的年龄是？</h2>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-secondary" data-answer="under18">18岁以下</button>
<button type="button" class="btn btn-secondary" data-answer="18-25">18-25岁</button>
<button type="button" class="btn btn-secondary" data-answer="26-35">26-35岁</button>
<button type="button" class="btn btn-secondary" data-answer="36-45">36-45岁</button>
<button type="button" class="btn btn-secondary" data-answer="over45">45岁以上</button>
</div>
</div>
<div class="question">
<h2>问题2：你的职业是？</h2>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-secondary" data-answer="student">学生</button>
<button type="button" class="btn btn-secondary" data-answer="developer">程序员</button>
<button type="button" class="btn btn-secondary" data-answer="teacher">教师</button>
<button type="button" class="btn btn-secondary" data-answer="office">上班族</button>
<button type="button" class="btn btn-secondary" data-answer="other">其他</button>
</div>
</div>
<div class="question">
<h2>问题3：你对编程语言掌握的如何？</h2>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-secondary" data-answer="none">一窍不通</button>
<button type="button" class="btn btn-secondary" data-answer="little">了解一些基础概念</button>
<button type="button" class="btn btn-secondary" data-answer="good">掌握不少编程语言</button>
<button type="button" class="btn btn-secondary" data-answer="pro">精通多种编程语言</button>
</div>
</div>
<div class="question">
<h2>问题4：你喜欢哪种编程语言？</h2>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-secondary" data-answer="c">C</button>
<button type="button" class="btn btn-secondary" data-answer="java">Java</button>
<button type="button" class="btn btn-secondary" data-answer="python">Python</button>
<button type="button" class="btn btn-secondary" data-answer="js">JavaScript</button>
<button type="button" class="btn btn-secondary" data-answer="other">其他</button>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary btn-lg" id="submit-btn">提交</button>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
// 问题列表
var questions = [
{
id: 1,
title: '问题1：您的年龄是？'
},
{
id: 2,
title: '问题2：你的职业是？'
},
{
id: 3,
title: '问题3：你对编程语言掌握的如何？'
},
{
id: 4,
title: '问题4：你喜欢哪种编程语言？'
}
];
// 答案列表
var answers = {
under18: {
title: '你还未成年',
message: '建议多多锻炼身体，学习知识，开心每一天！'
},
'18-25': {
title: '你正值青春',
message: '尝试多种新事物，拓宽自己的视野，提升自己的技能！'
},
'26-35': {
title: '你正值壮年',
message: '劳逸结合，保持积极乐观的生活态度，明确自己的职业目标！'
},
'36-45': {
title: '你正值中年',
message: '懂得正确安排工作和生活，保养好身体，享受生活的美好！'
},
over45: {
title: '你已经是中老年人了',
message: '活到老学到老，不断更新自己的知识，珍惜生命的每一天！'
},
student: {
title: '你是一名学生',
message: '好好学习，天天向上！'
},
developer: {
title: '你是一名程序员',
message: '善于沟通，积极学习新知识，努力提升自己的技能！'
},
teacher: {
title: '你是一名教师',
message: '教书育人，传道授业解惑！'
},
office: {
title: '你是一名上班族',
message: '工作要认真负责，生活要有情调品味！'
},
none: {
title: '你一窍不通',
message: '编程是门优秀的技能，你可以努力学习，掌握一些基础概念！'
},
little: {
title: '你有一定的基础概念',
message: '继续努力学习，熟练运用编程语言，成为一名合格的程序员！'
},
good: {
title: '你已经掌握了不少编程语言',
message: '继续保持，学习新技术，提高自己的技能水平！'
},
pro: {
title: '你已经是一名技术大牛了',
message: '你已经掌握了多种编程语言，可以开发出各种强大的软件！'
},
c: {
title: '你喜欢C语言',
message: 'C语言是一门经典的编程语言，适合做底层软件开发，继续努力！'
},
java: {
title: '你喜欢Java',
message: 'Java是一门非常流行的编程语言，适合做后台开发，继续保持！'
},
python: {
title: '你喜欢Python',
message: 'Python是一门非常强大的编程语言，适合做AI和数据分析，继续加油！'
},
js: {
title: '你喜欢JavaScript',
message: 'JavaScript是一门非常灵活的编程语言，适合做Web前端开发，继续发挥你的创造力！'
},
other: {
title: '你喜欢其他编程语言',
message: '任何一门编程语言都有其独特之处，不断学习，成为一名全栈工程师！'
}
};
// 当前问题编号
var currentQuestionIndex = 0;
// 用户答案列表
var userAnswers = {};
// 处理用户的答案
function handleUserAnswer(answer) {
var question = questions[currentQuestionIndex];
var nextQuestion = questions[currentQuestionIndex + 1];
userAnswers[question.id] = answer; // 记录用户的答案
if (nextQuestion) {
// 显示下一个问题
currentQuestionIndex++;
showQuestion(nextQuestion);
} else {
// 显示测试结果
showResult();
}
}
// 显示问题
function showQuestion(question) {
var html = '<h2>' + question.title + '</h2>';
var answers = Object.keys(window.answers).map(function(key) {
var answer = window.answers[key];
return '<button type="button" class="btn btn-secondary" data-answer="' + key + '">' + answer.title + '</button>';
});
html += '<div class="btn-group btn-group-lg" role="group" aria-label="...">' + answers.join('') + '</div>';
$('.question').html(html);
}
// 显示测试结果
function showResult() {
var ageGroups = {
under18: '18岁以下',
'18-25': '18-25岁',
'26-35': '26-35岁',
'36-45': '36-45岁',
over45: '45岁以上'
};
var ageGroup = userAnswers[1];
var occupation = userAnswers[2];
var expertise = userAnswers[3];
var favorite = userAnswers[4];
var title = answers[favorite].title; // 最终结果的标题
var message = answers[favorite].message; // 最终结果的消息
var html = '<div class="result"><h2>您的测试结果如下：</h2>';
html += '<p>您的年龄属于：<strong>' + ageGroups[ageGroup] + '</strong></p>';
html += '<p>您的职业是：<strong>' + answers[occupation].title + '</strong></p>';
html += '<p>您对编程语言的掌握情况为：<strong>' + answers[expertise].title + '</strong></p>';
html += '<p>您最喜欢的编程语言是：<strong>' + title + '</strong></p>';
html += '<p>测试结果消息：<strong>' + message + '</strong></p>';
html += '</div>';
$('.question').html(html);
}
// 处理提交按钮点击事件
$('#submit-btn').click(function() {
var answer = $('.btn-group .active').data('answer');
if (answer) {
handleUserAnswer(answer);
} else {
alert('请作出选择！');
}
});
// 第一次显示问题
showQuestion(questions[0]);
</script>
</body>
</html>
下面是Node.js/Express服务器端代码，用于处理HTTP请求和数据库操作。
const express = require('express');
const mongoose = require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost/age-test', {
useNewUrlParser: true,
useUnifiedTopology: true
}, function(err) {
if (err) {
console.log('连接数据库失败：' + err.message);
} else {
console.log('连接数据库成功！');
}
});
// 定义数据模型
const userAnswerSchema = mongoose.Schema({
userId: String,
questionId: Number,
answer: String
});
// 定义路由
const app = express();
app.use(express.json());
// 处理获取测试结果的请求
app.get('/api/result', function(req, res) {
UserAnswer.find(function(err, result) {
if (err) {
console.log('获取测试结果失败：' + err.message);
res.status(500).send('获取测试结果失败：' + err.message);
} else {
res.send(result);
}
});
});
// 处理提交答案的请求
app.post('/api/answer', function(req, res) {
const userId = req.body.userId;
const questionId = req.body.questionId;
const answer = req.body.answer;
UserAnswer.findOneAndUpdate({
userId: userId,
questionId: questionId
}, {
userId: userId,
questionId: questionId,
answer: answer
}, {
upsert: true
}, function(err, doc) {
if (err) {
console.log('提交答案失败：' + err.message);
res.status(500).send('提交答案失败：' + err.message);
} else {
res.send({
success: true
});
}
});
});
// 启动服务器
app.listen(3000, function() {
console.log('程序已启动，访问 http://localhost:3000 即可开始测试！');
});
年龄测试是一种有趣的小程序，可以用来测试用户的年龄和心理年龄，并根据测试结果给出建议和鼓励。这个程序可以通过HTML/CSS/JavaScript等前端技术和Node.js/Express/MongoDB等后端技术来实现。如果你还没有做过年龄测试，不妨试试这个程序，也许你会发现一些意外的收获哦！