6.22（js--＞案例应用）

（练习1）简易计算器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加法计算器</title>
<style>
    input {
        width: 50px;
    }
</style>
    </head>   
   
<body>
  <script>
    function calc() {
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
        num1 = parseFloat(num1);
        num2 = parseFloat(num2);
        var result = num1 + num2;
        document.getElementById("result").value = result;

    }
    </script>
   <input type="text" id="num1"> +
    
        <input type="text" id="num2">
        =
        <input type="text" id="result">
    
        <input type="button" value="运算" onclick="calc()">
   
</body>
</html>

在这里插入图片描述
（练习2）黄鹤

<html>
<script>
    function generate() {
        var location = $("location");
        var companyType = $("companyType");
        var companyName = $("companyName");
        var bossName = $("bossName");
        var money = $("money");
        var product = $("product");
        var unit = $("unit");

        var result = location + "最大" + companyType + companyName + "倒闭了，王八蛋老板" + bossName + "吃喝嫖赌，欠下了" + money + "个亿，"
            + "带着他的小姨子跑了!我们没有办法，拿着" + product + "抵工资!原价都是一" + unit + "多、两" + unit + "多、三" + unit + "多的" + product + "，"
            + "现在全部只卖二十块，统统只要二十块!" + bossName + "王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
            + "你不发工资，你还我血汗钱，还我血汗钱!";

        document.getElementById("result").value = result;

    }

    function $(id) {
        var value = document.getElementById(id).value;
        return value;
    }

</script>

<style>
    body {
        font-family: 宋体;
    }

    span {
        display: inline-block;
        border: 1px solid lightgray;
        width: 120px;
        margin-bottom: 5px;
    }

    button#generate {
        width: 80px;
        height: 30px;
    }

    textarea {
        width: 100%;
        height: 150px;
        margin-top: 20px;
    }
</style>

<body>
    <span>地名:</span> <input type="text" id="location" value="浙江">
    <span>公司类型:</span> <input type="text" id="companyType" value="互联网公司">
    <br>
    <span>公司名称:</span> <input type="text" id="companyName" value="阿里九九">
    <span>老板姓名:</span> <input type="text" id="bossName" value="牛风">
    <br>
    <span>money:</span> <input type="text" id="money" value="一万">
    <span>产品:</span> <input type="text" id="product" value="贴膜">
    <br>
    <span>价格计量单位:</span> <input type="text" id="unit" value="百">

    <br>
    <div align="center">
        <button id="generate" onclick="generate()">生成</button>
        <br>
        <textarea
            id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
    </div>

    <br>

</body>

</html>

在这里插入图片描述
~~我得加快速度复习了，时间不等人~~

6.22（js--＞案例应用）

推荐阅读