jquery仿windows计算器(jquery仿windows计算器)

jquery仿windows计算器(jquery仿windows计算器)
jquery计算器 计算器特效 jquery小程序 jquery特效 jquery下载

以下是一个使用jQuery实现的仿Windows计算器的代码示例：

HTML代码：

<div id="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <div class="row">
      <button class="number">7</button>
      <button class="number">8</button>
      <button class="number">9</button>
      <button class="operator">/</button>
    </div>
    <div class="row">
      <button class="number">4</button>
      <button class="number">5</button>
      <button class="number">6</button>
      <button class="operator"></button>
    </div>
    <div class="row">
      <button class="number">1</button>
      <button class="number">2</button>
      <button class="number">3</button>
      <button class="operator">-</button>
    </div>
    <div class="row">
      <button class="clear">C</button>
      <button class="number">0</button>
      <button class="operator">=</button>
      <button class="operator">+</button>
    </div>
  </div></div>

CSS代码：

#calculator {  width: 200px;  margin: 0 auto;  padding: 20px;  background-color: #f2f2f2;  border: 1px solid #ccc;  border-radius: 5px;
}#display {  width: 100%;  margin-bottom: 10px;  padding: 5px;
}.buttons {  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-gap: 5px;
}.row {  display: flex;  justify-content: space-between;
}button {  width: 100%;  padding: 10px;  background-color: #fff;  border: 1px solid #ccc;  border-radius: 5px;  cursor: pointer;
}button:hover {  background-color: #e6e6e6;
}

jQuery代码：

$(document).ready(function() {  var display = $('#display');  var buttons = $('.number, .operator');
  
  buttons.on('click', function() {    var value = $(this).text();    
    if (value === '=') {      try {
        display.val(eval(display.val()));
      } catch (error) {
        display.val('Error');
      }
    } else if (value === 'C') {
      display.val('');
    } else {
      display.val(display.val() + value);
    }
  });
});

这段代码实现了一个简单的仿Windows计算器。用户可以点击数字按钮、运算符按钮进行计算，并在显示屏上显示结果。用户可以通过按下"C"按钮清除显示屏上的内容。

如果您还有其他问题，请告诉我

jquery仿windows计算器，jQuery+CSS3仿IOS无线局域网Wifi，jQuery+CSS3仿iPhone4S Siri UI，jQuery水平菜单提示效果，