Add new file

274cb6dd · YAN CHENGLONG · 274cb6dd
Commit 274cb6dd authored 4 years ago by YAN CHENGLONG
--- a/HW210311_YAN CHENGLONG.html
+++ b/HW210311_YAN CHENGLONG.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>자바스크립트 계산기</title>
+    <meta charset="UTF-8">
+
+    <style>
+     p, input { font-family: monospace; }
+     p { white-space: pre; }
+
+
+    body{
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #0e92b3;
+      color: white;
+    }
+    #myCalc {
+      margin-top: 5%;
+      border: white solid 3px;
+      width: 500px;
+      border-radius: 10px;
+    }
+
+    .header{
+      text-align: center;
+      font-size: 35px;
+      text-transform: uppercase;
+      line-height: 100px;
+    }
+
+    input {
+      width: 60%;
+      height: 50px;
+      margin-bottom: 20px;
+      border-radius: 5px;
+      display: flex;
+      border: white solid 2px;
+      margin-left: 18%;
+      text-align: center;
+      font-size: 20px;
+      font-weight: bolder;
+    } 
+    #result {
+      text-align: center;
+      font-size: 30px;
+      font-weight: bolder;
+    }
+    hr {
+      background-color: white;
+    }
+    </style>
+
+  </head>
+  <body>
+
+
+    <div id="myCalc">
+      <div class="header" style="text-align: center;">
+        Calculate
+      </div>
+      <p><input class="calc-x-input" value="5"></p>
+
+      <p><input class="calc-symble-input" value="+"></p> <!--添加符号-->
+
+      <p><input class="calc-y-input" value="0"></p>
+      <p></p>
+      <div id="result">
+        <hr>
+        <p>= <span class="calc-result"></span></p>
+      </div>
+    </div>
+
+
+    <script type="text/javascript">
+     (function(){
+
+       function Calc(xInput, yInput, symbleInput, output) {
+         this.xInput = xInput;
+         this.yInput = yInput;
+         //在对象中添加symbleInput属性
+         this.symbleInput = symbleInput;
+         this.output = output;
+       }
+
+       Calc.xName = 'xInput';
+       Calc.yName = 'yInput';
+       Calc.symbleName = 'symbleInput';
+
+
+       Calc.prototype = {
+         render: function (result) {
+           this.output.innerText = String(result);
+         }
+       };
+
+       function CalcValue(calc, x, y, symble) {
+         this.calc = calc;
+         this.x = x;
+         this.y = y;
+         //根据符号判断运算
+         //this.result = x + y;
+         this.symble = symble;
+         console.log("cal函数内:" + this.symble);
+         if(this.symble == '-'){
+            this.result = x - y;
+         }else if(this.symble == '+'){
+            this.result = x + y;
+         }else if(this.symble == '*'){
+            this.result = x * y;
+         }else if(this.symble == '/'){
+            this.result = x / y;
+         }else{
+           this.result = "symble wrong";
+         }
+       }
+
+       CalcValue.prototype = {
+        //判断
+         copyWith: function(name, value) {
+
+           var number = parseFloat(value);
+
+           if (isNaN(number) || !isFinite(number))
+             return this;
+
+           if (name === Calc.xName)
+             return new CalcValue(this.calc, number, this.y, this.symble);
+
+           if (name === Calc.yName)
+             return new CalcValue(this.calc, this.x, number, this.symble);
+
+           return this;
+         },
+         render: function() {
+           this.calc.render(this.result);
+         },
+         //添加函数，判断新输入的符号
+         symble_copyWith: function(name, value) {          
+           if (name === Calc.symbleName)
+             return new CalcValue(this.calc, this.x, this.y, value)
+
+           return this;
+         }
+       };
+
+       function initCalc(elem) {
+
+         var calc =
+           new Calc(
+             elem.querySelector('input.calc-x-input'),
+             elem.querySelector('input.calc-y-input'),
+             //添加参数
+             elem.querySelector('input.calc-symble-input'),
+             elem.querySelector('span.calc-result')
+           );
+           
+         var lastValues =
+           new CalcValue(
+             calc,
+             parseFloat(calc.xInput.value),
+             parseFloat(calc.yInput.value),
+             //添加参数
+             calc.symbleInput.value 
+           );
+
+         var handleCalcEvent =
+           function handleCalcEvent(e) {
+             var newValues = lastValues,
+                 elem = e.target;
+
+             switch(elem) {
+               case calc.xInput:
+                 newValues =
+                   lastValues.copyWith(
+                     Calc.xName,
+                     elem.value,
+
+                   );
+                 break;
+               case calc.yInput:
+                 newValues =
+                   lastValues.copyWith(
+                     Calc.yName,
+                     elem.value
+                   );
+                 break;
+               case calc.symbleInput:
+                 newValues =
+                   lastValues.symble_copyWith(
+                     Calc.symbleName,
+                     elem.value
+                   );
+                 break;
+             }
+
+             if(newValues !== lastValues){
+               lastValues = newValues;
+               lastValues.render();
+             }
+           };
+
+         elem.addEventListener('keyup', handleCalcEvent, false);
+
+         return lastValues;
+       }
+
+       window.addEventListener(
+         'load',
+         function() {
+           var cv = initCalc(document.getElementById('myCalc'));
+           cv.render();
+         },
+         false
+       );
+     }());
+    </script>
+  </body>
+</html>
\ No newline at end of file