Question

我自学习如何使用HTML / CSS / JavaScript进行编码。我使用Nitrous.io作为我的IDE并使用Meteor。我试图跟随并使用计算器教程但是我已经决定最好只是尝试自己制作一个简单的计算器。我不确定如何使按钮相互通信，因此当用户按下“按钮”时，＆＃39; +＆＃39; ＆＃39; 1＆＃39;，它出现在＆＃39; 2＆＃39;。我会把我的代码放在下面，如果有人可以向我解释，我将非常感激。非常感谢:)。

现在我在网页上显示了按钮，但我无法让他们互相沟通。

calculator.html

<template name="calculator">

    <div class="row">
    <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
      <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button1" class="btn {{button1class}} buttonKeypad">1 </button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button2" class="btn {{button2class}} buttonKeypad">2</button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button3" class="btn {{button3class}} buttonKeypad">3</button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="buttonPlus" class="btn btn-warning buttonKeypad">+</button>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button4" class="btn {{button4class}} buttonKeypad">4</button>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
          <button id="button5" class="btn {{button5class}}

等等，直到buttonKeypad 9。

calculator.js

if (Meteor.isClient) {

  Session.set("string", "");

  Session.set("button1class", "btn-default");
  Session.set("button2class", "btn-default");
  Session.set("button3class", "btn-default");
  Session.set("button4class", "btn-default");
  Session.set("button5class", "btn-default");
  Session.set("button6class", "btn-default");
  Session.set("button7class", "btn-default");
  Session.set("button8class", "btn-default");
  Session.set("button9class", "btn-default");
  Session.set("submitclass", "btn-warning");

Template.calculator.helpers( {
   "string" : function () { return Session.get("string")},
"button1class" : function () { return Session.get("button1class")},
"button2class" : function () { return Session.get("button2class")},
"button3class" : function () { return Session.get("button3class")},
"button4class" : function () { return Session.get("button4class")},
"button5class" : function () { return Session.get("button5class")},
"button6class" : function () { return Session.get("button6class")},
"button7class" : function () { return Session.get("button7class")},
"button8class" : function () { return Session.get("button8class")},
"button9class" : function () { return Session.get("button9class")},
});


Template.calculator.events( {
    "click button": function() {
      Session.set("button1class", "btn-default");
      Session.set("button2class", "btn-default");
      Session.set("button3class", "btn-default");
      Session.set("button4class", "btn-default");
      Session.set("button5class", "btn-default");
      Session.set("button6class", "btn-default");
      Session.set("button7class", "btn-default");
      Session.set("button8class", "btn-default");
      Session.set("button9class", "btn-default");
    },
    });


Template.calculator.events( {
  "click #button1" : function() {
  Session.set("button1class", "btn-primary");
  Session.set("string", Session.get("string")+"1");
  },
  "click #button2" : function() {
  Session.set("button2class", "btn-primary");
  Session.set("string", Session.get("string")+"2");
  },
  "click #button3" : function() {
  Session.set("button3class", "btn-primary");
  Session.set("string", Session.get("string")+"3");
  },
  "click #button4" : function() {
  Session.set("button4class", "btn-primary");
  Session.set("string", Session.get("string")+"4");
  },
  "click #button5" : function() {
  Session.set("button5class", "btn-primary");
  Session.set("string", Session.get("string")+"5");
  },
  "click #button6" : function() {
  Session.set("button6class", "btn-primary");
  Session.set("string", Session.get("string")+"6");
  },
  "click #button7" : function() {
  Session.set("button7class", "btn-primary");
  Session.set("string", Session.get("string")+"7");
  },
  "click #button8" : function() {
  Session.set("button8class", "btn-primary");
  Session.set("string", Session.get("string")+"8");
  },
  "click #button9" : function() {
  Session.set("button9class", "btn-primary");
  Session.set("string", Session.get("string")+"9");
  },

  });

Answer 1

首先，您的代码比它需要的复杂得多。您不需要所有这些会话变量来设置计算器按钮的样式，您可以只使用css类。（鼠标悬停为public class Node<T> { T data; Node<T> next; public Node(T data){ this.data = data; } }，点击按钮为:hover。

如果你的计算器没有括号，那么生活很简单。当用户输入一系列数字时，将它们放入缓冲区并在屏幕上显示。一旦用户触摸操作数（:active），然后将缓冲区（例如，一个会话变量）与操作数一起保存。允许用户输入更多数字。当他们点击+-*/或新操作数时，评估待处理操作。显示结果。

在流星中制作计算器

1 个答案: