計算機 | Programming Project | OrangeApple Learning Platform

{"id":174169,"student_id":12205,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\r\\n\u003cbody\u003e\\r\\n    \u003cdiv class=\\\"circle\\\"\u003e\u003c/div\u003e\\r\\n    \u003cimg src=\\\"000001_1524540589.jpg\\\" alt=\\\"\\\"\u003e\\r\\n    \u003cp\u003e\\r\\n       \\r\\n    \u003c/p\u003e\\r\\n  \\r\\n\u003c/body\u003e\\r\\n\u003c/html\u003e\\r\\n\u003chtml lang=\\\"en\\\"\u003e\\r\\n\u003chead\u003e\\r\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\r\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\r\\n    \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"ie=edge\\\"\u003e\\r\\n    \u003ctitle\u003eUse Calculator to Plan Your Money !! \u003c/title\u003e\\r\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"./calc.css\\\"/\u003e\\r\\n\u003c/head\u003e\\r\\n\u003cbody\u003e\\r\\n    \u003cdiv class=\\\"caculator\\\"\u003e\\r\\n        \u003cdiv class=\\\"display\\\"\u003e\\r\\n            \u003cspan class=\\\"result\\\"\u003e0\u003c/span\u003e\\r\\n            \u003cspan class=\\\"msg\\\"\u003eError\u003c/span\u003e\\r\\n        \u003c/div\u003e\\r\\n        \u003cdiv class=\\\"row\\\"\u003e\\r\\n            \u003cul class=\\\"key-row\\\"\u003e\\r\\n                \u003cli data-type=\\\"sp\\\"\u003eAC\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"sp\\\"\u003eDEL\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"opr\\\"\u003eMOD\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"opr\\\"\u003e/\u003c/li\u003e\\r\\n            \u003c/ul\u003e\\r\\n        \u003c/div\u003e\\r\\n        \u003cdiv class=\\\"row\\\"\u003e\\r\\n            \u003cul class=\\\"key-row\\\"\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e7\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e8\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e9\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"opr\\\"\u003eX\u003c/li\u003e\\r\\n            \u003c/ul\u003e\\r\\n        \u003c/div\u003e\\r\\n        \u003cdiv class=\\\"row\\\"\u003e\\r\\n            \u003cul class=\\\"key-row\\\"\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e4\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e5\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e6\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"opr\\\"\u003e─\u003c/li\u003e\\r\\n            \u003c/ul\u003e\\r\\n        \u003c/div\u003e\\r\\n        \u003cdiv class=\\\"row\\\"\u003e\\r\\n            \u003cul class=\\\"key-row\\\"\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e1\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e2\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e3\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"opr\\\"\u003e+\u003c/li\u003e\\r\\n            \u003c/ul\u003e\\r\\n        \u003c/div\u003e\\r\\n        \u003cdiv class=\\\"row\\\"\u003e\\r\\n            \u003cul class=\\\"key-row\\\"\u003e\\r\\n                \u003cli data-type=\\\"num\\\"\u003e0\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"sp-num\\\"\u003e.\u003c/li\u003e\\r\\n                \u003cli data-type=\\\"sp\\\" class=\\\"equal\\\"\u003e=\u003c/li\u003e\\r\\n            \u003c/ul\u003e\\r\\n        \u003c/div\u003e\\r\\n    \u003c/div\u003e\\r\\n    \u003cscript src=\\\"./calc.js\\\"\u003e\u003c/script\u003e\\r\\n\u003c/body\u003e\\r\\n\u003c/html\u003e\",\"css\":\"/* reset css */\\r\\nhtml, body, div, span, applet, object, iframe,\\r\\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\\r\\na, abbr, acronym, address, big, cite, code,\\r\\ndel, dfn, em, img, ins, kbd, q, s, samp,\\r\\nsmall, strike, strong, sub, sup, tt, var,\\r\\nb, u, i, center,\\r\\ndl, dt, dd, ol, ul, li,\\r\\nfieldset, form, label, legend,\\r\\ntable, caption, tbody, tfoot, thead, tr, th, td,\\r\\narticle, aside, canvas, details, embed, \\r\\nfigure, figcaption, footer, header, hgroup, \\r\\nmenu, nav, output, ruby, section, summary,\\r\\ntime, mark, audio, video {\\r\\n    margin: 0;\\r\\n    padding: 0;\\r\\n    border: 0;\\r\\n    font-size: 100%;\\r\\n    font: inherit;\\r\\n    vertical-align: baseline;\\r\\n}\\r\\n/* HTML5 display-role reset for older browsers */\\r\\narticle, aside, details, figcaption, figure, \\r\\nfooter, header, hgroup, menu, nav, section {\\r\\n    display: block;\\r\\n}\\r\\nbody {\\r\\n    line-height: 1;\\r\\n}\\r\\nol, ul {\\r\\n    list-style: none;\\r\\n}\\r\\nblockquote, q {\\r\\n    quotes: none;\\r\\n}\\r\\nblockquote:before, blockquote:after,\\r\\nq:before, q:after {\\r\\n    content: '';\\r\\n    content: none;\\r\\n}\\r\\ntable {\\r\\n    border-collapse: collapse;\\r\\n    border-spacing: 0;\\r\\n}\\r\\n/* 大區塊 */\\r\\n*{\\r\\n    box-sizing: border-box;\\r\\n}\\r\\nbody{\\r\\n    margin: auto;\\r\\n    display: flex;\\r\\n    justify-content: center;\\r\\n    align-items: center;\\r\\n    flex-direction: column; \\r\\n    width: 100%;\\r\\n    height: 550px;\\r\\n}\\r\\n.caculator{\\r\\n    min-width: 350px;\\r\\n    background-color: #ddd;\\r\\n    box-shadow: 0 0 20px 0px rgba(0,0,-0.6,0.5);\\r\\n    border-radius: 3px;\\r\\n}\\r\\n.display{\\r\\n    display: flex;\\r\\n    justify-content: space-evenly;\\r\\n    align-items: flex-end;\\r\\n    background: #777;\\r\\n    color: #fff;\\r\\n    font-size: 24px;\\r\\n    letter-spacing: 3px;\\r\\n    margin: 15px 10px 20px 15px;\\r\\n    border: 2px solid #1da5a5;\\r\\n    flex-flow: column nowrap;\\r\\n    cursor: pointer;\\r\\n    height: 75px;\\r\\n    padding-right: 5px;\\r\\n    overflow: hidden;\\r\\n    transition: all 0.1s ease-in;\\r\\n}\\r\\n.display:hover{\\r\\n    box-shadow: inset 0 0 50px 0.3px rgba(255,255,255,0.1);\\r\\n}\\r\\n.display:hover .result{\\r\\n    font-size: 25px;\\r\\n}\\r\\n.key-row{\\r\\n    display: flex;\\r\\n    border-bottom: 1px solid #ddd;\\r\\n    justify-content: center;\\r\\n    align-items: center;\\r\\n}\\r\\nli{\\r\\n    display: inline-block;\\r\\n    margin: 10px 10px 10px 10px;\\r\\n    width:65px; height: 40px;\\r\\n    border: solid 1px black;\\r\\n    font-size: 16px;\\r\\n    cursor: pointer;\\r\\n    color: #666;\\r\\n    display: flex;\\r\\n    justify-content: center;\\r\\n    align-items: center;\\r\\n    transition: all 0.1s ease-in;\\r\\n}\\r\\nli:hover{\\r\\n    background: #eee;\\r\\n    box-shadow: inset 0 0 0px 0.3px rgba(255,255,255,0.1);\\r\\n    color: black;\\r\\n    font-weight: 600;\\r\\n    font-size: 17px;\\r\\n}\\r\\n.row:last-child{\\r\\n    display: inline-block;\\r\\n    margin: 0px 0px 0px 5px;\\r\\n}\\r\\n.row:last-child li:last-child{\\r\\n    width:150px;\\r\\n}\\r\\n.msg{\\r\\n    color:#e3e30d;\\r\\n    font-size: 14px;\\r\\n    font-weight: bold;\\r\\n    display: none;\\r\\n    letter-spacing: 1.5px;\\r\\n}\\r\\n/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\r\\nbody {\\r\\n    /*text-align: center;\\r\\n    padding: 30px;*/\\r\\n    background-color: black;\\r\\n    text-align: center;\\r\\n    padding: 100px;\\r\\n}\\r\\n\\r\\n/* 設定圖片的寬度為銀幕一半寬 */\\r\\nimg {    \\r\\n    max-width: 100%; \\r\\n}\\r\\n\\r\\n/* 設定文字的顏色為淡黑色 */\\r\\np {\\r\\n    color: #555555;\\r\\n}\",\"js\":\"let cacu_opr =\\\"\\\"; //運算子\\r\\nlet cacu_num = []; //運算元\\r\\nlet cacu_sp =\\\"\\\"; //特殊運算子\\r\\nconst keys = document.querySelectorAll(\\\"li\\\");\\r\\nfunction too_much_number(num){\\r\\n    num = String(num);\\r\\n    return num.substring(0,10);\\r\\n}\\r\\nfunction new_number(number){\\r\\n    // 看是否要新增第二個數字 因為cacu_opr有運算子length不為0 剛存進去array 長度為1 \\r\\n    if ((cacu_opr.length!=0) \u0026\u0026 (cacu_num.length ===1)){ // 因為cacu_num.push後length=2 也就是說只會進去1次\\r\\n        cacu_num.push(\\\"\\\"); //[數字,\\\"\\\"]\\r\\n        document.querySelector(\\\".result\\\").innerText =\\\"\\\"; //變成空的\\r\\n    }\\r\\n    let result = document.querySelector(\\\".result\\\").innerText; //string\\r\\n    if( result.indexOf('.') != -1 ){ // 不等於-1代表有找到. 是小數直接加上數字\\r\\n        result += number;\\r\\n        document.querySelector(\\\".result\\\").innerText = result;\\r\\n    }else if ((result === '0') || (cacu_sp === '=')) { // cacu_sp = 是剛做完運算，因此按下數字要改變\\r\\n        result = number;\\r\\n        document.querySelector(\\\".result\\\").innerText = number;\\r\\n        cacu_sp =\\\"\\\"; //reset\\r\\n        document.querySelector(\\\".msg\\\").style.display = \\\"none\\\"\\r\\n    }else{ // 不是 0\\r\\n        result += number;\\r\\n        // 傳回去前如result 超過15個字即取前15個數字\\r\\n        if(result.length \u003e 10){\\r\\n            result = too_much_number(result);\\r\\n            document.querySelector(\\\".msg\\\").innerText = \\\"Too Much Number!!\\\";\\r\\n            document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\"\\r\\n        }\\r\\n        document.querySelector(\\\".result\\\").innerText = result;\\r\\n    }\\r\\n    return result;\\r\\n}\\r\\nfunction float_num(dot){\\r\\n    //先判斷是否為小數\\r\\n    let num = document.querySelector(\\\".result\\\").innerText;\\r\\n    if ( Number(num)%1 ===0 ){ //代表整數，可以加.\\r\\n        num = num + dot;\\r\\n        console.log(num);\\r\\n        document.querySelector(\\\".result\\\").innerText = num;\\r\\n    }else{ //已經為小數啦!\\r\\n        document.querySelector(\\\".msg\\\").innerText = \\\"Already Float!\\\";\\r\\n        document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\";\\r\\n    }\\r\\n}\\r\\nfunction save_number(){\\r\\n    let number = document.querySelector(\\\".result\\\").innerText\\r\\n    cacu_num.push(number) // 放進array\\r\\n}\\r\\nfunction reset(){ // 歸零膏\\r\\n    cacu_num = [] //數列重設\\r\\n    cacu_opr = \\\"\\\" //運算子重設\\r\\n    document.querySelector(\\\".result\\\").innerText = \\\"0\\\"; //變成\\\"0\\\"\\r\\n    document.querySelector(\\\".msg\\\").style.display = \\\"none\\\"\\r\\n}\\r\\nfunction compute(){\\r\\n    let number = document.querySelector(\\\".result\\\").innerText; // 把現在螢幕上的數字存起來\\r\\n    cacu_num[1] = number; //儲存進array\\r\\n    // cacu_num 兩數 \u0026 opr\\r\\n    if (cacu_opr === '+'){\\r\\n        add(cacu_num[0], cacu_num[1]); \\r\\n    }else if (cacu_opr === '─'){\\r\\n        minus(cacu_num[0], cacu_num[1]);\\r\\n    }else if (cacu_opr === 'X'){\\r\\n        multiply(cacu_num[0], cacu_num[1]);\\r\\n    }else if (cacu_opr === '/'){\\r\\n        divide(cacu_num[0], cacu_num[1]);\\r\\n    }else if (cacu_opr === 'MOD'){\\r\\n        mod(cacu_num[0], cacu_num[1]);\\r\\n    }\\r\\n    console.log(cacu_num); //看是不是只剩一數\\r\\n    cacu_opr=\\\"\\\";  //reset opr\\r\\n    cacu_num = [] //數列重設\\r\\n}\\r\\nfunction add (num1, num2){\\r\\n    let ans = 0;\\r\\n    ans = Number(num1) + Number(num2);\\r\\n    if(String(ans).length \u003e 10) ans = too_much_number(ans);\\r\\n    // ans 轉成字串 \\r\\n    document.querySelector(\\\".result\\\").innerText = ans.toString(); \\r\\n    document.querySelector(\\\".msg\\\").innerText = `${num1} + ${num2} = ${ans}`;\\r\\n    document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\";\\r\\n    return ans.toString()\\r\\n}\\r\\nfunction minus (num1, num2){\\r\\n    let ans = 0;\\r\\n    ans = Number(num1) - Number(num2);\\r\\n    if(String(ans).length \u003e 10) ans = too_much_number(ans);\\r\\n    document.querySelector(\\\".result\\\").innerText = ans.toString(); \\r\\n    document.querySelector(\\\".msg\\\").innerText = `${num1} ─ ${num2} = ${ans}`;\\r\\n    document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\";\\r\\n    return ans.toString()\\r\\n}\\r\\nfunction multiply (num1, num2){\\r\\n    let ans = 0;\\r\\n    ans = Number(num1) * Number(num2);\\r\\n    if(String(ans).length \u003e 10) ans = too_much_number(ans);\\r\\n    document.querySelector(\\\".result\\\").innerText = ans.toString(); \\r\\n    document.querySelector(\\\".msg\\\").innerText = `${num1} X ${num2} = ${ans}`;\\r\\n    document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\";\\r\\n    return ans.toString()\\r\\n}\\r\\nfunction divide (num1, num2){\\r\\n    let ans = 0;\\r\\n    ans = Number(num1) / Number(num2);\\r\\n    if(String(ans).length \u003e 10) ans = too_much_number(ans);\\r\\n    document.querySelector(\\\".result\\\").innerText = ans.toString(); \\r\\n    document.querySelector(\\\".msg\\\").innerText = `${num1} / ${num2} = ${ans}`;\\r\\n    document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\";\\r\\n    return ans.toString()\\r\\n}\\r\\nfunction mod (num1, num2){\\r\\n    let ans = 0;\\r\\n    ans = Number(num1) % Number(num2);\\r\\n    if(String(ans).length \u003e 10) ans = too_much_number(ans);\\r\\n    document.querySelector(\\\".result\\\").innerText = ans.toString(); \\r\\n    document.querySelector(\\\".msg\\\").innerText = `${num1} MOD ${num2} = ${ans}`;\\r\\n    document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\";\\r\\n    return ans.toString()\\r\\n}\\r\\nfunction del_display(){\\r\\n    let num = document.querySelector('.result').innerText;\\r\\n    // string 取長度-1字串\\r\\n    num = num.substring(0,num.length-1);\\r\\n    document.querySelector(\\\".result\\\").innerText = num;\\r\\n    document.querySelector(\\\".msg\\\").style.display = \\\"none\\\";\\r\\n}\\r\\n// 主程式\\r\\ndocument.querySelector(\\\".caculator\\\").addEventListener(\\\"click\\\",\\r\\n    function(e){\\r\\n        if (e.target.getAttribute(\\\"data-type\\\") === 'num'){\\r\\n            let number = e.target.innerText; // 拿到0~9\\r\\n            number = new_number(number);\\r\\n            if ((cacu_opr.length!=0)) { // msg顯示上一個數字與運算符號\\r\\n                document.querySelector('.msg').innerText = `${cacu_num[0]} ${cacu_opr} `\\r\\n                document.querySelector(\\\".msg\\\").style.display = \\\"inline-block\\\";\\r\\n            }\\r\\n            console.log(number);\\r\\n        }else if (e.target.getAttribute(\\\"data-type\\\") === 'opr') {\\r\\n            // 做運算前先把前面的數字結清\\r\\n            cacu_opr = e.target.innerText // 拿到運算子\\r\\n            save_number();\\r\\n            document.querySelector('.msg').innerText = cacu_opr; \\r\\n            document.querySelector('.msg').style.display = \\\"inline-block\\\"; // 顯示運算子\\r\\n            // 判斷運算子功能\\r\\n        }else if (e.target.getAttribute(\\\"data-type\\\") === 'sp' ){\\r\\n            cacu_sp = e.target.innerText // 拿到特殊運算子\\r\\n            if (cacu_sp === 'AC'){\\r\\n                reset();\\r\\n            }else if(cacu_sp === '='){\\r\\n                compute();\\r\\n            }else if(cacu_sp === 'DEL'){\\r\\n                del_display();\\r\\n            }\\r\\n        }else if (e.target.getAttribute(\\\"data-type\\\") === 'sp-num'){\\r\\n            let dot = e.target.innerText; // 拿到 .\\r\\n            float_num(dot);\\r\\n        }\\r\\n    }\\r\\n)\"}","created_at":"2020-07-31T16:01:40.294+08:00","updated_at":"2021-02-05T19:28:37.535+08:00","name":"計算機","language":"web","screenshot":{"url":"/uploads/project/screenshot/174169/3f06d33fd4079580fb8457d94c481a78.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[12205],"is_featured":false,"views":193,"hashid":"2pdsk8g8","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}