本文展示了使用JavaScript进行基本的用户交互和数据处理，包括显示用户输入、求和函数、数值交换、计算余额、序列求和、随机点名、对象属性与方法的调用等操作。同时，还涵盖了字符串查找、反转、分割和截取等字符串处理功能。
1.显示用户输入内容。
① 封装函数, 名字为printfInput;
② 功能: 将用户输入的内容, 在页面中显示;
③ 测试: 写一个输入确认框, 调用该函数时将输入内容传入, 观察页面中的内容是否与输入内容一致。
function printFInput(content) {
let str = content;
document.write(str);
}
let user = prompt('请输入内容：');
printFInput(user);
2.求和函数SUM。
① 封装函数, 名字为sum;
② 功能: 根据传入的两个数,求和并且返回求和的结果（函数必须有return返回值）;
③ 测试: 调用该函数时获取结果后在控制台打印结果判断是否正确。
// 输入的必须的是数字 注意转换
let x = +prompt("请输入第一个数字：");
let y = +prompt("请输入第二个数字：");
let sum = 0;
let result = getSum(x, y);
document.write(`两者的和是${result}`);
function getSum(x, y) {
sum = x + y;
return sum;
}
console.log(result);
3.实现两个数的值交换(函数版本)
① 函数名为 changeNum();
② 调用函数时,在控制台输出a=1,b=2;
③ 经过函数内部处理后,输出a=2,b=1;
④ console.log的代码全部封装在函数内部;
⑤ 准备代码如下, 在此基础上继续编写;
⑥ 可以多调用两次。
function changeNum(a, b) {
let temp = a;
a = b;
b = temp;
console.log(`a的结果是${a} b的结果是${b}`);
}
changeNum(1, 2);
changeNum('angle', 'happy');
4.封装余额函数。
① 运行程序后, 浏览器显示输入确认框(prompt)；
② 第一个输入确认框提示输入银行卡余额；
③ 第二个输入确认框提示输入当月食宿消费金额；
④ 第三个输入确认框提示输入当月生活消费金额；
⑤ 输入完毕后,在页面中显示银行卡剩余金额;
⑥ 提示: 所有功能代码封装在函数内部（函数需要把余额返回）。
function test() {
let a = prompt('银行卡金额：');
let b = prompt('当月食宿消费金额：');
let c = prompt('当月生活消费金额');
//减法进行隐式转换 不用手动转换类型
let d = a - b - c;
return d;
}
let money = test();
document.write(`我的银行卡余额为${money}元`);
5.计算1-n之间所有数的和(函数版)。
//方法一
let n = +prompt('请输入数字：');
function getSum() {
let sum = 0;
for (let i = 1; i <= n; i++) {
sum += i;
}
document.write(sum);
}
getSum();
//方法二
let n = +prompt('请输入数字：');
function sum(n) {
var sum = 0;
for (var i = 1; i <= n; i++) {
sum += i;
}
return sum;
}
console.log(sum(n));
6.计算m-n之间所有数的和。
let m = +prompt('请输入起始数字：');
let n = +prompt('请输入结束数字：');
function sum(m, n) {
var sum = 0;
for (var i = m; i <= n; i++) {
sum += i;
}
return sum;
}
console.log(sum(m, n));
7.学生的分数是一个数组,计算每个学生的总分。
let num1 = +prompt("请输入第一个成绩:");
let num2 = +prompt("请输入第二个成绩:");
let num3 = +prompt("请输入第三个成绩:");
let arr = [num1, num2, num3];
function getScore(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
document.write(sum);
}
getScore(arr);
8.随机点名实现
每次刷新网页运行, 在控制台随机输出一位同学的名字 [“老赵”, “老李”, “小传”, “小黑”]，如果输出则在数组中删除这个名字。
function getRandom(min, max) {
// 生成随机数
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let arr = ["老赵", "老李", "小传", "小黑"];
let random = getRandom(0, arr.length - 1);
document.write(arr[random]);
//删除已经点到名字的同学名字
arr.splice(random, 1);
console.log(arr);
9.声明对象。
① 声明一个变量per, 类型为对象类型；
② 该对象的属性为性别,年龄,爱好(3个)；
③ 该对象的方法有说话, 吃饭(2个)；
④ 在控制台分别调用该对象的属性和方法。
let per = {
sex: 'man', // 性别
age: 18, // 年龄
hobby: 'studyAndGame', // 爱好
speak: function () {
// 说话
document.write(`speak方法被调用了--- <br/>`);
},
eat: function () {
// 吃饭
document.write(`eat方法被调用了---`);
}
}
// 下面是调用部分
console.log(`性别:${per.sex}`);
console.log(`姓名:${per.age}`);
console.log(`爱好:${per.hobby}`);
// 调用方法
per.speak();
per.eat();
10.调用对象的方法。
① 对象声明完毕后, 调用对象中的吃饭的方法；
② 提示: 对象中的方法本质是函数, 调用需要加()；
③ 方法也可以传递参数的。
let per = {
sex: 'man', // 性别
age: 18, // 年龄
hobby: 'studyAndGame', // 爱好
speak: function (speaking) {
// 说话
document.write(`我今天说的是${speaking}<br/>`);
},
eat: function (temp) {
// 吃饭
document.write(`我今天吃的是${temp}`);
}
}
// 下面是调用部分
console.log(`性别:${per.sex}`);
console.log(`姓名:${per.age}`);
console.log(`爱好:${per.hobby}`);
// 调用方法
per.speak('普通话');
per.eat('红烧排骨');
11.猜数字游戏，设定次数，最多猜8次。
// 生成随机数
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
//定义随机数范围
let num = random(0, 20);
let flag = true;
// 固定猜数字次数
for (let i = 1; i <= 8; i++) {
let userNum = +prompt('请输入您要猜的数字');
if (userNum > num) {
alert('您猜的数字大了');
} else if (userNum < num) {
alert('您猜的数字小了');
} else {
flag = false
alert('恭喜猜对了！');
break
}
}
if (flag) {
alert('太笨了，这都猜不到！');
}
12.查找字符串。
写一个函数，参数1是一个字符，参数2是一个字符串，返回这个字符出现在这个字符串的第几个位置，如果没有该字符，则返回-1 。
let charInput = prompt("请输入一个字符：");
let strInput = prompt("请输入一个字符串：");
let result = arr(charInput, strInput);
alert(`
输入的字符为：${charInput}
输入的字符串为：${strInput}
字符在字符串的位置为: ${result} `);
function arr(charValue, strValue) {
let index = -1;
for (let i = 0; i < strValue.length; i++) {
if (strValue[i] == charInput) {
return index = i;
}
}
return index;
}
13.写一个函数，参数1是一个字符串，返回这个字符串的反向字符串。
let strInput = prompt("请输入一个字符串：");
let result = getRever(strInput);
alert(`
输入的字符串为：${strInput}
返回这个字符串的反向字符串：${result}
`)
function getRever(strInput) {
let arr = "";
for (let i = strInput.length - 1; i >= 0; i--) {
arr += strInput[i];
}
return arr;
}
14.分割字符串。
写一个函数，参数1为一个字符，参数2是一个字符串，根据这个字符将传入的字符串分割成多个字符串，并用数组返回这些分割的字符串。
let charInput = prompt("请输入一个字符：");
let strInput = prompt("请输入一个字符串：");
let result = getSeparate(charInput, strInput)
alert(`
输入的字符为：${charInput}
输入的字符串为：${strInput}
分割的字符串为：${result}
`)
function getSeparate(charInput, strInput) {
// strInput.split(charInput);
return strInput.split(charInput);
}
15.截取字符串。
写一个函数，参数1是截取字符串的起始位置，参数2是截取字符串的结束位置，要截取的字符串，最后根据函数参数返回对应截取的字符串。
let charInput = prompt("请输入一个字符串：");
let startInput = prompt("请输入截取字符串的开始位置：");
let endInput = prompt("请输入截取字符串的结束位置：");
let result = getStr(charInput, startInput, endInput);
alert(`
输入的字符串为：${charInput}
截取字符的开始位置为：${startInput}
截取字符的结束位置为：${endInput}
截取到的字符串为：${result}
`)
function getStr(charInput, startInput, endInput) {
let arr = [];
for (let i = startInput; i < endInput; i++) {
// 将截取到的字符串存入一个新数组
arr.push(charInput[i]);
}
// 将数组中的元素转换为字符串
return arr.join("");
}
1348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
