每次考试,总成绩,算分比较考验心算,尤其是遇到成绩差的同学,那可真苦了我的心,算起来力不从心啊,那真叫一个心酸,怎么简单点呢,没发现好用的工具,那就自己动手,丰衣足食。

第一版本的功能是应急的,也就简单的写了个计算而已,操作起来也是相当的丝滑,怎么说呢,上图看看效果:

计算器

怎么个玩法呢,很简单,直接在键盘中输入本次应该扣掉的分数,然后敲回车键就自动计算了,当计算完成后,敲一下"Backspace"键,轻松的进行下一次,这个效率那是杠杠的,比起计算器来,这个在特定的场景下使用,是不是更丝滑呢!

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        div{
            width: 60%;
            height: 60px;
            margin:150px auto;
            border: 1px solid purple;
            border-radius: 8px;
            line-height: 60px;
            font-size: 32px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="show" ></div>
    <div id="result"></div>
    
    <script type="text/javascript">
        
        $(document).keydown(function(event){ 
            console.log(event.keyCode);
            switch(event.keyCode)
            {
                case 48:
                    $("#show").append(0);
                    break;
                case 49:
                    $("#show").append(1);
                    break;
                case 50:
                    $("#show").append(2);
                    break;
                case 51:
                    $("#show").append(3);
                    break;
                case 52:
                    $("#show").append(4);
                    break;
                case 53:
                    $("#show").append(5);
                    break;
                case 54:
                    $("#show").append(6);
                    break;
                case 55:
                    $("#show").append(7);
                    break;
                case 56:
                    $("#show").append(8);
                    break;
                case 57:
                    $("#show").append(9);
                    break;
                    break;
                case 190:
                    $("#show").append('.');
                    break;
                case 13:
                    if($("#result").html().length ==0)
                    {
                        $("#result").html(100 - $("#show").html());
                    }else{
                        $("#result").html($("#result").html() - $("#show").html());
                    }
                    $("#show").html('');
                    break;
                case 8:
                    $("#result").html('');
            }

        })
    </script>
</body>
</html>
Last modification:March 8th, 2020 at 04:40 pm
如果觉得我的文章对你有用,请随意赞赏