网站首屏做多大网页制作软件手机版

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

HTML:

<div class="calculator"><div class="display-wrapper"><div class="display" id="display">0</div></div><div class="buttons"><button onclick="clearDisplay()">C</button><button onclick="deleteLast()">←</button><button onclick="appendOperator('(')">(</button><button onclick="appendOperator(')')">)</button><button onclick="appendNumber('7')">7</button><button onclick="appendNumber('8')">8</button><button onclick="appendNumber('9')">9</button><button onclick="appendOperator('/')">/</button><button onclick="appendNumber('4')">4</button><button onclick="appendNumber('5')">5</button><button onclick="appendNumber('6')">6</button><button onclick="appendOperator('*')">*</button><button onclick="appendNumber('1')">1</button><button onclick="appendNumber('2')">2</button><button onclick="appendNumber('3')">3</button><button onclick="appendOperator('-')">-</button><button onclick="appendNumber('0')" class="zero">0</button><button onclick="appendDot()">.</button><button onclick="appendOperator('+')">+</button><button onclick="calculate()">=</button></div><div class="buttons scientific"><button onclick="calculateFunction('sin')">sin</button><button onclick="calculateFunction('cos')">cos</button><button onclick="calculateFunction('tan')">tan</button><button onclick="calculateFunction('log')">log</button><button onclick="calculateFunction('sqrt')">√</button><button onclick="calculateFunction('pow2')">x²</button><button onclick="calculateFunction('pow3')">x³</button><button onclick="calculateFunction('exp')">eˣ</button><button onclick="calculateFunction('ln')">ln</button><button onclick="calculateFunction('fact')">n!</button><button onclick="calculateFunction('reciprocal')">1/x</button><button onclick="calculateFunction('pi')">π</button></div>
</div>

JS:

let displayValue = '0';function updateDisplay() {document.getElementById('display').textContent = displayValue;
}function clearDisplay() {displayValue = '0';updateDisplay();
}function deleteLast() {if (displayValue.length > 1) {displayValue = displayValue.slice(0, -1);} else {displayValue = '0';}updateDisplay();
}function appendNumber(number) {if (displayValue === '0') {displayValue = number;} else {displayValue += number;}updateDisplay();
}function appendOperator(operator) {displayValue += operator;updateDisplay();
}function appendDot() {if (!displayValue.includes('.')) {displayValue += '.';}updateDisplay();
}function calculate() {try {displayValue = eval(displayValue).toString();} catch (error) {displayValue = 'Error';}updateDisplay();
}function calculateFunction(func) {try {let value = parseFloat(displayValue);switch (func) {case 'sin':displayValue = Math.sin(value).toString();break;case 'cos':displayValue = Math.cos(value).toString();break;case 'tan':displayValue = Math.tan(value).toString();break;case 'log':displayValue = Math.log10(value).toString();break;case 'sqrt':displayValue = Math.sqrt(value).toString();break;case 'pow2':displayValue = Math.pow(value, 2).toString();break;case 'pow3':displayValue = Math.pow(value, 3).toString();break;case 'exp':displayValue = Math.exp(value).toString();break;case 'ln':displayValue = Math.log(value).toString();break;case 'fact':displayValue = factorial(value).toString();break;case 'reciprocal':displayValue = (1 / value).toString();break;case 'pi':displayValue = Math.PI.toString();break;}} catch (error) {displayValue = 'Error';}updateDisplay();
}function factorial(n) {if (n === 0 || n === 1) return 1;return n * factorial(n - 1);
}

CSS:

body {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;margin: 0;background-color: #f4f4f9;
}.calculator {width: 350px;background-color: #333;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}.display-wrapper {background-color: #444;padding: 20px;border-radius: 10px 10px 0 0;overflow-x: auto;overflow-y: hidden;
}.display {color: white;font-size: 36px;text-align: right;white-space: nowrap;min-width: 100%;
}.buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1px;
}button {font-size: 18px;padding: 20px;background-color: #555;border: none;color: white;cursor: pointer;
}button:hover {background-color: #666;
}.zero {grid-column: span 1;
}.scientific {grid-template-columns: repeat(4, 1fr);margin-top: 5px;
}.guide {margin-top: 20px;max-width: 350px;color: #666;font-size: 14px;
}

 线上运行，可以直接打开：科学计算器