Heim > Web-Frontend > js-Tutorial > So erstellen Sie einen einfachen Taschenrechner mit HTML+CSS+JavaScript

So erstellen Sie einen einfachen Taschenrechner mit HTML+CSS+JavaScript

yulia
Freigeben: 2018-10-24 11:31:26
Original
12773 Leute haben es durchsucht

JavaScript ist ein wesentlicher Bestandteil der Frontend-Entwicklung, da die Realisierung von Seitenfunktionen nicht von JS getrennt werden kann. Können Sie als Frontend-Entwickler JavaScript verwenden, um einen einfachen Taschenrechner zu erstellen? In diesem Artikel erfahren Sie, wie Sie mit HTML, CSS und JavaScript einen einfachen Taschenrechner erstellen, der die Funktionen Addition, Subtraktion, Multiplikation und Division realisieren kann. Er hat einen bestimmten Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Das Erstellen eines einfachen Taschenrechners erfordert viele CSS-Attribute, HTML-Tags und JavaScript-Kenntnisse. Wenn Sie sich nicht sicher sind, können Sie die entsprechenden Artikel auf der chinesischen PHP-Website nachschlagen oder das JavaScript-Video-Tutorial besuchen , ich hoffe es hilft dir.

Instanzbeschreibung: Verwenden Sie HTML und CSS, um die Funktionen Addition, Subtraktion, Multiplikation und Division zu implementieren. Wenn Sie zum Löschen klicken, hat das Eingabefeld keinen Wert. =", das Berechnungsergebnis wird angezeigt. Der spezifische Code lautet wie folgt:


HTML-Teil:

<div class="center">
   <h1>计算器</h1>   
   <form name="calculator">
    <input type="button" id="clear" class="btn other" value="C">
    <input type="text" id="display">
     <br>
    <input type="button" class="btn number" value="7" onclick="get(this.value);">
    <input type="button" class="btn number" value="8" onclick="get(this.value);">
    <input type="button" class="btn number" value="9" onclick="get(this.value);">
    <input type="button" class="btn operator" value="+" onclick="get(this.value);">
     <br>
    <input type="button" class="btn number" value="4" onclick="get(this.value);">
    <input type="button" class="btn number" value="5" onclick="get(this.value);">
    <input type="button" class="btn number" value="6" onclick="get(this.value);">
    <input type="button" class="btn operator" value="*" onclick="get(this.value);">
     <br>
    <input type="button" class="btn number" value="1" onclick="get(this.value);">
    <input type="button" class="btn number" value="2" onclick="get(this.value);">
    <input type="button" class="btn number" value="3" onclick="get(this.value);">
    <input type="button" class="btn operator" value="-" onclick="get(this.value);">
     <br>
    <input type="button" class="btn number" value="0" onclick="get(this.value);">
    <input type="button" class="btn operator" value="." onclick="get(this.value);">
    <input type="button" class="btn operator" value="/" onclick="get(this.value);">   
    <input type="button" class="btn other" value="=" onclick="calculates();">
   </form>
  </div>
Nach dem Login kopieren

CSS-Teil:

* {
    border: none;
    font-family: &#39;Open Sans&#39;, sans-serif;
    margin: 0;
    padding: 0;
   }   
   .center {
    background-color: #fff;
    border-radius: 50%;
    height: 600px;
    margin: auto;
    width: 600px;
   }
   h1 {
    color: #495678;
    font-size: 30px; 
    margin-top: 20px;
    padding-top: 50px;
    display: block;
    text-align: center;
   }   
   form {
    background-color: #495678;
    margin: 40px auto;
    padding: 40px 0 30px 40px; 
    width: 280px;
   }
   .btn {
    outline: none;
    cursor: pointer;
    font-size: 20px;
    height: 45px;
    margin: 5px 0 5px 10px;
    width: 45px;
   }
   .btn:first-child {
    margin: 5px 0 5px 10px;
   }
   .btn, #display, form {
    border-radius: 25px;
   }
   #display {
    outline: none;
    background-color: #98d1dc;
    color: #dededc;
    font-size: 20px;
    height: 47px;
    text-align: right;
    width: 165px;
    padding-right: 10px;
    margin-left: 10px;
   }
   .number {
    background-color: #72778b;
    color: #dededc;
   }
   .number:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }
   .operator {
    background-color: #dededc;
    color: #72778b;
   }
   .operator:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }
   .other {
    background-color: #e3844c;
    color: #dededc;
   }
   .other:active {
      -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
      -moz-tranform: translateY(2px);
      transform: translateY(2px);
   }
Nach dem Login kopieren

JavaScript-Teil:

/* limpa o display */ 
  document.getElementById("clear").addEventListener("click", function() {
   document.getElementById("display").value = "";
  });
  /* recebe os valores */
  function get(value) {
   document.getElementById("display").value += value; 
  }   
  /* calcula */
  function calculates() {
   var result = 0;
   result = document.getElementById("display").value;
   document.getElementById("display").value = "";
   document.getElementById("display").value = eval(result);
  };
Nach dem Login kopieren

Der Effekt ist wie im Bild gezeigt:

So erstellen Sie einen einfachen Taschenrechner mit HTML+CSS+JavaScript

Der obige Code hat Ihnen den Code zum Erstellen eines einfachen Taschenrechners mit HTML, CSS und JavaScript zur Verfügung gestellt. Für Anfänger kann es schwierig sein, sich keine Sorgen zu machen. Ich glaube, dass dieser Artikel für Sie leicht zu verstehen ist.

【Empfohlene Tutorials】

1.

JavaScript-Referenzhandbuch für Chinesisch2.
CSS3-Tutorial3 Tutorial

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen einfachen Taschenrechner mit HTML+CSS+JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Vorheriger Artikel:So kapseln Sie Axios zweimal und implementieren mehrere Anforderungen und mehrere Abfangvorgänge basierend auf Parametern (Code) Nächster Artikel:Einführung in die sechs Attribute im
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage