输入与输出的小练习o_o ....以下将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 class="input" name="" id="" cols="30" rows="10"></textarea><br><button>Run</button><br><pre></pre><script type="module">import {main} from "/test/test.js";main(); </script>
</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和ba = 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和ba = 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和blet 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
}
