0
点赞
收藏
分享

微信扫一扫

模拟实现命令行解释器shell

WikongGuan 2024-12-02 阅读 27
娱乐htmljavascript

Demo介绍

JavaScript 代码

  1. 变量初始化
  1. 核心功能

交互流程

完整代码

<!DOCTYPE html>
<html>

<head>
    <title>加减法随机数生成器</title>
    <style>
        /* 页面样式设置 */
        body {
            margin: 0;
        }

        .calculate {
            height: 97vh;
            overflow: scroll;
            text-align: center;
            border: 8px groove #fff;
        }

        html::-webkit-scrollbar,
        .calculate::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .calculate .top {
            position: relative;
        }

        .calculate .title {
            height: 40px;
            line-height: 40px;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
        }

        .calculate .title input {
            width: 50px;
            height: 100%;
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            border: none;
        }

        .calculate .top .btn {
            position: absolute;
            top: 5px;
            right: 10px;
            display: flex;
            justify-content: space-around;
        }

        .calculate .top .btn div {
            width: 100px;
            background: #7bcafc;
            color: #fff;
            border-radius: 20px;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
            margin-left: 10px;
        }

        .calculate #container {
            display: flex;
            justify-content: space-around;
            background: rgb(241, 245, 251);
            height: 80%;
            margin: 0 auto;
            border-radius: 8px;
        }

        .calculate #container .title {
            background: #fff;
            border-radius: 20px;
            width: 50%;
            margin: 10px auto;
            height: 40px;
            line-height: 40px;
        }

        #timer {
            width: 100%;
            text-align: center;
            font-size: 20px;
        }

        #equation {
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            display: none;
        }

        #equation2 {
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            display: none;
        }

        .tree {
            font-size: 40px;
            font-weight: bold;
        }

        .tree p {
            line-height: 0;
            text-align: right;
        }

        .tree .fuhao {
            text-align: left;
        }

        .line {
            width: 100%;
            height: 3px;
            background: #000;
        }

        #answer {
            font-size: 24px;
            width: 200px;
            padding: 10px;
            margin-bottom: 20px;
        }

        #result {
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px;
            color: red;
        }

        .correct {
            color: green;
        }

        .wrong {
            color: red;
        }

        #statistics {
            margin-top: 20px;
            text-align: center;
        }

        #previousEquations {
            height: 88%;
            overflow: scroll;
            overflow-y: scroll;
            font-size: 20px;
            line-height: 1.5;
            column-count: 4;
            column-gap: 10px;
            text-align: right;
        }

        .equation-row {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 10px;
        }

        .equation-item {
            display: inline-block;
            width: 125px;
            text-align: center;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="calculate">
        <div class="top">
            <div class="title">
                <!-- 显示最大随机数的输入框，默认20 -->
                <input value="20" readonly />
                内加减法随机数生成器
            </div>
            <div class="btn">
                <div id="toggleRecordsBtn">切换记录</div>
                <div id="edit">修改</div>
            </div>
            <div>
                <p id="timer">耗时：0秒</p>
            </div>
        </div>

        <div id="container">
            <div style="width: 40%;">
                <h2 class="title" style="width: 70%;">随机算术</h2>
                <div style="width: 20%; margin-left: 40%">
                    <!-- 随机算式显示区域 -->
                    <p id="equation"></p>
                    <p id="equation2"></p>
                    <p id="showRes"></p>
                    <p class="line"></p>
                </div>
                <!-- 用户输入答案的输入框 -->
                <input type="text" id="answer" placeholder="请输入答案" autocomplete="off">
                <p id="result"></p>
                <div id="statistics">
                    <p id="correctCount">回答正确次数：0</p>
                    <p id="wrongCount">回答错误次数：30</p>
                </div>
            </div>
            <div style="width: 60%;">
                <h2 class="title" id="historyTitle">历史结果</h2>
                <!-- 历史记录显示区域 -->
                <div id="previousEquations"></div>
            </div>
        </div>
    </div>
    <script>
        // 正确和错误的答题次数初始化
        var correctCount = 0;
        var wrongCount = 30;

        // 初始最大随机数范围为20
        var randomNum = 20;

        // 用于保存历史记录和错题记录
        var previousEquations = []; // 所有的算式
        var correctEquations = []; // 正确的算式
        var wrongEquations = []; // 错误的算式
        var showWrongRecords = false; // 当前是否展示错题记录


        // 记录开始时间，用于计时
        var startTime = new Date().getTime();
        var timerElement = document.getElementById('timer');


        const edit = document.querySelector('#edit');
        const input = document.querySelector('.title input');

        // 点击“修改”按钮，允许用户修改最大随机数
        edit.addEventListener('click', () => {
            if (edit.textContent == '修改') {
                input.readOnly = false;
                input.focus();
                edit.textContent = '确定'
            } else {
                input.readOnly = true;
                input.blur();
                const value = input.value;
                edit.textContent = '修改'
                input.style.border = 'none';
                randomNum = value; // 修改最大随机数
            }
        });


        // 更新计时器
        function updateElapsedTime() {
            var currentTime = new Date().getTime();
            var elapsedTime = Math.floor((currentTime - startTime) / 1000); // 换算为秒

            if (elapsedTime >= 60) {
                var minutes = Math.floor(elapsedTime / 60);
                var seconds = elapsedTime % 60;
                timerElement.textContent = '耗时：' + minutes + '分' + seconds + '秒';
            } else {
                timerElement.textContent = '耗时：' + elapsedTime + '秒';
            }
        }

        // 每秒更新一次计时器
        setInterval(updateElapsedTime, 1000);


        // 生成1到randomNum之间的随机数
        function generateRandomNumber() {
            return Math.floor(Math.random() * randomNum) + 1; // 生成1到randomNum之间的随机数
        }

        // 随机生成加法或减法
        function generateRandomOperation() {
            return Math.random() < 0.5 ? '+' : '-'; // 以50%的概率生成加减法
        }

        // 生成随机算式
        function generateRandomEquation() {
            var number1 = generateRandomNumber();
            var number2 = generateRandomNumber();
            var operation = generateRandomOperation();

            if (operation === '+' && number1 + number2 > randomNum) {
                operation = '-'; // 如果加法结果超过最大值，则改为减法
            }

            if (operation === '-' && number1 < number2) {
                var temp = number1;
                number1 = number2;
                number2 = temp; // 如果减法第一个数小于第二个数，交换
            }

            let res = number1 + ' ' + operation + ' ' + number2;
            let show = '<div class="tree"><p>' + number1 + '</p><p class="fuhao">' + operation + '</p><p>' + number2 + '</p></div>';

            let obj = {
                res,
                show
            };
            return obj;
        }

        // 检查用户输入的答案
        function checkAnswer(event) {
            if (event.keyCode === 13) { // 检测是否按下回车键
                var userInput = document.getElementById('answer').value;
                var equation = document.getElementById('equation').textContent;
                var result = eval(equation); // 使用eval计算算式的结果

                if (userInput == "") {
                    return;
                }

                var isCorrect = parseInt(userInput) === result;

                // 判断答案是否正确
                if (isCorrect) {
                    correctCount++;
                    previousEquations.push('<span class="equation-item correct">' + equation + ' = ' + userInput + ' √</span>');
                    correctEquations.push('<span class="equation-item correct">' + equation + ' = ' + userInput + ' √</span>');
                    document.getElementById('result').textContent = '回答正确！';
                } else {
                    wrongCount++;
                    previousEquations.push('<span class="equation-item wrong">' + equation + ' = ' + userInput + ' ×</span>');
                    let equationItem = '<span class="equation-item wrong">' + equation + ' = </span>';
                    if (!wrongEquations.includes(equationItem)) {
                        wrongEquations.push(equationItem); // 错题不重复
                    }

                    document.getElementById('result').textContent = '回答错误！';
                }

                document.getElementById('correctCount').textContent = '回答正确次数：' + correctCount;
                document.getElementById('wrongCount').textContent = '回答错误次数：' + wrongCount;


                document.getElementById('previousEquations').innerHTML = previousEquations.join('');

                // 答对了清空输入框并生成新题
                if (isCorrect) {
                    generateNewEquation();
                }

                document.getElementById('answer').value = ''; // 清空输入框
                document.getElementById('answer').focus(); // 聚焦输入框
                showWrongRecords = false;
                showHistory();
            }
        }

        // 生成新的随机算式
        function generateNewEquation() {
            document.getElementById('answer').value = ''; // 清空输入框
            document.getElementById('result').textContent = ''; // 清空结果显示

            var equation;
            var show;
            var result;

            // 确保生成的算式结果是非负数
            do {
                let fun = generateRandomEquation();
                equation = fun.res;
                show = fun.show;
                result = eval(equation);
            } while (result < 0); // 重新生成随机算式，直到结果不是负数为止

            document.getElementById('equation').textContent = equation;
            document.getElementById('equation2').textContent = equation + " = ";
            document.getElementById('showRes').innerHTML = show;
        }

        // 显示历史记录或错题记录
        function showHistory() {
            var historyTitle = document.getElementById('historyTitle');
            var previousBox = document.getElementById('previousEquations');

            if (showWrongRecords) {
                historyTitle.textContent = '错题记录';
                previousBox.innerHTML = wrongEquations.join('');
            } else {
                historyTitle.textContent = '历史记录';
                previousBox.innerHTML = previousEquations.join('');
            }
        }

        // 切换显示历史记录或错题记录
        function toggleRecords() {
            showWrongRecords = !showWrongRecords;
            showHistory();
        }

        document.addEventListener('keypress', checkAnswer); // 监听键盘按键事件

        generateNewEquation(); // 生成第一道题目
        document.getElementById('answer').focus(); // 页面加载后将焦点聚焦到输入框

        var toggleRecordsBtn = document.getElementById('toggleRecordsBtn');
        toggleRecordsBtn.addEventListener('click', toggleRecords); // 点击切换记录按钮
    </script>
</body>

</html>

在这里插入图片描述

举报

相关推荐

Linux_Shell运行原理（命令行解释器）

c#

【Python命令行解释器】

网络

memcached 命令行参数解释

memcached命令行参数套接字UNIXPython后端开发

VS命令行工具解释

visual studio

shell 命令行参数（基本）

bash字符串命令行参数Linux系统/运维

hive shell/sql 命令行

hivecihdfsPython后端开发

shell命令行参数操作

bash命令行参数迭代编程语言

从命令行启动Xcode模拟器

IOSiOS 10 ...

略解释df -h显示的命令行解释

文件系统Linux系统/运维

【Linux初阶】进程替换的应用 - 简易命令行解释器的实现

linux运维服务器c语言开发语言
0 条评论