我做了一个计算器,但我不知道如何显示计算器是如何做的

时间:2019-09-19 23:46:56

标签: javascript html

我制作了一个可以工作的计算器,它不是最漂亮的,但是它可以工作,并且对我来说已经足够了,因为我几乎是编码的初学者。

我最后缺少的是一个小文本框,显示了计算过程。例如“ 3 + 4 = 7”。

我非常感谢我能获得的所有帮助。如果您需要文件中的任何其他代码或其他任何内容,请告诉我。

    function calc() {
        
      var n1 = parseFloat(document.getElementById("n1").value);
      var n2 = parseFloat(document.getElementById("n2").value);
      var oper = document.getElementById("operators").value;

      if(oper === "+")
      {
        document.getElementById("result").value = n1+n2;
      }
      if(oper === "-")
      {
        document.getElementById("result").value = n1-n2;
      }
      if(oper === "/")
      {
        document.getElementById("result").value = n1/n2;
      }
      if(oper === "*")
      {
        document.getElementById("result").value = n1*n2;
      }
    }
	
	
        <input type="number" id="n1"/>
        <input type="number" id="n2"/>
        
        <select id="operators">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="/">/</option>
          <option value="*">*</option>
        </select>
        
        <button onclick="calc();">sum</button>
        <input type="text" id="result">

2 个答案:

答案 0 :(得分:1)

应该可以让您在JavaScript世界中进行更多探索

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()

        let mapView = MGLMapView(frame: view.bounds, styleURL: MGLStyle.lightStyleURL)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.tintColor = .darkGray

        // Set the map's bounds to Pisa, Italy.
        let bounds = MGLCoordinateBounds(
            sw: CLLocationCoordinate2D(latitude: 43.7115, longitude: 10.3725),
            ne: CLLocationCoordinate2D(latitude: 43.7318, longitude: 10.4222))
        mapView.setVisibleCoordinateBounds(bounds, animated: false)

        view.addSubview(mapView)

        // Set the map view‘s delegate property.
        mapView.delegate = self

        // Initialize and add the point annotation.
        let pisa = MGLPointAnnotation()
        pisa.coordinate = CLLocationCoordinate2D(latitude: 43.72305, longitude: 10.396633)
        pisa.title = "Leaning Tower of Pisa"
        mapView.addAnnotation(pisa)
    }

    func mapView(_ mapView: MGLMapView, imageFor annotation: MGLAnnotation) -> MGLAnnotationImage? {
        // Try to reuse the existing ‘pisa’ annotation image, if it exists.
        var annotationImage = mapView.dequeueReusableAnnotationImage(withIdentifier: "pisa")

        if annotationImage == nil {
            // Leaning Tower of Pisa by Stefan Spieler from the Noun Project.
            var image = UIImage(named: "pisavector")!

            // The anchor point of an annotation is currently always the center. To
            // shift the anchor point to the bottom of the annotation, the image
            // asset includes transparent bottom padding equal to the original image
            // height.
            //
            // To make this padding non-interactive, we create another image object
            // with a custom alignment rect that excludes the padding.
            image = image.withAlignmentRectInsets(UIEdgeInsets(top: 0, left: 0, bottom: image.size.height/2, right: 0))

            // Initialize the ‘pisa’ annotation image with the UIImage we just loaded.
            annotationImage = MGLAnnotationImage(image: image, reuseIdentifier: "pisa")
        }

        return annotationImage
    }

    func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
        // Always allow callouts to popup when annotations are tapped.
        return true
    }
}
const in_N1     = document.getElementById('n1')
    , in_N2     = document.getElementById('n2')
    , Operator  = document.getElementById("operators")
    , btCalc    = document.getElementById('bt-Calc')
    , txtResult = document.getElementById('result')


btCalc.onclick=()=>
{
  let Result = 0
  switch (Operator.value) {
  case '+':
  Result = in_N1.valueAsNumber + in_N2.valueAsNumber
  break;
  case '-':
  Result = in_N1.valueAsNumber - in_N2.valueAsNumber
  break;
  case '/':
  Result = in_N1.valueAsNumber / in_N2.valueAsNumber
  break;
  case '*':
  Result = in_N1.valueAsNumber * in_N2.valueAsNumber
  break;
  }
  txtResult.appendChild( document.createTextNode(` ${in_N1.value}  ${Operator.value}  ${in_N2.value} = ${Result} \n`) )
}

答案 1 :(得分:0)

您可以这样做

 function calc() {
    
      var n1 = parseFloat(document.getElementById("n1").value);
      var n2 = parseFloat(document.getElementById("n2").value);
      var oper = document.getElementById("operators").value;
    
      if(oper === "+")
      {
        document.getElementById("result").value = n1+n2;
      }
      else if(oper === "-")
      {
        document.getElementById("result").value = n1-n2;
      }
      else if(oper === "/")
      {
        document.getElementById("result").value = n1/n2;
      }
      else if(oper === "*")
      {
        document.getElementById("result").value = n1*n2;
      }
      document.getElementById("operation").value = n1 + oper + n2 + "=" + document.getElementById("result").value;
    }
  <input type="number" id="n1"/>
      <input type="number" id="n2"/>
    
      <select id="operators">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="/">/</option>
        <option value="*">*</option>
      </select>
    
      <button onclick="calc();">sum</button>
      <input type="text" id="result">
      <input type="text" id="operation">