MENU

大一下学期JavaScript(JS)课后作业整理(更新到学期结束)

May 2, 2020 • Read: 1448 • 默认分类阅读设置

这学期学的JavaScript, 把老师留过的课后作业都整理一下发上来, 初学者可以根据案例要求自己制作.
不敢保证我这里发布的代码就是最优解, 不足的地方, 可以指出.
(没有排过顺序, 难度等级低)

1.猜数游戏
生成0-100的随机数, 开个输入框让用户输入, 小于随机数时显示小了, 大于随机数时显示大了, 等于时显示正确.

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <style>
            body {background-color: #FFFAF0;}
            #guess {
                margin: 0 auto;
                margin-top: 15%;
                width: 350px;
                height: 250px;
                background-color: royalblue;
                padding-top: 50px;
                color: whitesmoke;
                text-align: center;
                border: 2px solid white;
                border-radius: 30px;
            }
            input{border: 1px solid white;
                border-radius: 25px;
                width: 200px;padding-left: 15px;
                }
        </style>

        <div id="guess">
            <p>猜数游戏:</p>
            <input type="number" placeholder="1-100间的整数" name="guess_num">
            <p id="msg"></p>
        </div>

        <script>
            const fyl_random_num = Math.floor(Math.random() * 100);
            const fyl_msg = document.querySelector("#msg");
            let fyl_msg_content = "";
            console.log(fyl_random_num);
            document.querySelector("[name = 'guess_num']")
            .addEventListener('keyup', function() {
                let fyl_num = this.value;
                if(fyl_num > fyl_random_num) {
                    fyl_msg_content = "猜的有些大";
                } else if(fyl_num < fyl_random_num) {
                    fyl_msg_content = "猜的有些小";
                } else {
                    fyl_msg_content = "恭喜你, 猜对了";
                }
                fyl_msg.innerHTML = fyl_msg_content;
            })
        </script>
    </body>
</html>

2.大小写转换
输入数据, 自己选择转换大小还是小写.

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <h1>大小写转换</h1>
        <p>元数据:</p>
        <input type="text" id="original">
        <p>操作</p>
        <button type="button" onclick="exchange('upper')">转大写</button>
        <button type="button" onclick="exchange('lower')">转小写</button>
        <p>新数据</p>
        <input type="text" id="exchanged">

        <script>
            function exchange(operation) {
                let original = document.querySelector("#original").value;
                let exchanged = document.querySelector("#exchanged");
                switch(operation) {
                    case 'upper':
                        exchanged.value = original.toUpperCase();
                        break;
                    case 'lower':
                        exchanged.value = original.toLowerCase();
                        break;
                }
            }
        </script>
    </body>
</html>

3.点击按钮显示文字
这个很简单, 开个按钮点击之后显示文字, 函数入门级案例.

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <button type="button" onclick="let string = document.createElement('p'); string.innerText = '这是一个惊喜';document.body.appendChild(string)">点击</button>
    </body>
</html>

4.点击学习古诗
点一下div换一句话, 背景颜色也换, 我们老师居然用了好几个switch, 为什么不用数组? 不香??

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
<body onselectstart="return false" style="-moz-user-select: none;">
        <style>
            body {text-align: center;}
            .poem {
                margin: 0 auto;
                background-color: royalblue;
                padding-top: 2em;
                width: 300px;
                height: 200px;
                padding-left: 10%;
                padding-right: 10%;
            }
        </style>
        <p>这是一首四言古诗, 请反复点击学习</p>
        <div class="poem" onclick="poem()" id="div">
            <h1 style="color: white;" id="poem_text"></h1>
        </div>

        <script>
            let fyl_poem_arr = [
                "点击学古诗",
                "古人学问无遗力",
                "少壮工夫老始成",
                "纸上得来终觉浅",
                "绝知此事要躬行"
            ];
            let fyl_div_color = ["orange", "royalblue", "red", "pink", "green"];
            let fyl_i = 0;
            let fyl_poem = document.querySelector("#poem_text");
            let fyl_div = document.querySelector("#div");
            fyl_poem.innerHTML = fyl_poem_arr[fyl_i];
            
            function poem() {
                (fyl_i >= fyl_poem_arr.length - 1) ? fyl_i = 0 : fyl_i++;
                fyl_div.style.backgroundColor = fyl_div_color[Math.floor(Math.random() * fyl_div_color.length)];
                fyl_poem.innerHTML = fyl_poem_arr[fyl_i];
            }
        </script>
    </body>
</html>

5.JavaScript二维数组求和
定义一个二维数组, 求出全部元素的总和

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
<body onselectstart="return false" style="-moz-user-select: none;">
        <style>
            body {text-align: center;}
            .poem {
                margin: 0 auto;
                background-color: royalblue;
                padding-top: 2em;
                width: 300px;
                height: 200px;
                padding-left: 10%;
                padding-right: 10%;
            }
        </style>
        <p>这是一首四言古诗, 请反复点击学习</p>
        <div class="poem" onclick="poem()" id="div">
            <h1 style="color: white;" id="poem_text"></h1>
        </div>

        <script>
            let fyl_poem_arr = [
                "点击学古诗",
                "古人学问无遗力",
                "少壮工夫老始成",
                "纸上得来终觉浅",
                "绝知此事要躬行"
            ];
            let fyl_div_color = ["orange", "royalblue", "red", "pink", "green"];
            let fyl_i = 0;
            let fyl_poem = document.querySelector("#poem_text");
            let fyl_div = document.querySelector("#div");
            fyl_poem.innerHTML = fyl_poem_arr[fyl_i];
            
            function poem() {
                (fyl_i >= fyl_poem_arr.length - 1) ? fyl_i = 0 : fyl_i++;
                fyl_div.style.backgroundColor = fyl_div_color[Math.floor(Math.random() * fyl_div_color.length)];
                fyl_poem.innerHTML = fyl_poem_arr[fyl_i];
            }
        </script>
    </body>
</html>

6.斐波那契数列
用户输入一个数字, 输出斐波那契数列

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <span>输入数值:</span>
        <input type="number" id="num" onchange="fibonacci(this.value)">
        <br />
        <span>斐波那契数列:</span><br />
        <textarea id="output" cols="30" rows="30"></textarea>

        <script>
            function fibonacci(in_data) {
                let fyl_c = 0, fyl_a = 0, fyl_b = 1;
                let fyl_output = document.querySelector("#output");

                fyl_output.innerHTML = ""; //清空textarea中的值再写入

                fyl_output.innerHTML = fyl_output.value + "第" + fyl_a + "项:" + fyl_c + "\n";
                for(let i = 0; i < in_data; i++) {
                    fyl_output.innerHTML = fyl_output.value + "第" + (i + 1) + "项:" + fyl_b + "\n";
                    fyl_c = fyl_a + fyl_b;
                    fyl_a = fyl_b;
                    fyl_b = fyl_c;
                }
            }
        </script>
    </body>
</html>

7.获取函数实参
使用arguments获取函数传递的参数

<html>
    <head>
        <meta charset="UTF-8"> 
        <title>方一力30</title>
    </head>
    <body>
        <script>
            function getSum() {
                let result = 0;
                for(let i in arguments) {result += arguments[i];}
                return result;
            }
            document.write(getSum(1,2,3,4,5,6,7,8,9,10));
        </script>
    </body>
</html>

8.使用递归求阶乘
用户输入数字, 求这个数字的阶乘, 数字大小限制在50 >= num > 0

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <span>输入数字:</span>
        <input type="number" id="num" max="50" min="0">
        <p><span id="msg">**</span>的阶乘为: <span id="result">**</span> </p>

        <script>
            function $(id) {
                return document.getElementById(id);
            }

            function operation(fyl_number) {
                if(fyl_number == 1) {
                    return 1;
                }
                return fyl_number * operation(fyl_number - 1);
            }

            $('num').onchange = function() {
                let fyl_result = parseInt($('num').value);
                $('msg').innerHTML = fyl_result;
                $('result').innerHTML = operation(fyl_result);
            }
        </script>
    </body>
</html>

9.解构赋值
使用解构赋值的方法, 交换两个变量的值

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <span>输入变量A:</span>
        <input type="text" id="num0">
        <br />
        <span>输入变量B:</span>
        <input type="number" id="num1">
        <br />
        <button type="button" onclick="exchange()">交换</button> <br />
        <p id="msg"></p>

        <script>
            function exchange() {
                let fyl_0 = document.querySelector("#num0").value;
                let fyl_1 = document.querySelector("#num1").value;
                [fyl_1, fyl_0] = [fyl_0, fyl_1];
                document.querySelector("#msg").innerHTML = [fyl_0, fyl_1];
            }
        </script>
    </body>
</html>

10.冒泡排序
使用冒泡排序排序树组

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <span>Input array:</span>
        <input type="text" onchange="sort(this.value)">
        <p id="msg"></p>

        <script>
            function sort(array_in) {
                let fyl_array = array_in.split(",");
                for(let i = 0; i < fyl_array.length; i++) {
                    for(let j = 0; j < fyl_array.length - 1; j++) {
                        if(fyl_array[j] > fyl_array[j + 1]) {
                            let fyl_temp = fyl_array[j];
                            fyl_array[j] = fyl_array[j + 1];
                            fyl_array[j + 1] = fyl_temp;
                        }
                    }
                }
                document.getElementById("msg").innerHTML = fyl_array;
            }
        </script>
    </body>
</html>

11.判断数组
给定一个数组, 用户输入数字, 如果给定的数组里没有这个元素就加上

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>

    <body>
        <span>原始数据:</span>
        <input type="text" value="2,3,5" id="source">
        <br />
        <span>新来数据:</span>
        <span id="msg" style="color: red; font-size: 5px;"></span><br />
        <input type="text" id="new" onchange="judge()">

        <script>
            function judge() {
                let fyl_source = document.getElementById("source").value.split(',');
                let fyl_arr = [];
                let fyl_new = parseInt(document.getElementById("new").value);
                
                for(let i = 0; i < fyl_source.length; i++) {
                    fyl_arr.push(parseInt(fyl_source[i]));
                }
                
                if(fyl_arr.includes(fyl_new)) {
                    document.querySelector("#msg").innerHTML = fyl_new + "已存在";
                } else {
                    fyl_arr.push(fyl_new);
                }

                document.getElementById("source").value = fyl_arr;
            }
        </script>
    </body>
</html>

12.数组位置
用户输入数组, 输入要检索的值, 返回检索到的值的下标

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <span>请输入数组的值:</span>
        <input type="text" id="array"><br />
        <span>请输入要检索的值:</span>
        <input type="text" id="search" onchange="search()">
        <p id="msg"></p>

        <script>
            function search() {
                // let fyl_search_arr = ['a', 'b', 'c', 'c', 'd'];
                // let fyl_search_str = 'c'; a,b,c,c,c,d
                let fyl_search_arr = document.getElementById("array").value.split(',');
                let fyl_search_str = document.getElementById("search").value;
                let fyl_pro = [];

                for(let i = 0; i < fyl_search_arr.length; i++) {
                    if(fyl_search_arr[i] == fyl_search_str) {
                        fyl_pro.push(i);
                    }
                }
                document.querySelector("#msg").innerHTML = "该检索的值在数组中出现的位置为: " + fyl_pro;
            }
            
        </script>
    </body>
</html>

13.计算一维数组中全部数组的和

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>计算一维数组中全部元素的和-24</title>
    </head>
    <body>
        <p>请输入数组的值,用逗号分割</p>
        <input type="text" onchange="jisuan(this.value)" />
        <p id="msg"></p>
        
    </body>
</html>
<script>
    function jisuan(arr){
        var he=0;
        arr = arr.split(",");
        for(var i=0;i<arr.length;i++){
            arr[i] = parseInt(arr[i]);
            he=he+arr[i];
        }
        document.getElementById("msg").innerHTML = he;
    }
</script>

14.一维数组最大值
用户输入数组, 程序给出数组中最大值

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力_30</title>
    </head>
    <body>
        <span>Input array: </span>
        <input type="text" placeholder="split use ','" onchange="cal(this.value)">
        <span id="msg"></span>

        <script>
            function cal(fyl_array) {
                let fyl_arr = fyl_array.split(",");
                
                document.querySelector('#msg').innerHTML = "<br />The larger number is: " + Math.max.apply(null, fyl_arr) + "<br />And the min number is : " + Math.min.apply(null, fyl_arr);
            }
        </script>
    </body>
</html>

15.随机点名

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <p>恭喜
            <span id="name" style="color: red;">**</span>
            同学, 获得回答问题大礼包
        </p>
        <button type="button" onclick="randomTake()">随机选人</button>

        <script>
            const fyl_name_arr = ["张三","李四","王五","甲","乙","丙","丁", "烫烫烫", "罗翔", "欧尼酱"];
            function randomTake() {
                document.getElementById("name").innerHTML = fyl_name_arr[Math.floor(Math.random() * fyl_name_arr.length)];
            }
        </script>
    </body>
</html>

16.简易网页计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方一力30</title>
</head>
<body>
    <input type="number" placeholder="输入数字" id="num1">
    <select id="operation">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="number" placeholder="输入数字" id="num2">
    <span>=</span>
    <input type="number" id="result" placeholder="结果">
    <input type="button" value="点击计算" id="cal">

    <script>
        $('cal').onclick = function() {
            $('result').value = Number(eval(Number($('num1').value) + $('operation').value + Number($('num2').value)));
        }

        function $(id) {
            return document.getElementById(id);
        }
    </script>
</body>
</html>

17.求位数为偶数的元素个数

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30</title>
    </head>
    <body>
        <p>求一列数中尾数为偶的数字个数</p>
        <span>输入数字(用逗号分隔):</span>
        <input type="text" id="nums" onchange="judge(this.value)">
        <p id="msg"></p>

        <script>
            function judge(nums) {
                const fyl_num_arr = nums.split(',');
                let fyl_result = 0;
                for(let i in fyl_num_arr) {
                    if(fyl_num_arr[i].length % 2 == 0) {
                        fyl_result++;
                    }
                }
                document.querySelector("#msg").innerHTML = fyl_result;
            }
        </script>
    </body>
</html>

18.约瑟夫环问题

<html>
    <head>
        <meta charset="UTF-8">
        <title>方一力30 </title>
    </head>
    <body>
        <input type="number" placeholder="猴子总数" id="whole">
        <input type="number" placeholder="踢出第几只猴子" id="which" name="monkey">
        <button type="button" onclick="josephus()">选大王</button>

        <script>
            function josephus() {
                let fyl_m = parseInt(document.getElementById("whole").value);
                let fyl_n = parseInt(document.getElementById("which").value);
                console.log(fyl_m, fyl_n)

                let fyl_monkey = [];
                for(let i = 0; i < fyl_m; i++) {
                    fyl_monkey.push(i + 1);
                }

                let j = 0;
                while(fyl_monkey.length > 1) {
                    j++;
                    fyl_head = fyl_monkey.shift();
                    if(j % fyl_n != 0) {
                        fyl_monkey.push(fyl_head);
                    }
                }
                console.log(fyl_monkey[0]);
            }
        </script>
    </body>
</html>

19.字符串判断(使用对象)
给定一组原始数据, 一个新数据的填入框, 如果新数据在原始数据中没有, 就插入到原始数据中, 反之就提示一条信息, 不插入.(我觉得明明用数组做更方便)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方一力30</title>
</head>
<body>
    <span>Original Data:</span>
    <br />
    <textarea id="original" cols="27" rows="3">2,3,5</textarea>
    <br />
    <span>New Data:</span>
    <span id="msg" style="color: red;"></span>
    <br />
    <input type="text" id="new">
    <button type="button" id="btn">Check</button>

    <script>
        function $(id) {
            return document.getElementById(id);
        }
        let obj = {original: $('original').value};
        
        $('btn').onclick = function() {
            if((obj.original).includes($('new').value)) {
                $('msg').innerHTML = $('new').value + " Already in the original data";
            } else {
                $('msg').innerHTML = "";
                $('original').innerHTML = $('original').value + "," + $('new').value;
                $('new').value = "";
            }
        }
    </script>
</body>
</html>

20.生成对象
给定三组输入框, 一组两个, 分别设置对象的属性和值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方一力30</title>
</head>
<body>
    <script>
        for(let i = 0; i <= 2; i++) {
            document.write("<span>obj.</span><input type='text' id='name" + i + "'><span>=</span><input type='text' id='value" + i + "'><br />");
        }
        document.write("<button type='button' id='btn'>INSERT</button>");

        function $(id) {return document.getElementById(id);}

        let obj = {};
        $('btn').onclick = function() {
            for(let i = 0; i <= 2; i++) {
                obj[$('name' + i).value] = $('value' + i).value;
            }
            console.log(obj);
        }
    </script>
</body>
</html>

21.动态添加对象属性
给定一组(两个)输入框, 一个设置对象名, 另一个设置对象的值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方一力30</title>
</head>
<body>
    <script>
        for(let i = 0; i <= 2; i++) {
            document.write("<span>obj.</span><input type='text' id='name" + i + "'><span>=</span><input type='text' id='value" + i + "'><br />");
        }
        document.write("<button type='button' id='btn'>INSERT</button>");

        function $(id) {return document.getElementById(id);}

        let obj = {};
        $('btn').onclick = function() {
            for(let i = 0; i <= 2; i++) {
                obj[$('name' + i).value] = $('value' + i).value;
            }
            console.log(obj);
        }
    </script>
</body>
</html>

22.构造函数创建对象(留言板)
这个我有点迷惑, 让用构造函数的话, 我给按钮设置onclick的时候new居然会在页面加载完成后自动执行, 先用output顶一下.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方一力30</title>
</head>
<body>
    <span>姓名:</span>
    <input type="text" id="name" placeholder="Name" value="Jack">
    <br />
    <span>地区:</span>
    <input type="text" id="region" placeholder="Region" value="CN">
    <br />
    <span>内容:</span>
    <input type="text" id="content" placeholder="Content" value="SHIT">
    <button type="button" id="btn" onclick="output()">Insert</button>

    <script>
        let obj = {};
        function $(id) {
            return document.getElementById(id);
        }

        function create(name_value, region_value, content_value) {
            obj.name = name_value;
            obj.region = region_value;
            obj.content = content_value;
            console.log(obj.name + "(" + obj.region + ")" + "说:" + obj.content);
        }

        // $('btn').onclick = new create($('name').value, $("region").value, $('content').value);

        function output() {
            create($('name').value, $("region").value, $('content').value);
        }
    </script>
</body>
</html>

暂时就写这么多吧, 后面再留作业就更新

Last Modified: June 26, 2020
Leave a Comment

4 Comments
  1. 居然还教js 好好

    1. @风暴狗哈哈, 这学校教的JS马马虎虎, 都是比较基础的东西, 一学期过去连jQuery都没学到#(不说话)

  2. @(滑稽)抄作业抄作业。

    1. @c0sMx@(滑稽)这垃圾代码抄了估计要被老师喷死