这学期学的 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>
-
暂时就写这么多吧,后面再留作业就更新
居然还教 js 好好
哈哈,这学校教的 JS 马马虎虎,都是比较基础的东西,一学期过去连 jQuery 都没学到 \#(不说话)
@(滑稽) 抄作业抄作业。
@(滑稽) 这垃圾代码抄了估计要被老师喷死