书犹药也,善读可以医愚

    

原生JS简易计算器

图片演示:

原生JS简易计算器

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单计算器 - NiceHan</title>
        <style type="text/css">
            *{
                border: 0;
            }
            body{
                background-color: rgba(100,149,237,0.8);
            }
            h1{
                color: white;
                text-align: center;
                font-family: 'Microsoft YaHei';
                font-size: 56px;
                font-weight: bold;
                text-shadow: 0px 0px 0 rgb(148,148,148), 1px 1px 0 rgb(125,125,125), 2px 2px 0 rgb(103,103,103), 3px 3px 0 rgb(80,80,80), 4px 4px 0 rgb(57,57,57), 5px 5px 0 rgb(34,34,34), 6px 6px 0 rgb(11,11,11),7px 7px 6px rgba(0,0,0,0.75), 7px 7px 1px rgba(0,0,0,0.5), 0px 0px 6px rgba(0,0,0,.2);
            }
            input{
                margin: 6px;
                background-color: white;
            }
            .btnstyle{
                background-color: orange;
            }
            input:hover{
                background-color: #C0C0C0;
            }
            input[type=button]{
                height: 36px;
                width: 36px;
            }
            input[type=text]{
                height: 36px;
                width: 190px;
            }
        </style>


        <script type="text/javascript">
          function num(val){
            switch(val){
                case "=":
                document.getElementById('texton').value=eval(document.getElementById('texton').value);
                break;

                case "AC":
                document.getElementById('texton').value="";
                break;

                default:
                document.getElementById('texton').value=document.getElementById('texton').value+val;
                document.getElementById('texton').value=document.getElementById('texton').value;
            }
        }
    </script>

    </head>
    <body>
    <h1>简单计算器 - NiceHan</h1>
    
        <div style="width: 208px;margin: auto;background-color: black;">
        <input type="text" name="texton" id="texton" value="" style="text-align: center;font-size: 16px;background-color: lightyellow;"/>
        <br />
        <input type="button" name="btn1" id="btnac" value="AC" onclick="num(this.value)"  style="width: 141px;"/>
        <input type="button" name="btn1" id="btn+" value="+" onclick="num(this.value)" class="btnstyle"/>
        <br />
        <input type="button" name="btn1" id="btn1" value="1" onclick="num(this.value)"/>
        <input type="button" name="btn1" id="btn2" value="2" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn3" value="3" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn-" value="-" onclick="num(this.value)" class="btnstyle"/>
        <br />
        <input type="button" name="btn1" id="btn4" value="4" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn5" value="5" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn6" value="6" onclick="num(this.value)" />
        <input type="button" name="btn1" id="*" value="×" onclick="num(this.id)" class="btnstyle"/>
        <br />
        <input type="button" name="btn1" id="btn7" value="7" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn8" value="8" onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn9" value="9" onclick="num(this.value)" />
        <input type="button" name="btn1" id="/" value="÷" onclick="num(this.id)" class="btnstyle"/>
        <br />
        <input type="button" name="btn0" id="btn0" value="0" onclick="num(this.value)" style="width: 90px;"/>
        <input type="button" name="btn1" id="btn." value="."  onclick="num(this.value)" />
        <input type="button" name="btn1" id="btn=" value="=" onclick="num(this.value)" class="btnstyle"/>
        </div>
    </body>
</html>

已有 2 条评论

  1. 匿名 匿名
    果然很骚!
    1. 回复 匿名: 是滴是滴。

添加新评论

  时光Time

岂能尽随人愿,但求无愧我心。
--- updated on 2019-11-23 12:52

  关于博主

98年,处女座,有一点点点点强迫症,性格诡异,情绪复杂多变。爱好码代码。也喜欢听歌与阅读,喜欢接触新鲜事物。座右铭:活到老,学到老,生命在于学习!

  近期评论

很多东西宁缺毋滥,流星的光芒短暂而灼热闪耀。

让你变得更好的那个人,往往是你觉得很难与之相处的那个人。—— by 小宇

觉得自己做的到和不做的到,其实只在一念之间。

路在自己脚下,没有人可以决定我的方向。

你的选择是做或不做,但不做就永远不会有机会。

凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历尽沧桑悟然。