HTML+css implements a good-looking calculator example code

The final effect is as shown in Figure-2. There is a bug: After the integer, the result of clicking the % sign is correct. If you click % after the decimal, the result will be wrong! Everything else is normal. Please give me some advice: The input value is of type string. How can I correctly handle the if part in Figure 1 below in JS? ?

Figure-1

Figure-2

##The HTML code is as follows

6c04bd5ca3fcae76e30b72ad730ca86d99afb4a0ec78806987e189e4c98398ea
    6eed0752efaf084fb70976dddbedd34a
        0c689d943f73a1c092c31716bd34abcf简单的计算器54bdf357c58b8a65c66d7c19c8e4d114
        09283fc524a4a36c146c764949aa242f@walker54bdf357c58b8a65c66d7c19c8e4d114
    94b3e26ee717c64999d7867364b1b4a3
    67c9afe7600333b5efa11b749b2759ff
        deedeeafaf89b261f7ed51995f4a25b8
        98799819c3ca063458af76c1c0c158a4
            bfa0a8d425fe9a3229798d95cee15aaa
        94b3e26ee717c64999d7867364b1b4a3
    94b3e26ee717c64999d7867364b1b4a3
    fa1564eb50cd496f5a54da14b70f3731
        8bd12a904b5d9201505108402ae9ca00
        01af2567ae295c11fcca7bcb65849a40
        79bbb341fe414a74021b0e8d5a2c72c2
        e88e7be8536984758a184c7eea3ef701
        9c26a78a7f8bde1e3d2efe6820e50178
        50f71579e0ac6843fa825d79ede8e3e3
        1bbae22b4a04bbb75c7c1f4a0ff3417b
        fbdd6c8cd401baffbf0f9e7071905aca
        9500030dfc6788d9b162467c0947683c
        eb6f00fdc0aaf2a28f6e3281f2763846
        08b2cde8095433d655b45a09719d73d7
        d296c2f21cf91f82002bc7c047cfa414
        26b9cd665a6ba1e48ef2e1e09a967b04
        38714593b7af3dbf30824b049c29c6b0
        bfeb4fda949ce9cf028ae94b96b103a9
        bd611b73f12920f7c112afc4364a3b92
        094534c054422ede9118d7836b696876
        62126d533680ecb235bebf919bc5bdd3
        16ab8776b06225c12d9d7f5e600537f8
        1e1575dba18673437b2a13f7f25b6c30
        503dcccdbdff0d6f710ee91a7ffc8d97
        a8c2d5a4860de0a891af473e29f0ccb1
        bbe1fc9bab6b3868339cbbaea59523fc
        60c0655510ce26792b889a4a5cfc2cb0
        bf234edee30f46b59214666e18c32ac0
    94b3e26ee717c64999d7867364b1b4a3
    7bcffe5f516221485a783f8c6abf3ffe
        c0ffcba5f60278bc3e0b127e4bd66c09欢迎使用JavaScript计算器54bdf357c58b8a65c66d7c19c8e4d114
            095b885e2899edf327d7d75922364d26
                27c2b160b1f3514b8ab408eba144b76c反馈5db79b134e9f6b82c0b36e0489ee08ed
            54bdf357c58b8a65c66d7c19c8e4d114
    94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e4956

CSS code is as follows:

c9ccee2e6ea535a969eb3f532ad9fe89        /*Basic reset*/*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font:  14px Arial,sans-serif;
}html{
    height:100%;
    background-color:lightslategrey;
}#calculator{
    margin: 15px auto;
    width:330px;
    height:400px;
    border: 1px solid lightgray;
    background-color:darkgrey;
    padding:15px;
}/*LOGO*/.LOGO{
    height:20px;

}.LOGO .name{
    float:left;
    line-height:30px;
}.LOGO .verson{
    float:right;
    line-height:30px;
}/*screen*/#shuRu{
    margin-top:15px;
}.screen{
    margin-top:5px;
    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 .last{
    margin-right:0px;
}.footer{
    margin-top:20px;
    height:20px;
}.footer .link{
    float:right;
}#keys .buttons{
    float:left;
    width: 42px;
    height: 36px;
    text-align:center;
    background-color:lightgray;
    margin: 0 17px 20px 0;
}
    531ac245ce3e4fe3d50054a55f265927

Javascript code is as follows:

<script>
        var num = 0;  // 定义第一个输入的数据
        function jsq(num) {
            //获取当前输入
			if(num=="%"){
				document.getElementById(&#39;screenName&#39;).value=Math.round(document.getElementById(&#39;screenName&#39;).value)/100;
			}else{
				document.getElementById(&#39;screenName&#39;).value += document.getElementById(num).value;
			}
        }
        function eva() {
            //计算输入结果
            document.getElementById("screenName").value = eval(document.getElementById("screenName").value);
        }
        function clearNum() {
            //清0
            document.getElementById("screenName").value = null;
            document.getElementById("screenName").focus();
        }
        function tuiGe() {
            //退格
            var arr = document.getElementById("screenName");
            arr.value = arr.value.substring(0, arr.value.length - 1);
        }
    </script>

[Related recommendations]

1.

Free html online video tutorial

2.

html development manual

3.

php.cn original html5 video tutorial

The above is the detailed content of HTML+css implements a good-looking calculator example code. For more information, please follow other related articles on the PHP Chinese website!