首页 › 业界区 › 业界 ›JavaScript —— 练习1

JavaScript —— 练习1

碛物 2025-6-6 10:13:39

以下将textarea作为输入框，run按钮添加了监听事件，pre作为输出框。

test.html中的内容为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="/test/test.css"> // 引入css渲染
</head>
<body>
输入：
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<button>Run</button>
<br>
<pre></pre>
</body>
</html>

复制代码

test.css中的内容为：

textarea {
width: 500px;
height: 300px;
background-color: aquamarine;
font-size: 24px;
}
pre {
width: 500px;
height: 300px;
background-color: rgb(191, 197, 229);
font-size: 24px;
}

复制代码

输出Hello World。

test.js中的内容为：

let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
output.innerHTML = "Hello World";
}
export {
main
}

复制代码

输入两个整数，计算两个整数的和。

test.js中的内容为：

let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
run.addEventListener("click", function(){
let [a, b] = input.value.split(' '); //获取textarea中的input的值，将输入的值分别赋值给a和b
a = parseInt(a), b = parseInt(b);
output.innerHTML = a + b; //展示pre内的标签内容a+b
})
}
export {
main
}

复制代码

输入一个小数，返回向零取整之后的结果。

ps:向0取整的意思是：只要你不是整数就把余数抹掉，变成整数。

test.js中的内容为：

let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
run.addEventListener("click", function(){
let x = parseFloat(input.value); //获取textarea中的input的值
output.innerHTML = parseInt(x); //展示pre内的标签内容
})
}
export {
main
}

复制代码

输入a, b, c, 输出(a+b)*c的值。

test.js中的内容为：

let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
run.addEventListener("click", function(){
let [a, b, c] = input.value.split(' '); //获取textarea中的input的值，将输入的值分别赋值给a和b
a = parseFloat(a), b = parseFloat(b), c = parseFloat(c);
output.innerHTML = (a + b) * c; //展示pre内的标签内容
})
}
export {
main
}

复制代码

求反三位数。

test.js中的内容为：

let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
run.addEventListener("click", function(){
let x = parseInt(input.value); //获取textarea中的input的值，将输入的值分别赋值给a和b
let a = x % 10;
x = parseInt(x / 10);
let b = x % 10;
x = parseInt(x / 10);
let c = x;
let s = `${a}${b}${c}`;
output.innerHTML = s; //展示pre内的标签内容
})
}
export {
main
}

复制代码

输出一个菱形。

test.js中的内容为：

let input = document.querySelector(".input");
let run = document.querySelector("button");
let output = document.querySelector("pre");
function main() {
// 给<run>元素添加监听事件。当触发“click”时，执行function()函数
run.addEventListener("click", function(){
let s = ""; //获取textarea中的input的值
s += " *\n";
s += " ***\n";
s += "*****\n";
s += " ***\n";
s += " *";
output.innerHTML = s; //展示pre内的标签内容
})
}
export {
main
}

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

回复

使用道具举报

2025-6-6 10:13:39

0

粉丝关注

23

主题发布

板块介绍填写区域，请于后台编辑

财富榜{圆}