练习1

以下将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和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
}
作者:kitty又困了原文地址:https://www.cnblogs.com/kitty-38/p/18675291

%s 个评论

要回复文章请先登录注册