MENU

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

May 2, 2020 • Read: 3962 • 默认分类

这学期学的 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: September 17, 2023
Leave a Comment

4 Comments
  1. 居然还教 js 好好

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

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

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