这学期学的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都没学到\#(不说话)
@(滑稽)抄作业抄作业。
@(滑稽)这垃圾代码抄了估计要被老师喷死