简易计算器与选项卡实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45454695/article/details/103416802

简易计算器

<body>
数值1：<input type="text"/>
<br/>
数值2：<input type="text"/>
<br/>
<button class="btn1" onclick="hanshu('+')">+</button>
<button class="btn2" onclick="hanshu('-')">-</button>
<button class="btn3" onclick="hanshu('*')">*</button>
<button class="btn4" onclick="hanshu('/')">/</button>
<br/>
计算结果：<span></span>
<script>
    function hanshu(c) {
        var m=parseFloat(document.getElementsByTagName("input")[0].value);
        var n=parseFloat(document.getElementsByTagName("input")[1].value);
        if(c=="+"){
            document.getElementsByTagName("span")[0].innerHTML=m+n;
        }
       if(c=="-"){
            document.getElementsByTagName("span")[0].innerHTML=m-n;
        }
       if(c=="*"){
            document.getElementsByTagName("span")[0].innerHTML=m*n;
        }
       if(c=="/"){
            document.getElementsByTagName("span")[0].innerHTML=m/n;
        }
    }
</script>

选项卡

<div id="box1">
    <p>
        <a href="">one</a>
        <a href="">two</a>
        <a href="">three</a>
        <a href="">four</a>
    </p>
    <div class="content">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
    </div>
</div>
<br>
<br>
<div id="box2">
    <p>
        <a href="">one</a>
        <a href="">two</a>
        <a href="">three</a>
        <a href="">four</a>
    </p>
    <div class="content">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>d</div>
    </div>
</div>
<script>
    window.οnlοad=function(){
        tabs("box1");
        tabs("box2");
    function tabs (id){
        var as=document.getElementById(id).getElementsByTagName("p")[0].children;
        var cons=document.getElementById(id).getElementsByClassName("content")[0].children;
        cons[0].style.display="block";
        for(var i=0;i<as.length;i++){
            as[i].index=i;
            as[i].οnmοuseοver=function (id) {
                for(var j=0;j<cons.length;j++) {
                    cons[j].style.display="none";
                }
                cons[this.index].style.display="block";
            }
        }
    }
    }
</script>

JS基础练习01