JavaScript —— 练习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
}

来源链接：https://www.cnblogs.com/kitty-38/p/18675291

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END