个人简历JavaScript

原创

mob64ca12f49f4b 2024-11-15 03:48:55 ©著作权

文章标签 HTML CSS 饼状图 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f49f4b的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript实现个人简历的入门指南

对于刚入行的小白来说，制作一个个人简历网页是一个非常好的实践项目，能帮助你理解HTML、CSS和JavaScript的基本用法。本文将逐步引导你完成这项任务，过程分为几个主要步骤：

流程步骤表

流程步骤	描述
1. 创建HTML页面	构建个人简历的基础结构
2. 添加样式	使用CSS美化网页布局
3. 实现功能	利用JavaScript添加交互
4. 可视化数据	使用Mermaid生成图表与旅程示例
5. 代码整合	将所有段落合成完整的案例

第一步：创建HTML页面

在这个步骤中，我们需要创建一个HTML文件，以构建个人简历的基本结构。

<!DOCTYPE html>
<html>
<head>
    <title>个人简历</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入样式文件 -->
</head>
<body>
    个人简历
    <h2>基本信息</h2>
    <p id="name">姓名: 小明</p>
    <p id="email">邮箱: xiaoming@example.com</p>

    <h2>技能</h2>
    <ul id="skills"> <!-- 技能列表 -->
        <li>JavaScript</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>

    <h2>职业旅程</h2>
    <div id="journey"></div> <!-- 职业旅程图 -->
    
    <h2>技能分布</h2>
    <div id="pie-chart"></div> <!-- 饼状图 -->
    
    <script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

第二步：添加样式

接下来，我们需要通过CSS文件来设计网页的外观。创建一个名为 styles.css 的文件，并添加以下内容。

body {
    font-family: Arial, sans-serif; /* 设置字体 */
    margin: 20px; /* 设置外边距 */
}

h1 {
    color: teal; /* 设置标题颜色 */
}

h2 {
    border-bottom: 1px solid #ccc; /* 给子标题添加下划线 */
}

第三步：实现功能

在script.js文件中，我们将添加一些JavaScript代码来实现动态效果，例如显示技能信息与旅程图表。

// JavaScript代显示技能分布
const skills = {
    "JavaScript": 45,
    "HTML": 35,
    "CSS": 20,
};

// 创建技能饼状图展示
function createPieChart(data) {
    const pieChart = document.getElementById('pie-chart');
    pieChart.innerHTML = `
    ```mermaid
    pie
        title 技能分布
        "JavaScript": ${data["JavaScript"]}
        "HTML": ${data["HTML"]}
        "CSS": ${data["CSS"]}
    ```
    `; 
}

createPieChart(skills); // 调用函数生成饼状图

// 添加职业旅程的图示
function createJourney() {
    const journey = document.getElementById('journey');
    journey.innerHTML = `
    ```mermaid
    journey
        title 我的职业旅程
        section 学习
          学习HTML: 5: 学习
          学习CSS: 5: 学习
          学习JavaScript: 6: 学习
        section 实习
          实习开发者: 3: 实习
          参与项目: 4: 实习
        section 正式工作
          正式开发者: 2: 工作
    ```
    `; 
}

createJourney(); // 调用函数生成职业旅程图