Web课外练习6

最新推荐文章于 2024-06-14 11:01:38 发布
希望蛊
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量257
点赞数 4
文章标签：前端 css javascript
本文链接：https://blog.csdn.net/weixin_74021012/article/details/138256418
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>没啥实力的课外练习6</title>
    <style>
        .tz{
            margin: auto;
            margin-top: 20px;
        }
        .t1{
            width: 320px;
            height: 300px;
            border: 1px solid rgb(224, 224, 205);
            margin-top: 5px;
            border-radius: 8px;
        }
        .t3{
            width: 320px;
            height: 300px;
            border: 1px solid rgb(224, 224, 205);
            margin-top: 5px;
            border-radius: 8px;
        }
        .t4{
            width: 550px;
            height: 120px;
            border: 1px solid rgb(224, 224, 205);
            margin:auto;
            margin-top: 30px;
            border-radius: 8px;
        }
        .anniu{
            background-color: #5b92e0;
            border: 1px ;
            border-radius: 12%;
        }
        .total{
            width: 900px;
            height: 570px;
            border: 1px solid rgb(224, 224, 205);
            margin: auto;
            margin-top: 100px;
        }
        .ann{
            border-style: hidden;
            background-color: #FBFBFB;
            width: 310px;
            text-align: left;
            height: 40px;
            cursor: pointer;
        }
        .ann:hover{
            background-color: #a9adb4;
        }
        .active{
            background-color: #5b92e0;
        }

        .an1{
            border-style: hidden;
            background-color: #FBFBFB;
            width: 310px;
            text-align: left;
            height: 40px;
            cursor: pointer;
        }
        .an1:hover{
            background-color: #a9adb4;
        }
        .ann1{
            border-style: hidden;
            background-color: #FBFBFB;
        }
        .xiabu{
            margin: auto;
            margin-top: 20px;
            border: 1px solid rgb(224, 224, 205);
            border-radius: 12px;
            height: 330px;
        }
        .res{
            border-style: hidden;
            background-color: #FBFBFB;
            width: 40px;
            height: 40px;
            margin-left: 23px;
        }
        .anniu{
            width: 40px;
            height: 35px;
            margin-top: 30px;
            cursor: pointer;
        }
        .selected-fruits {
            display: inline-block; 
            margin-left: 1.3em;
            margin-right: 2.3em; 
            color: red;
        }
    </style>
</head>
<body>
<div class="total">
<table class="tz">
    <th>
        选择喜欢的水果
    </th>
</table>
<table class="xiabu">
    <td>
    <table class="t1">
        <tr>
            <th align="center">可选项</th>
        </tr>
        <tr>
            <td class="ann0"><input type="button" value="" class="ann"></td>
        </tr>
        <tr>
            <td class="ann0"><input type="button" value="" class="ann"></td>
        </tr>
        <tr>
            <td class="ann0"><input type="button" value="" class="ann"></td>
        </tr>
        <tr>
            <td class="ann0"><input type="button" value="" class="ann"></td>
        </tr>
        <tr>
            <td class="ann0"><input type="button" value="" class="ann"></td>
        </tr>
        <tr>
            <td class="ann0"><input type="button" value="" class="ann"></td>
        </tr>
    </table>
    </td>
    <td>
    <table class="t2">
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <td><input type="button" value=">" class="anniu"></td>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <td><input type="button" value="<" class="anniu"></td>
        <tr></tr>
        <tr></tr>
        <tr></tr>
    </table>
    </td>
    <td>
    <table class="t3">
        <th align="center">已选项</th>
        <tr>
        <tr>
        <td class="ann1"><input type="button" value="" class="an1"></td>
        </tr>
        <tr>
        <td class="ann1"><input type="button" value="" class="an1"></td>
        </tr>
        <tr>
        <td class="ann1"><input type="button" value="" class="an1"></td>
        </tr>
        <tr>
        <td class="ann1"><input type="button" value="" class="an1"></td>
        </tr>
        <tr>
        <td class="ann1"><input type="button" value="" class="an1"></td>
        </tr>
        <tr>
        <td class="ann1"><input type="button" value="" class="an1"></td>
        </tr>
        </tr>
    </table>
</table>
    </td>
    <table class="t4">
        <tr>
        <th class="rests" colspan="100px" align="center">你选择的水果</th>
        </tr>
        <tr id="selectedFruitsDisplay">
            <!-- 选中的水果将显示在这里 -->
        </tr>
    </table>
</div>
<script>
var fruit = ["苹果", "香蕉", "西瓜", "草莓", "菠萝", "芒果"];
document.addEventListener('DOMContentLoaded', function() {
    var buttons = document.querySelectorAll('.ann');
    for (var i = 0; i < fruit.length; i++) {
        buttons[i].value = fruit[i];
        buttons[i].textContent = fruit[i];
    }
    var mover = document.querySelector('input[value=">"]');
    var movel = document.querySelector('input[value="<"]');
    var selectedFruitsDisplay = document.getElementById('selectedFruitsDisplay');
    // 为水果按钮添加点击事件，切换选中状态
    for (var j = 0; j < buttons.length; j++) {
        buttons[j].addEventListener('click', function() {
            this.classList.toggle('active');
        });
    }

    // 为“>”按钮添加点击事件，将选中的水果移动到已选项区域
    mover.addEventListener('click', function() {
        var selectedButtons = document.querySelectorAll('.ann.active');
        var targetTable = document.querySelector('.t3');
        for (var k = 0; k < selectedButtons.length; k++) {
            var selected = selectedButtons[k];
            var mbbutton = targetTable.querySelector('.an1:not(.active)');
            if (mbbutton) {
                mbbutton.value = selected.value;
                mbbutton.textContent = selected.textContent;
                mbbutton.classList.add('active');
                selected.classList.remove('active');
                selected.parentNode.removeChild(selected);
            }
        }
        update();
    });

    var chose = document.querySelectorAll('.an1');
    // 为“已选项”列表中的按钮添加点击事件
    for (var l = 0; l < chose.length; l++) {
        chose[l].addEventListener('click', function() {
            this.classList.toggle('active');
        });
    }
    movel.addEventListener('click', function() {
        var selectedButtons = document.querySelectorAll('.an1.active');
        var targetTable = document.querySelector('.t1');
        for (var m = 0; m < selectedButtons.length; m++) {
            var selected = selectedButtons[m];
            var newButton = document.createElement('input');
            newButton.type = 'button';
            newButton.className = 'ann';
            newButton.value = selected.value;
            newButton.textContent = selected.textContent;
            targetTable.appendChild(newButton);
            selected.parentNode.removeChild(selected);
        }
        update();
    });

    // 更新下方显示区域的函数
    function update() {
        selectedFruitsDisplay.innerHTML = '';
        var selectedFruits = document.querySelectorAll('.an1[value]');
        for (var n = 0; n < selectedFruits.length; n++) {
            var button = selectedFruits[n];
            var div = document.createElement('div');
            div.textContent = button.value;
            div.className = 'selected-fruits';
            div.style.display = 'inline-block';
            selectedFruitsDisplay.appendChild(div);
        }
    }
});
</script>
</body>
</html>
还是存在一点bug