yueranran

jquery计算器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery简单计算器</title>
</head>
<style>
    .container{
        width: 230px;
        height: 230px;
        background: rgb(196,210,224);
        margin: 80px auto;
        padding: 5px;
    }
    .top{
        width: 230px;
        height: 60px;
        background-color:#999;
    }
    .bottom{
        width: 230px;
        height: 170px;
    }
    .left{
        width: 155px;
        height: 170px;
        float: left;
    }
    .left input{
        width: 40px;
        height: 40px;
        margin-top: 3px;
    }
    .right{
        float: left;
        width: 75px;
        height: 170px;
    }
    .right input{
        width: 75px;
        height: 30px;
        margin-top: 4.3px;
    }
    .top p{
        line-height: 30px;
        text-align: right;
        height: 30px;
        margin: 0;
    }
</style>
<body>
    <div class="container">
        <div class="top">
            <p class="text1"></p>
            <p class="text2">0</p>
        </div>
        <div class="bottom">
            <div class="left">
                <input type="button" name="" id="" value="7" />
                <input type="button" name="" id="" value="8" />
                <input type="button" name="" id="" value="9" />
                <input type="button" name="" id="" value="4" />
                <input type="button" name="" id="" value="5" />
                <input type="button" name="" id="" value="6" />
                <input type="button" name="" id="" value="1" />
                <input type="button" name="" id="" value="2" />
                <input type="button" name="" id="" value="3" />
                <input type="button" name="" id="" value="c" class="c"/>
                <input type="button" name="" id="" value="0" />
                <input type="button" name="" id="" value="." />
            </div>
            <div class="right">
                <input type="button" name="" id="" value="+" />
                <input type="button" name="" id="" value="-" />
                <input type="button" name="" id="" value="*" />
                <input type="button" name="" id="" value="/" />
                <input type="button" name="" id="" value="=" />
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            // var txt=\'\'
            $(\'.left input:not(.c)\').click(function(){
                // txt+=$(this).val()
                // $(\'.text2\').text(txt)
                if($(\'.text2\').text().indexOf(\'.\')!=-1){    //如果有点了,再次判断
                    // if($(this).val()===\'.\'){     //如果新输入的有点,不添加
                        
                    // }else{        //如果新添加的没有点,继续将输入的累加到text2
                    //     $(\'.text2\').append($(this).val())    
                    // }
                    
                    if($(this).val()!=\'.\'){        //逻辑等于上面注释的部分
                        $(\'.text2\').append($(this).val())    
                    }
                }else if($(\'.text2\').text()===\'0\'){
                    if($(this).val()===\'.\'){
                        $(\'.text2\').append($(this).val())
                    }else{
                        $(\'.text2\').text($(this).val())
                    }
                }else{
                    $(\'.text2\').append($(this).val())    //如果没有点就一直累加
                }
            })
            $(\'.right input:not(:last)\').click(function(){  //点击右边的按钮,除了最后一个不添加点击事件
                $(\'.text1\').text($(\'.text2\').text()+$(this).val())
                $(\'.text2\').text(\'\')
            })
            $(\'.right input\').last().click(function(){    //右边按钮的最后一个添加点击事件
                var t1=$(\'.text1\').text();
                var t2=$(\'.text2\').text();
                // var t=$(".text1").text();
                // console.log($(".text1").text()[t.length-1]);
            //     var t3=t1+t2
                $(\'.text2\').text(count[t1[t1.length-1]](t1,t2))
                $(\'.text1\').append(t2)
            })
            var count={
                \'+\':function(a,b){
                    return parseFloat(a)+parseFloat(b)
                },
                \'-\':function(a,b){
                    return parseFloat(a)-parseFloat(b)
                },
                \'*\':function(a,b){
                    return parseFloat(a)*parseFloat(b)
                },
                \'/\':function(a,b){
                    return parseFloat(a)/parseFloat(b)
                }
            }
            $(\'.c\').click(function(){
                $(\'.text1\').text(\'\')
                $(\'.text2\').text(\'0\')
            })
        })
    </script>
</body>
</html>

 

分类:

技术点:

相关文章:

  • 2021-09-28
  • 2021-09-28
  • 2021-09-28
  • 2021-09-07
  • 2021-08-29
  • 2021-09-18
  • 2021-09-28
猜你喜欢
  • 2021-09-20
  • 2021-12-03
  • 2021-09-28
  • 2021-11-20
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案