第六周作业

最新推荐文章于 2025-12-17 16:41:30 发布

原创最新推荐文章于 2025-12-17 16:41:30 发布 · 179 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
 
<head>
    <title>学生信息管理</title>
    <style>
        .student {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
        }
 
        .highlight {
            background-color: #f0f0f0;
        }
    </style>
</head>
 
<body>
    <div id="student-list">
        <div class="student">张三</div>
        <div class="student">李四</div>
        <div class="student">王五</div>
        <div class="student">赵六</div>
        <div class="student">钱七</div>
    </div>
 
    <button id="add-label">添加优秀标签</button>
    <button id="toggle-bg">切换背景</button>
    <button id="add-number">添加序号</button>
 
    <script>
        var ostudents = document.getElementsByClassName("student");
        var oaddLabel = document.getElementById("add-label");
        var otoggleBg = document.getElementById("toggle-bg");
        var oaddNumber = document.getElementById("add-number");
 
        oaddLabel.onclick = function () {
            for (var i = 0; i < ostudents.length; i++) {
                ostudents[i].textContent += "-优秀学生";
            }
        };
 
        otoggleBg.onclick = function () {
            for (var i = 0; i < ostudents.length; i++) {
                ostudents[i].classList.toggle("highlight");
            }
        };
 
        oaddNumber.onclick = function () {
            for (var i = 0; i < ostudents.length; i++) {
                ostudents[i].textContent = (i + 1) + "." + ostudents[i].textContent;
            }
        };
    </script>
</body>
 
</html>

<!DOCTYPE html>
<html>
 
<head>
    <title>简易任务管理器</title>
    <style>
        .task {
            padding: 8px;
            margin: 5px;
            border: 1px solid #ddd;
        }
 
        .task:hover {
            background-color: #e6f7ff;
        }
 
        /* 浅蓝色背景 */
        .completed::before {
            content: "✅ ";
        }
 
        /* 完成符号 */
        .delete-btn {
            margin-left: 10px;
            color: red;
            cursor: pointer;
        }
 
        .delete-btn:hover {
            text-decoration: underline;
        }
    </style>
</head>
 
<body>
    <h3>我的任务列表</h3>
 
    <input type="text" id="task-input" placeholder="输入新任务">
    <button id="add-task">添加任务</button>
    <br><br>
 
    <button id="mark-all">标记全部完成</button>
    <button id="clear-completed">清除完成项</button>
 
    <div id="task-list">
        <!-- 任务将动态添加到这里 -->
    </div>
 
    <script>
        var otaskInput = document.getElementById("task-input");
        var oaddTask = document.getElementById("add-task");
        var omarkAll = document.getElementById("mark-all");
        var oclearCompleted = document.getElementById("clear-completed");
        var otaskList = document.getElementById("task-list");
 
        //添加任务
        oaddTask.onclick = function () {
            var taskText = otaskInput.value;
            //创建任务元素
            var taskElement = document.createElement("div");
            taskElement.className = "task";
            //创建任务文本节点
            var taskContent = document.createTextNode(taskText);
            //创建删除按钮
            var delBtn = document.createElement("span");
            delBtn.className = "delete-btn";
            delBtn.textContent = "删除";
 
            delBtn.onclick = function () {
                taskElement.remove();
            };
            //组装任务并添加至任务列表
            taskElement.appendChild(taskContent);
            taskElement.appendChild(delBtn);
            otaskList.appendChild(taskElement);
            //清空输入框
            otaskInput.value = '';
        };
 
        //标记全部完成
        omarkAll.onclick=function(){
            var allTask=document.getElementsByClassName("task");
            for(var i=0;i<allTask.length;i++){
                allTask[i].classList.add("completed");
            }
        };
 
        //清空完成
        oclearCompleted.onclick=function(){
            var completedTasks=document.querySelectorAll(".task.completed");
            for(var i=0;i<completedTasks.length;i++){
                completedTasks[i].remove();
            }
        }
    </script>
</body>
 
</html>

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-案例</title>
</head>
 
<body>
    <!-- 灯泡图片及控制按钮 -->
    <img id="light" src="img/off.gif"> <br>
    <input type="button" value="点亮">
    <input type="button" value="熄灭">
 
    <br> <br>
 
    <!-- 文本添加区域 -->
    <input type="text" id="name" placeholder="请输入">
    <input type="button" id="add" value="添加">
    <input type="button" id="good" value="好棒棒">
    <div id="texe-list"></div>
 
    <br> <br>
 
    <!-- 复选框及控制按钮 -->
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <input type="button" value="全选">
    <input type="button" value="反选">
 
    <script>
        // 获取DOM元素
        var img = document.getElementById("light");
        var allBtn = document.getElementsByTagName("input"); // 所有input元素集合
        
        // 文本添加相关元素
        var oaddText = document.getElementById("name");
        var oaddBtn = document.getElementById("add");
        var otextList = document.getElementById("texe-list");
        var ogoodBtn = document.getElementById("good");
        
        // 复选框相关元素
        var ohobby = document.getElementsByName("hobby");
 
 
        // 1. 灯泡控制功能
        var lightBtn = allBtn[0]; // 点亮按钮（第1个input）
        var offBtn = allBtn[1];   // 熄灭按钮（第2个input）
        
        lightBtn.onclick = function () {
            img.src = "img/on.gif"; // 切换为点亮图片
        };
        
        offBtn.onclick = function () {
            img.src = "img/off.gif"; // 切换为熄灭图片
        };
 
 
        // 2. 列表添加功能
        oaddBtn.onclick = function () {
            var addText = oaddText.value;
            var addElement = document.createElement("div");
            addElement.className = "text";
            var addContont = document.createTextNode(addText);
            
            addElement.appendChild(addContont);
            otextList.appendChild(addElement);
            oaddText.value = ""; // 清空输入框
        };
 
 
        // 3. 给列表项添加"very good"
        ogoodBtn.onclick = function () {
            var otext = document.getElementsByClassName("text");
            for (var i = 0; i < otext.length; i++) {
                // 每个列表项创建独立的红色文字元素
                var goodSpan = document.createElement("span");
                goodSpan.style.color = "red";
                goodSpan.textContent = " very good";
                otext[i].appendChild(goodSpan);
            }
        };
 
 
        // 4. 复选框全选/反选功能
        var markAllBtn = allBtn[8];  // 全选按钮（第9个input）
        var clearAllBtn = allBtn[9]; // 反选按钮（第10个input）
        
        // 全选功能
        markAllBtn.onclick = function () {
            for (var i = 0; i < ohobby.length; i++) {
                ohobby[i].checked = true;
            }
        };
        
        // 反选功能（原代码变量名clearAllBtn实际为反选，保持原有逻辑）
        clearAllBtn.onclick = function () {
            for (var i = 0; i < ohobby.length; i++) {
                ohobby[i].checked = false;
            }
        };
    </script>
 
</body>
 
</html>