使用Jquery的简单HTML计算器

xxe27gdn 于 2023-05-28 发布在 jQuery

关注(0)|答案(2)|浏览(146)

我需要有一个简单的计算器，你只是改变一个数字，它乘以价值，但一个数字
也就是说，如果您将数字从1切换到3，则会发生以下情况。值可以是文本框，其他值可以是标签

number to buy   1   
    $175.00 YR 1
    $187.50 YR 2
    $212.50 YR 3
    $225.00 YR 4
    $237.50 YR 5


number to buy   3   
    $525.00 YR 1
    $562.50 YR 2
    $637.50 YR 3
    $675.00 YR 4
    $712.50 YR 5

jquery

来源：https://stackoverflow.com/questions/3305474/simple-html-calculator-using-jquery

2条答案

按热度按时间

2wnc66cl1#

http://jsfiddle.net/gL2kY/我在这里做了一些代码....
干杯！
(be一个小时后回来，我需要休息一下。

jQuery

$('p span').each(function(){
    $(this).data('factor',$(this).text());
});
$('#factor').keyup(function(){
    var factor = this.value;
    $('p span').each(function(){
        $(this).text(function(){
            return $(this).data('factor') * factor;
        });
    });
});

html

<span>number to buy</span>
<input type="text" value="1" id="factor" />   
<p>    $<span>175.00</span> YR 1 </p>
<p>    $<span>187.50</span> YR 2</p>
<p>    $<span>212.50</span> YR 3</p>
<p>    $<span>225.00</span> YR 4</p>
<p>    $<span>237.50</span> YR 5</p>

赞(0）回复(0）举报 2023-05-28

kuhbmx9i2#

<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator using HTML</title>
<style>
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.calculator {
  width: 300px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 10px;
}

.calculator-header {
  text-align: center;
  margin-bottom: 20px;
}

.calculator-title {
  font-size: 24px;
  color: #555;
}

.calculator-display {
  background-color: #eee;
  padding: 10px;
  border-radius: 5px;
  text-align: right;
  margin-bottom: 10px;
  font-size: 20px;
  color: #333;
}

.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.calculator-button {
  background-color: #f1f1f1;
  border: none;
  border-radius: 5px;
  padding: 15px;
  font-size: 18px;
  color: #555;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.calculator-button:hover {
  background-color: #ccc;
}

.calculator-button.operation {
  background-color: #ffcc00;
  color: #fff;
}

.calculator-button.operation:hover {
  background-color: #ffaa00;
}
</style>
</head>
<body>
<div class="calculator">
<div class="calculator-header">
  <h2 class="calculator-title">Calculator By Yashwanth</h2>
</div>

<div class="calculator-display">
  <input type="text" id="result" readonly>
</div>

<div class="calculator-buttons">
  <button class="calculator-button" onclick="appendValue('7')">7</button>
  <button class="calculator-button" onclick="appendValue('8')">8</button>
  <button class="calculator-button" onclick="appendValue('9')">9</button>
  <button class="calculator-button operation" onclick="performOperation('+')">+</button>
  <button class="calculator-button" onclick="appendValue('4')">4</button>
  <button class="calculator-button" onclick="appendValue('5')">5</button>
  <button class="calculator-button" onclick="appendValue('6')">6</button>
  <button class="calculator-button operation" onclick="performOperation('-')">-</button>
  <button class="calculator-button" onclick="appendValue('1')">1</button>
  <button class="calculator-button" onclick="appendValue('2')">2</button>
  <button class="calculator-button" onclick="appendValue('3')">3</button>
  <button class="calculator-button operation" onclick="performOperation('*')">*</button>
  <button class="calculator-button" onclick="appendValue('0')">0</button>
  <button class="calculator-button" onclick="appendValue('.')">.</button>
  <button class="calculator-button operation" onclick="performOperation('/')">/</button>
  <button class="calculator-button" onclick="clearDisplay()">C</button>
  <button class="calculator-button operation" onclick="calculate()">=</button>
</div>
</div>

<script>
function appendValue(value) {
  var resultField = document.getElementById('result');
  resultField.value += value;
}

function clearDisplay() {
  var resultField = document.getElementById('result');
  resultField.value = '';
}

function performOperation(operator) {
  var resultField = document.getElementById('result');
  resultField.value += operator;
}

function calculate() {
  var resultField = document.getElementById('result');
  var expression = resultField.value;
  var result = eval(expression);
  resultField.value = result;
}
</script>
</body>
</html>

赞(0）回复(0）举报 2023-05-28

我来回答

使用Jquery的简单HTML计算器

2条答案

jQuery

html

相关问题

热门标签

最新问答