七天学会javascript之计算机功能实现（34）

最新推荐文章于 2021-07-25 18:35:17 发布

㼛思雨

最新推荐文章于 2021-07-25 18:35:17 发布

阅读量315

点赞数 2

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45147894/article/details/106413677

版权

Javascript 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

任务：

1：采用HTML+CSS的布局样式结合javasript方法，实现简洁美观的计算机。

2：能够实现加、减、乘、除、平方、平方根、百分比、取反、清空、回退等功能。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
/*配套案例CSS样式参考*/
#calcuator {
    width: 200px;
    height: 245px;
    padding: 10px;
    border: 1px solid #e5e5e5;
    background: #f8f8f8;
    margin: 0px auto;
}
 
#calcuator #input-box {
    margin: 0;
    width: 187px;
    padding: 9px 5px;
    border: 1px solid #e5e5e5;
    text-align: right;
}
 
#calcuator #btn-list {
    width: 200px;
}
 
#calcuator #btn-list .btn-radius {
    text-align: center;
    line-height: 29px;
    float: left;
    margin-left: 11px;
    margin-top: 11px;
    cursor: pointer;
    border: 1px #0CF solid
}
 
#calcuator #btn-list .btn-30 {
    width: 29px;
    height: 29px;
}
 
#calcuator #btn-list .btn-70 {
    width: 70px;
    height: 29px;
}
 
#calcuator #btn-list .clear-marginleft {
    margin-left: 0;
}
 
#calcuator #btn-list .font-14 {
    font-size: 14px;
}
 
#calcuator #btn-list .color-red {
    color: #ff5050
}
 
#calcuator #btn-list .color-blue {
    color: #00b4ff
}






</style>


</head>

<body> <div id="calcuator">
            <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readinly"/>
      <div id="btn-list">
        <div onClick="s('')" class="btn-30 btn-radius color-red clear-marginleft" >C</div> 
       <div onClick="operator('opposite')" class="btn-30 btn-radius color-blue" >+/-</div> 
       <div onClick="operator('percent')" class="btn-30 btn-radius color-blue">%</div> 
       <div onClick="operator('backspace')" class="btn-70 btn-radius color-red font-14"><--</div> 
       <div onClick="a('7')" class="btn-30 btn-radius clear-marginleft">7</div>
       <div onClick="a('8')" class="btn-30 btn-radius">8</div>
       <div onClick="a('9')" class="btn-30 btn-radius">9</div>
       <div onClick="a('+')" class="btn-30 btn-radius color-blue font-14">+</div>
       <div onClick="a('-')" class="btn-30 btn-radius color-blue font-14">-</div>
       <div onClick="a('4')" class="btn-30 btn-radius clear-marginleft">4</div>
       <div onClick="a('5')" class="btn-30 btn-radius">5</div>
       <div onClick="a('6')" class="btn-30 btn-radius">6</div>
       <div onClick="a('*')" class="btn-30 btn-radius color-blue font-14">*</div>
       <div onClick="a('/')" class="btn-30 btn-radius color-blue font-12">÷</div>
       <div onClick="a('1')" class="btn-30 btn-radius clear-marginleft">1</div>
       <div onClick="a('2')" class="btn-30 btn-radius">2</div>
       <div onClick="a('3')" class="btn-30 btn-radius">3</div>
       <div onClick="operator('pow')" class="btn-30 btn-radius color-blue font-14">x^</div>
       <div onClick="operator('sqrt')" class="btn-30 btn-radius color-blue font-12">√</div>
       <div onClick="a('0')" class="btn-70 btn-radius clear-marginleft">0</div>
       <div onClick="a('.')" class="btn-30 btn-radius">.</div>
       <div onClick="e()" class="btn-70 btn-radius color-red font-14">=</div>
       </div>
       
<script>
   
            input = document.getElementById('input-box');
 
            function s(v) {
                input.value = v
            }
 
            function a(v) {
                input.value += v
            }
 
            function e() {
                try {
                    s(eval(input.value))
                } catch (e) {
                    s('Error')
                }
            }
 
 
            function operator(type) {
                switch (type) {
                    case "backspace":
                        var str = input.value;
                        //str = (str != "0") ? str : "";
                        str = str.substr(0, str.length - 1);
                        str = (str != "") ? str : "0";
                        input.value = str;
                        break;
                    case "opposite":
                        input.value = -input.value;
                        break;
                    case "percent":
                        input.value = input.value / 100;
                        break;
                    case "pow":
                        input.value = Math.pow(input.value, 2);
                        break;
                    case "sqrt":
                        input.value = Math.sqrt(input.value);
                        break;
                }
            }
</script>

</body>
</html>

㼛思雨

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
七天学会javascript之计算机功能实现（34）

任务：1：采用HTML+CSS的布局样式结合javasript方法，实现简洁美观的计算机。2：能够实现加、减、乘、除、平方、平方根、百分比、取反、清空、回退等功能。<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">/*配套案例CSS样式参考*/#calcuator
复制链接

扫一扫