aaa

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程页面</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div class="logo">logo</div>
        <div class="search-container">
            <input type="text" placeholder="搜索课程">
            <button>搜索</button>
        </div>
    </header>
    <main>
        <h2>精选训练营课程</h2>
        <div class="card-container" id="cardContainer"></div>
        <!-- 添加课程的表单，初始隐藏 -->
        <div id="createCourseFormContainer" style="display: none;">
            <form id="createCourseForm">
                <label for="courseTitle">课程标题：</label>
                <input type="text" id="courseTitle" required><br>

                <label for="courseContent">课程内容：</label>
                <textarea id="courseContent" required></textarea><br>

                <button type="submit">保存</button>
                <button type="button" onclick="cancelCreateCourse()">取消</button>
            </form>
        </div>
    </main>
    <script src="script.js"></script>
</body>

</html>

css

/* 通用样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

/* 头部样式 */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 24px;
    color: #007bff;
}

.search-container {
    display: flex;
}

.search-container input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}

.search-container button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 主体内容区域样式 */
main {
    padding: 20px;
}

h2 {
    text-align: center;
    margin-bottom: 30px;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    width: 30%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
}

.card.create-card-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.card.create-card-btn i {
    font-size: 30px;
    color: #ccc;
}

.card.create-card-btn p {
    margin-top: 10px;
    color: #333;
}

.card h3 {
    color: #007bff;
    margin-top: 0;
}

.card p {
    margin: 10px 0;
}

.start-time {
    display: flex;
    align-items: center;
    color: #666;
    margin-top: 10px;
}

.icon-clock {
    margin-right: 5px;
}

.detail-btn {
    display: block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.icon-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #ccc;
}

/* 添加课程表单容器样式 */
#createCourseFormContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

#createCourseFormContainer form {
    width: 100%;
}

#createCourseFormContainer label {
    display: block;
    margin-bottom: 5px;
}

#createCourseFormContainer input,
#createCourseFormContainer textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
}

#createCourseFormContainer button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

// 初始课程卡片数据
const courses = [
    {
        title: '全栈Web开发训练营',
        content: '从前段到后端，全面掌握现代Web开发技术。学习HTML、CSS、JavaScript、Node.js、React等热门技术，打造完整的Web应用。',
        startTime: '2023年8月1日'
    },
    {
        title: '数据科学与分析实战',
        content: '掌握数据处理、统计分析和可视化技能。学习Python、R语言、SQL等工具，解决实际业务问题，提升数据驱动决策能力。',
        startTime: '2023年7月20日'
    },
    {
        title: '云计算与DevOps实践',
        content: '学习AWS、Azure等云平台的使用，掌握容器化技术和自动化部署流程。提高系统可靠性和效率，加速软件交付。',
        startTime: '2023年8月10日'
    },
    {
        title: '区块链技术与应用',
        content: '深入理解区块链原理，学习智能合约开发和去中心化应用（DApp）构建。探索区块链在金融、供应链等领域的创新应用。',
        startTime: '2023年9月1日'
    },
    {
        title: '移动应用开发精修班',
        content: '全面学习iOS和Android平台的应用开发技术。掌握Swift、Kotlin等语言，以及跨平台开发框架如React Native和Flutter。',
        startTime: '2023年8月15日'
    }
];

// 渲染课程卡片
function renderCards() {
    const cardContainer = document.getElementById('cardContainer');
    cardContainer.innerHTML = '';

    // 创建添加课程卡片按钮
    const addCardBtn = document.createElement('div');
    addCardBtn.className = 'card create-card-btn';
    addCardBtn.onclick = showCreateForm;
    addCardBtn.innerHTML = `
        <i class="icon-plus"></i>
        <p>添加新课程</p>
    `;
    cardContainer.appendChild(addCardBtn);

    courses.forEach(course => {
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `
            <h3>${course.title}</h3>
            <p>${course.content}</p>
            <div class="start-time">
                <i class="icon-clock"></i>开始时间：${course.startTime}
            </div>
            <button class="detail-btn">了解详情</button>
            <i class="icon-close" onclick="deleteCard(this)">×</i>
        `;
        cardContainer.appendChild(card);
    });
}

// 显示创建课程表单
function showCreateForm() {
    const createCourseFormContainer = document.getElementById('createCourseFormContainer');
    createCourseFormContainer.style.display = 'block';
}

// 取消创建课程
function cancelCreateCourse() {
    const createCourseFormContainer = document.getElementById('createCourseFormContainer');
    createCourseFormContainer.style.display = 'none';

    // 清空表单输入内容
    document.getElementById('courseTitle').value = '';
    document.getElementById('courseContent').value = '';
}

// 删除课程卡片
function deleteCard(btn) {
    const card = btn.closest('.card');
    const index = Array.from(card.parentNode.children).indexOf(card);
    if (index > 0) {
        courses.splice(index - 1, 1);
        renderCards();
    }
}

// 保存课程
function saveCourse() {
    const courseTitle = document.getElementById('courseTitle').value;
    const courseContent = document.getElementById('courseContent').value;

    if (courseTitle && courseContent) {
        const newCourse = {
            title: courseTitle,
            content: courseContent,
            startTime: '暂未设置'
        };

        courses.push(newCourse);
        renderCards();

        // 隐藏表单容器
        const createCourseFormContainer = document.getElementById('createCourseFormContainer');
        createCourseFormContainer.style.display = 'none';

        // 清空表单输入内容
        document.getElementById('courseTitle').value = '';
        document.getElementById('courseContent').value = '';
    } else {
        alert('请填写完整课程信息！');
    }
}

// 页面加载时渲染课程卡片
window.onload = function () {
    renderCards();
};

// 表单提交事件处理
document.getElementById('createCourseForm').addEventListener('submit', function (e) {
    e.preventDefault();
    saveCourse();
});

posted on 2025-01-12 21:01 kekoukele987 阅读(13) 评论(0) 收藏举报

刷新页面返回顶部

aaa

导航

公告