找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发简单计算器实现

2018-11-26 分类：教程 阅读(730) 评论(0)
百度贴吧 前端开发 待遇
前端开发资源 百度云
web前端开发百度贴吧
前端开发百度贴吧

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>04-00-计算器</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                left: 0;
                top: 0;
                list-style: none;
            }
            ul {
                margin: 50px;
                margin-top: 20px;
                width: 280px;
            }
            ul li {
                float: left;
                width: 45px;
                height: 45px;
                border: 1px solid #aaa;
                margin: 10px;
                text-align: center;
                line-height: 45px;
                font-family: 微软雅黑;
                font-size: 16px;
                font-weight: bolder;
                cursor: pointer;
            }
            ul li:nth-child(3),
            ul li:nth-last-child(3) {
                width: 110px;
            }
            .r {
                width: 244px;
                height: 80px;
                border: 1px solid #aaa;
                margin-top: 50px;
                margin-left: 60px;
                font-family: 微软雅黑;
                font-size: 20px;
                text-align: right;
                line-height: 80px;
                overflow: hidden;
                /*overflow-x: scroll;*/
            }
        </style>
        <!–
            <link rel=”stylesheet” href=”./css/cal.css”>
            <script src=”./js/cal.js”></script>
        –>
        <!– <script src=’../day1/js/my.js’></script> –>
    </head>
    <body>
        <div class=”r”></div>
        <ul>
            <li>退格</li>
            <li>C</li>
            <li>=</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>+</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>-</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>*</li>
            <li>0</li>
            <li>.</li>
            <li>/</li>
        </ul>
        <script>
            var lis = document.querySelectorAll(‘ul li’)
            var r = document.querySelector(‘.r’)
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function() {
                    /* body… */
                    var ih = this.innerHTML
                    var rh = r.innerHTML
                    var oper = [‘+’, ‘-‘, ‘*’, ‘/’]
                    switch (ih) {
                        case ‘退格’:
                            // statements_1
                            rh = rh.slice(0, -1)
                            console.log(rh)
                            r.innerHTML = rh
                            break
                        case ‘C’:
                            r.innerHTML = ”
                            break
                        case ‘=’:
                            var result = eval(r.innerHTML) //eval:执行js代码
                            var haha = result – parseInt(result)
                            console.log(haha)
                            if (haha > 0) {
                                r.innerHTML = result.toFixed(2)
                                // 保留两位小数并四舍五入
                            } else {
                                console.log(result)
                                r.innerHTML = result
                            }
                            //保留两位小数
                            break
                        case ‘*’:
                        case ‘/’:
                            var lc = rh.slice(-1)
                            if (rh == ” || oper.indexOf(lc) > -1) {
                                return
                            } else {
                                r.innerHTML += ih
                            }
                            // console.log(oper.indexOf(lc));
                            break
                        case ‘.’:
                            var zz = /[+*/-]/gi
                            var arrnumber = rh.split(zz)
                            var zzz = /\./gi
                            console.log(arrnumber)
                            var lc = rh.slice(-1)
                            // var narr = rh.split(); //用正则分割成数组
                            if (
                                !rh ||
                                isNaN(lc) ||
                                zzz.test(arrnumber[arrnumber.length – 1])
                            ) {
                                return
                            } else {
                                r.innerHTML += ih
                            }
                            break
                        case ‘+’:
                        case ‘-‘:
                            var lc = rh.slice(-1)
                            // console.log(oper.indexOf(lc));
                            if (oper.indexOf(lc) > -1) {
                                return
                            } else {
                                r.innerHTML += ih
                            }
                            break
                        default:
                            r.innerHTML += ih
                    }
                }
            }
        </script>
    </body>
</html>
前端百度地图开发
慕课网web前端开发百度云
web前端开发 百度百科
前端百度地图api开发
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论