0210464
/
Wallpaper_Home


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            height: 100%;
        }

        .left-panel {
            flex: 1;
            background-color: #f1f1f1;
            padding: 20px;
        }

        .right-panel {
            flex: 1;
            padding: 20px;
        }

        .calculator {
            max-width: 300px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .output {
            background-color: #f1f1f1;
            text-align: right;
            padding: 10px;
            margin-bottom: 10px;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        button {
            padding: 10px;
            font-size: 16px;
            background-color: #3498db;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }

        .loader-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.5);
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s, opacity 0.5s;
        }

        .loader {
            border: 16px solid #f3f3f3;
            border-top: 16px solid #3498db;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .loader-container.loading {
            visibility: visible;
            opacity: 1;
        }

        .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #2980b9;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            margin-top: 10px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-item {
            padding: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .dropdown-item:hover {
            background-color: #ddd;
        }
    </style>
    <div class="container">
        <div class="left-panel">
            <button class="button" onclick="showInfo('按钮1被点击')">按钮1</button>
            <button class="button" onclick="showInfo('按钮2被点击')">按钮2</button>
            <button class="button" onclick="showInfo('按钮3被点击')">按钮3</button>
            <button class="button" onclick="showInfo('按钮4被点击')">按钮4</button>
            <button class="button" onclick="showInfo('按钮5被点击')">按钮5</button>
            <button class="button" onclick="showInfo('按钮6被点击')">按钮6</button>
        </div>
        <div class="right-panel">
            <div id="info"></div>
            <button class="interactive-button" onclick="showMessage()">交互按钮</button>
            <input type="text" id="input" placeholder="在这里输入文本">
        </div>
    </div>

    <script>
        function showInfo(text) {
            document.getElementById("info").textContent = text;
        }

        function showMessage() {
            var inputText = document.getElementById("input").value;
            alert(inputText);
        }
    </script>
</head>
<div class="container">
    <div class="left-panel">
        <button class="button" onclick="showInfo('按钮1被点击')">按钮1</button>
        <button class="button" onclick="showInfo('按钮2被点击')">按钮2</button>
        <button class="button" onclick="showInfo('按钮3被点击')">按钮3</button>
        <button class="button" onclick="showInfo('按钮4被点击')">按钮4</button>
        <button class="button" onclick="showInfo('按钮5被点击')">按钮5</button>
        <button class="button" onclick="showInfo('按钮6被点击')">按钮6</button>
    </div>
    <div class="right-panel">
        <div id="info"></div>
        <button class="interactive-button" onclick="showMessage()">交互按钮</button>
        <input type="text" id="input" placeholder="在这里输入文本">
    </div>
</div>

<script>
    function showInfo(text) {
        document.getElementById("info").textContent = text;
    }

    function showMessage() {
        var inputText = document.getElementById("input").value;
        alert(inputText);
    }
</script>

<body>
    <div class="calculator">
        <div class="output" id="output">0</div>
        <div class="buttons">
            <button onclick="appendNumber('7')">7</button>
            <button onclick="appendNumber('8')">8</button>
            <button onclick="appendNumber('9')">9</button>
            <button onclick="appendOperator('+')">+</button>
            <button onclick="appendNumber('4')">4</button>
            <button onclick="appendNumber('5')">5</button>
            <button onclick="appendNumber('6')">6</button>
            <button onclick="appendOperator('-')">-</button>
            <button onclick="appendNumber('1')">1</button>
            <button onclick="appendNumber('2')">2</button>
            <button onclick="appendNumber('3')">3</button>
            <button onclick="appendOperator('*')">*</button>
            <button onclick="appendNumber('0')">0</button>
            <button onclick="appendNumber('.')">.</button>
            <button onclick="calculate()">=</button>
            <button onclick="appendOperator('/')">/</button>
            <button onclick="clearExpression()">C</button>
            <button onclick="backspace()">&#9003;</button>
        </div>
    </div>

    <div class="loader-container" id="loaderContainer">
        <div class="loader"></div>
    </div>

    <div class="dropdown">
        <button class="button">按钮1</button>
        <div class="dropdown-content">
            <div class="dropdown-item">选项1</div>
            <div class="dropdown-item">选项2</div>
            <div class="dropdown-item">选项3</div>
        </div>
    </div>

    <div class="dropdown">
        <button class="button">按钮2</button>
        <div class="dropdown-content">
            <div class="dropdown-item">选项4</div>
            <div class="dropdown-item">选项5</div>
            <div class="dropdown-item">选项6</div>
        </div>
    </div>

    <div class="dropdown">
        <button class="button">按钮3</button>
        <div class="dropdown-content">
            <div class="dropdown-item">选项7</div>
            <div class="dropdown-item">选项8</div>
            <div class="dropdown-item">选项9</div>
        </div>
    </div>

    <div class="dropdown">
        <button class="button">按钮4</button>
        <div class="dropdown-content">
            <div class="dropdown-item">选项10</div>
            <div class="dropdown-item">选项11</div>
            <div class="dropdown-item">选项12</div>
        </div>
    </div>

    <script>
        var dropdowns = document.getElementsByClassName("dropdown");

        for (var i = 0; i < dropdowns.length; i++) {
            dropdowns[i].addEventListener("mouseover", function () {
                this.children[1].style.display = "block";
            });

            dropdowns[i].addEventListener("mouseout", function () {
                this.children[1].style.display = "none";
            });
        }
    </script>
    <script>
        let outputDiv = document.getElementById('output');
        let expression = '';

        function appendNumber(number) {
            if (expression === '0') {
                expression = '';
            }
            expression += number;
            outputDiv.innerText = expression;
        }

        function appendOperator(operator) {
            if (expression.slice(-1) === '+' || expression.slice(-1) === '-' || expression.slice(-1) === '*' || expression.slice(-1) === '/') {
                expression = expression.slice(0, -1);
            }
            expression += operator;
            outputDiv.innerText = expression;
        }

        function calculate() {
            try {
                const result = eval(expression);
                expression = result.toString();
                outputDiv.innerText = expression;
            } catch (error) {
                // 处理错误
                expression = '';
                outputDiv.innerText = 'Error';
            }
        }

        function clearExpression() {
            expression = '';
            outputDiv.innerText = '0';
        }

        function backspace() {
            if (expression === '' || expression === '0') {
                return;
            }

            if (expression.length === 1) {
                expression = '0';
            } else {
                expression = expression.slice(0, -1);
            }
            outputDiv.innerText = expression;
        }

        // CSS 加载进度提示效果
        window.addEventListener('load', function () {
            document.getElementById('loaderContainer').classList.remove('loading');
        });
    </script>
</body>

</html>