美文网首页前端基础
计算器可键盘操作

计算器可键盘操作

作者: 向着光噜噜 | 来源:发表于2019-09-29 18:12 被阅读0次

<!DOCTYPE html>

<html>

    <head>

            <title>计算器</title>

            <style type="text/css">

                    *{

                            margin:0;

                            padding:0;

                            box-sizing: border-box;

                            font: 18px Arial,sans-serif;

                    }

                body{

                      height:100%;

                      background-color:lightslategrey;

                }

                #calculator{

                      margin: 15px auto;

                      width:330px;

                      height:400px;

                      border: 1px solid lightgray;

                      border-radius:32px;

                      background-color:pink;

                      padding:15px;

                }

            .LOGO{

                      height:8px;

                }

            .circle{

                    height:16px;

                    width:16px;

                    border-radius:12px;

                    margin-right: 16px;

                    background-color:lightgrey;

                    border:1px solid black;

                    display:inline-block;

            }

        input{

                  background-color: lightskyblue;

        }

        .screen{

                  margin-top:15px;

                  width:300px;

                  height:40px;

                  text-align: right;

                  padding-right:10px;

                  font-size:20px;

            }

        #keys{

                  border:1px solid lightgray;

                  height:223px;

                  margin-top:25px;

                  padding:8px;

        }

        #keys .buttons{

                  float:left;

                  width: 42px;

                  height: 36px;

                  border-radius:12px;

                  text-align:center;

                  background-color:lightgray;

                  margin: 0 17px 20px 0;

        }

        </style>

    </head>

<body onload="onLoad()">

    <div id="calculator">

              <div class="LOGO">

                    <div class="circle"></div>

                    <div class="circle"></div>

                    <div class="circle"></div>

                    ❤  ❤  ❤  ❤  ❤  ❤  ❤  ✌

              </div>

            <!--输入栏-->

            <div class="screen">

               <input type="text"id="screenName" name="screenName" class="screen" value=""                                         onkeyup="deleteEq()" onkeydown="onInput()"/>

            </div>

          <div id="keys" >

                  <!--第一排-->

                <input type="button" id="7" onclick="jsq(this.id)" value="7" class="buttons">

                <input type="button" id="8" onclick="jsq(this.id)" value="8" class="buttons">

                <input type="button" id="9" onclick="jsq(this.id)" value="9" class="buttons">

                <input type="button" id="Back" onclick="clearOne()" value="⇦" class="buttons">

                <input type="button" id="C" onclick="clearAll()" value="AC" class="buttons" style="margin-right:0px">

            <!--第二排-->

            <input type="button" id="4" onclick="jsq(this.id)" value="4" class="buttons">

            <input type="button" id="5" onclick="jsq(this.id)" value="5" class="buttons">

            <input type="button" id="6" onclick="jsq(this.id)" value="6" class="buttons">

            <input type="button" id="*" onclick="jsq(this.id)" value="*" class="buttons">

            <input type="button" id="/" onclick="jsq(this.id)" value="/" class="buttons" style="margin-right:0px">

            <!--第三排-->

            <input type="button" id="1" onclick="jsq(this.id)" value="1" class="buttons">

            <input type="button" id="2" onclick="jsq(this.id)" value="2" class="buttons">

            <input type="button" id="3" onclick="jsq(this.id)" value="3" class="buttons">

            <input type="button" id="+" onclick="jsq(this.id)" value="+" class="buttons">

            <input type="button" id="-" onclick="jsq(this.id)" value="-" class="buttons" style="margin-right:0px">

            <!--第四排-->

            <input type="button" id="0" onck="jsq(this.id)" value="0" class="buttons">

            <input type="button" id="00" onclick="jsq(this.id)" value="00" class="buttons">

            <input type="button" id="." onclick="jsq(this.id)" value="." class="buttons">

            <input type="button" id="%" onclick="jsq(this.id)" value="%" class="buttons">

            <input type="button" id="eva" onclick="eq()" value="=" class="buttons" style="margin-right:0px">

        </div>

     </div>

</body>

<script>

  var num = 0; // 定义第一个输入的数据

  function onInput(){

        if(event.keyCode==187){

        eq();

        }

  }

 function deleteEq(){

        if(event.keyCode==187){

        var temp=document.getElementById('screenName').value;

        document.getElementById('screenName').value=temp.substr(0,temp.length-1);

        }

  }

 function jsq(num) {

    //获取当前输入

    document.getElementById('screenName').value += document.getElementById(num).value;

  }

  function eq() {

    //计算输入结果

    document.getElementById("screenName").value = eval(document.getElementById("screenName").value);

  }

  function clearAll() {

    //清0

    document.getElementById("screenName").value = null;

    document.getElementById("screenName").focus();

  }

  function clearOne() {

    //退格

    var arr = document.getElementById("screenName");

    arr.value = arr.value.substring(0, arr.value.length - 1);

  }

  function onLoad(){

    //加载完毕后光标自动对应到输入框

    document.getElementById("screenName").focus();

  }

</script>

</html>

相关文章

  • 计算器可键盘操作

    计算器 *{ margi...

  • 点击textField 不显示系统键盘 导致崩溃

    最近在做计算器功能时,要实现自定义的键盘操作,所以要隐藏系统键盘,完全不显示。 写完这一段代码之后 发现一个十分奇...

  • 计算器魔术#展示特定文字#魔术软件#魔术教程#iPhone#iO

    当前计算器魔术,有好几种类型 一、计算器展示特定文本这类操作基本都是特定软件才能实现。当前我发现了两种可实现的Ap...

  • 【敲黑板】考试计算器技巧

    方案一 普通计算器+科学计算器(让带计算器) 方案二 搜狗输入法V+计算大法(不让带计算器) 快捷操作 加:+ ...

  • 键盘操作

    键盘216+35 0.35 0.25 #import" cTableViewController.h" //UI...

  • 《键盘操作》

    一 Ctrl键功能 1 Ctrl S 保存 2、Ctrl W 关闭程序 3 Ctrl N 新建 4 ...

  • 键盘操作

    键盘操作:全选、复制、剪切、粘贴 实现方式: 需要引入Keys()from selenium.webdriver....

  • 键盘操作

    from seleniumimport webdriver # 调用keys模块 from selenium.we...

  • 键盘操作

    1、write写入一个字符串,还可以传入interval表示写入每个字符之间的间隔 2、typewrite主要的键...

  • 赚大钱

    老师看到小尚同学经常不爱学习,老爱练习操作电子计算器:别人专心听讲的时候,他在练习操作电子计算器;别人仔细做题的时...

网友评论

    本文标题:计算器可键盘操作

    本文链接:https://www.haomeiwen.com/subject/fewzectx.html