泰安软件公司_网页设计案例100例_百度打车客服电话_营销的手段和方法

       作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。

HTML:

<div class="calculator"><div class="input-group"><label for="termA">输入a:</label> <input id="termA" type="text" placeholder="输入 a 的值"></div><div class="input-group"><label for="termB">输入b:</label> <input id="termB" type="text" placeholder="输入 b 的值"></div><div class="input-group"><label for="operation">选择操作:</label><select id="operation"><option value="plus">(a + b)²</option><option value="minus">(a - b)²</option></select></div><div class="operations"><button onclick="calculatePerfectSquare()">计算</button></div><div class="result"><p>计算结果:</p><p id="calculation-output">结果: -</p></div></div>

JS:

function calculatePerfectSquare() {const a = parseFloat(document.getElementById('termA').value);const b = parseFloat(document.getElementById('termB').value);const operation = document.getElementById('operation').value;const resultElement = document.getElementById('calculation-output');if (isNaN(a) || isNaN(b)) {resultElement.textContent = '无效输入，请输入有效的数字。';return;}let result;if (operation === 'plus') {result = `(${a} + ${b})² = ${a}² + 2(${a})(${b}) + ${b}² = ${Math.pow(a, 2)} + ${2 * a * b} + ${Math.pow(b, 2)}`;} else {result = `(${a} - ${b})² = ${a}² - 2(${a})(${b}) + ${b}² = ${Math.pow(a, 2)} - ${2 * a * b} + ${Math.pow(b, 2)}`;}resultElement.textContent = `结果: ${result}`;
}

CSS:

.calculator {
width: 100%;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;display: block;margin: 0px;margin-bottom: 20px;margin-left: 0px!important;
}button:hover {background-color: orange;
}.result {margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}

线上运行，可以直接打开：完美平方三项式计算器