javascript 基本知识,并利用HTML、CSS、JS做一个计算器

为什么需要有JavaScript?

HTML+CSS:实现了静态页面。
实际上,我们更多的页面的要求是动态的,比方说页面的自动切换。
还有验证码、注册页面的数据验证……
那么怎么才能让页面动起来呢?
答案就是JavaScript!

一,var声明变量

var name;

二,getElementById取出当前文档中的元素

var inputNum1 = document.getElementById("num1");

三,js弹窗 alter

if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }

四,修改页面内容

document.getElementById("username")value="xx";

利用HTML、CSS、JS做一个计算器

<html>
<head>
    <meta charset="utf-8">
    <title>我的计算器</title>
    <script>
        function myck(type) {
            var inputNum1 = document.getElementById("num1");
            var inputNum2 = document.getElementById("num2");
              if(type==1) {
                // 1.非空判断
                if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.value == "") {
                    alert("请先输入数字2");
                    return false;
                }
                // 2.加法操作
                var total = parseInt(inputNum1.value) + parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果:<strong style='color: red;'>" + total + "</strong></h2>";

            }else if(type==2){
                // 1.非空判断
                if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.value == "") {
                    alert("请先输入数字2");
                    return false;
                }
                // 2.减法操作
                var sub = parseInt(inputNum1.value) - parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果:<strong style='color: #ff0000;'>" + sub + "</strong></h2>";
            }else if(type==3){
                if (inputNum1.value == "") {
                    alert("请先输入数字1");
                    return false;
                }
                if (inputNum2.value == "") {
                    alert("请先输入数字2");
                    return false;
                }
                // 2.乘法操作
                var mul = parseInt(inputNum1.value)*parseInt(inputNum2.value);
                // 3.将结果展现在最下面 div 中
                document.getElementById("resultDiv").innerHTML =
                    "<h2>最终执行结果:<strong style='color: red;'>" + mul+ "</strong></h2>";
            }
            else if(type==4){
                inputNum1.value="";
                inputNum2.value="";
                document.getElementById("resultDiv").innerHTML ="";
            }
        }
    </script>
</head>
<body>
<div style="text-align: center;margin-top: 100px;">
    <h1>计算器</h1>
    数字1<input id="num1" type="number"> <p></p>
    数字2<input id="num2" type="number"> <p></p>
    <div>
        <input type="button" value=" 加 法 " onclick="myck(1)">
        <input type="button" value=" 减 法 " onclick="myck(2)">
        <input type="button" value=" 相 乘 " onclick="myck(3)">
        <input type="button" value=" 清 空 " onclick="myck(4)">
    </div>
    <div id="resultDiv" style="margin-top: 50px;">

    </div>
</div>
</body>
</html>

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值