اسنیپت‌های JS برای ساخت ماشین‌حساب‌های کاستوم و اختصاصی

🎯 راهنمای جامع: ساخت ماشین‌حساب‌های JS در یک نگاه! 🎯

برای تهیه ابزارهای کاربردی و کدهای آماده، حتماً یه سر به فروشگاه ابزارهای ما بزن!

کد HTML (برای کپی، روی کد کلیک کن)

<div class="calculator-container">
    <h2>ماشین‌حساب ساده</h2>
    <div class="input-group">
        <label for="num1">عدد اول:</label>
        <input type="number" id="num1" value="0">
    </div>
    <div class="input-group">
        <label for="num2">عدد دوم:</label>
        <input type="number" id="num2" value="0">
    </div>
    <button id="calculateBtn">جمع کن</button>
    <p>نتیجه: <span id="result" style="font-weight: bold;">0</span></p>
</div>

کد CSS (برای کپی، روی کد کلیک کن)

.calculator-container {
    font-family: 'Arial', sans-serif;
    max-width: 350px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background-image: linear-gradient(to right top, #d1eaff, #e2f4ff);
    color: #333;
    text-align: center;
    border: 1px solid #a7d9ec;
}

.calculator-container h2 {
    color: #007bb6;
    margin-bottom: 25px;
    font-size: 26px;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
    font-size: 15px;
}

.input-group input[type="number"] {
    width: calc(100% - 20px);
    padding: 12px 10px;
    border: 1px solid #add8e6;
    border-radius: 8px;
    font-size: 16px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: border-color 0.3s ease;
}

.input-group input[type="number"]:focus {
    border-color: #007bb6;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 190, 0.4);
}

button {
    background-color: #007bb6;
    color: white;
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 15px;
    width: 100%;
    font-weight: bold;
}

button:hover {
    background-color: #005f90;
    transform: translateY(-2px);
}

p {
    margin-top: 25px;
    font-size: 18px;
    color: #444;
}

p span {
    color: #E74C3C;
    font-size: 20px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .calculator-container {
        margin: 20px auto;
        padding: 20px;
        border-radius: 10px;
    }
    .calculator-container h2 {
        font-size: 22px;
    }
    button {
        padding: 12px 20px;
        font-size: 16px;
    }
    p {
        font-size: 16px;
    }
    p span {
        font-size: 18px;
    }
}

کد JavaScript (برای کپی، روی کد کلیک کن)

document.addEventListener('DOMContentLoaded', () => {
    const num1Input = document.getElementById('num1');
    const num2Input = document.getElementById('num2');
    const calculateButton = document.getElementById('calculateBtn');
    const resultSpan = document.getElementById('result');

    const calculateSum = () => {
        const num1 = parseFloat(num1Input.value || 0);
        const num2 = parseFloat(num2Input.value || 0);

        // اعتبارسنجی ساده برای اطمینان از اینکه ورودی‌ها عدد هستند
        if (isNaN(num1) || isNaN(num2)) {
            resultSpan.textContent = 'ورودی نامعتبر!';
            resultSpan.style.color = '#E74C3C'; // رنگ خطا
            return;
        }

        const sum = num1 + num2;
        resultSpan.textContent = sum.toFixed(2); // نمایش با دو رقم اعشار برای دقت
        resultSpan.style.color = '#2ECC71'; // رنگ موفقیت
    };

    calculateButton.addEventListener('click', calculateSum);

    // افزودن رویداد برای آپدیت لحظه‌ای نتیجه با تغییر ورودی‌ها
    num1Input.addEventListener('input', calculateSum);
    num2Input.addEventListener('input', calculateSum);

    // فراخوانی اولیه برای نمایش مقدار پیش‌فرض
    calculateSum();
});

کد JavaScript برای محاسبه وام (برای کپی، روی کد کلیک کن)

function calculateLoanPayment(principal, annualInterestRate, loanTermMonths) {
    if (principal <= 0 || annualInterestRate < 0 || loanTermMonths <= 0) {
        return "ورودی‌های نامعتبر";
    }

    const monthlyInterestRate = (annualInterestRate / 100) / 12; // تبدیل سالانه به ماهانه و درصد
    
    if (monthlyInterestRate === 0) { // اگر بهره صفر باشد
        return principal / loanTermMonths;
    }

    const numerator = principal * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, loanTermMonths);
    const denominator = Math.pow(1 + monthlyInterestRate, loanTermMonths) - 1;

    return (numerator / denominator).toFixed(2); // دو رقم اعشار
}

// مثال استفاده:
// فرض کنید اصل وام 100,000 تومان، نرخ بهره سالانه 5% و مدت بازپرداخت 24 ماه است.
// const monthlyPayment = calculateLoanPayment(100000, 5, 24);
// console.log(`قسط ماهانه: ${monthlyPayment} تومان`);

کد JavaScript برای تبدیل واحد (دما) (برای کپی، روی کد کلیک کن)

function convertTemperature(value, fromUnit, toUnit) {
    value = parseFloat(value);
    if (isNaN(value)) return "ورودی نامعتبر";

    let result;

    if (fromUnit === 'celsius' && toUnit === 'fahrenheit') {
        result = (value * 9/5) + 32;
    } else if (fromUnit === 'fahrenheit' && toUnit === 'celsius') {
        result = (value - 32) * 5/9;
    } else if (fromUnit === 'celsius' && toUnit === 'kelvin') {
        result = value + 273.15;
    } else if (fromUnit === 'kelvin' && toUnit === 'celsius') {
        result = value - 273.15;
    } else if (fromUnit === 'fahrenheit' && toUnit === 'kelvin') {
        result = (value - 32) * 5/9 + 273.15;
    } else if (fromUnit === 'kelvin' && toUnit === 'fahrenheit') {
        result = (value - 273.15) * 9/5 + 32;
    } else if (fromUnit === toUnit) {
        result = value; // اگر واحدها یکسان باشند
    } else {
        return "واحد تبدیل نامشخص";
    }

    return result.toFixed(2);
}

// مثال استفاده:
// const fahrenheit = convertTemperature(25, 'celsius', 'fahrenheit'); // 77.00
// const celsius = convertTemperature(77, 'fahrenheit', 'celsius');   // 25.00
// console.log(`25 سلسیوس به فارنهایت: ${fahrenheit}`);
// console.log(`77 فارنهایت به سلسیوس: ${celsius}`);

کد JavaScript برای محاسبه قیمت محصول (برای کپی، روی کد کلیک کن)

function calculateProductPrice(basePrice, discountPercent, taxPercent, shippingCost) {
    basePrice = parseFloat(basePrice) || 0;
    discountPercent = parseFloat(discountPercent) || 0;
    taxPercent = parseFloat(taxPercent) || 0;
    shippingCost = parseFloat(shippingCost) || 0;

    if (basePrice < 0 || discountPercent < 0 || taxPercent < 0 || shippingCost < 0) {
        return "ورودی‌های قیمت باید مثبت باشند.";
    }

    const priceAfterDiscount = basePrice * (1 - discountPercent / 100);
    const priceAfterTax = priceAfterDiscount * (1 + taxPercent / 100);
    const finalPrice = priceAfterTax + shippingCost;

    return finalPrice.toFixed(2);
}

// مثال استفاده:
// const finalProductPrice = calculateProductPrice(200, 10, 9, 15); // قیمت پایه 200، 10% تخفیف، 9% مالیات، 15 هزینه ارسال
// console.log(`قیمت نهایی محصول: ${finalProductPrice}`);

کد JavaScript برای اعتبارسنجی ورودی (برای کپی، روی کد کلیک کن)

function validateNumberInput(inputElement, errorMessageElement) {
    const value = inputElement.value;
    if (value === '' || isNaN(parseFloat(value))) {
        errorMessageElement.textContent = 'لطفاً یک عدد معتبر وارد کنید.';
        inputElement.style.borderColor = '#E74C3C';
        return false;
    } else {
        errorMessageElement.textContent = '';
        inputElement.style.borderColor = '#add8e6';
        return true;
    }
}

// برای استفاده:
// <input type="text" id="myNumberInput">
// <p id="myNumberInputError" style="color: red;"></p>

// const input = document.getElementById('myNumberInput');
// const errorMsg = document.getElementById('myNumberInputError');
// input.addEventListener('input', () => validateNumberInput(input, errorMsg));

مثال Regex برای شماره موبایل ایرانی (برای کپی، روی کد کلیک کن)

function validateIranianMobile(phoneNumber) {
    const regex = /^(09)(d{9})$/; // شروع با 09 و 9 رقم بعد از آن
    return regex.test(phoneNumber);
}

// مثال استفاده:
// console.log(validateIranianMobile('09123456789')); // true
// console.log(validateIranianMobile('9123456789'));  // false
// console.log(validateIranianMobile('0912345678'));   // false (یک رقم کم)

تابع Debounce (برای کپی، روی کد کلیک کن)

function debounce(func, delay) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), delay);
    };
}

// مثال استفاده:
// const myCalculation = () => {
//     console.log('Calculation performed!');
//     // اینجا منطق محاسبه پیچیده شما قرار می‌گیرد
// };
// const debouncedCalculation = debounce(myCalculation, 300);
// document.getElementById('num1').addEventListener('input', debouncedCalculation);

❓ چرا باید از جاوااسکریپت برای ماشین‌حساب استفاده کنم؟

جاوااسکریپت بهت امکان می‌ده ماشین‌حساب‌های تعاملی و پویا بسازی که محاسبات رو در سمت کاربر و بدون نیاز به سرور انجام می‌دن. این باعث سرعت بالا و تجربه کاربری فوق‌العاده می‌شه.

❓ چطور دقت محاسبات اعشاری رو در جاوااسکریپت افزایش بدم؟

برای افزایش دقت، بهتره بعد از انجام محاسبات، نتیجه رو با متد `toFixed(n)` گرد کنی. برای پروژه‌هایی با حساسیت مالی بالا، می‌تونی از کتابخانه‌هایی مثل `Decimal.js` استفاده کنی.

❓ Debouncing و Throttling دقیقاً چه کاری انجام می‌دن؟

این دو تکنیک برای کنترل تعداد دفعات اجرای توابع در پاسخ به رویدادهای سریع (مثل تایپ یا اسکرول) استفاده می‌شن. Debouncing تضمین می‌کنه که تابع فقط بعد از یک دوره سکوت اجرا بشه، در حالی که Throttling اجرای تابع رو به یک فرکانس مشخص محدود می‌کنه تا عملکرد صفحه بهبود پیدا کنه.

❓ آیا ماشین‌حساب‌های جاوااسکریپت روی همه دستگاه‌ها کار می‌کنن؟

بله، با استفاده از CSS ریسپانسیو و تکنیک‌های استاندارد طراحی وب، می‌تونی مطمئن باشی که ماشین‌حساب‌های جاوااسکریپتی تو روی انواع دستگاه‌ها از جمله موبایل، تبلت، لپ‌تاپ و حتی تلویزیون به درستی و با ظاهر مناسب نمایش داده می‌شن.

❓ چگونه می‌توانم از کدهای آماده جاوااسکریپت استفاده کنم؟

کدهای آماده و اسنیپت‌ها معمولاً به صورت توابع مجزا یا کلاس‌ها ارائه می‌شن. کافیه کد رو کپی و در فایل جاوااسکریپت پروژه خودت قرار بدی و سپس توابع مربوطه رو در HTML یا JS فراخوانی کنی. برای دسترسی به مجموعه گسترده‌ای از این کدها، می‌تونی به فروشگاه ابزارهای ما سر بزنی.

نیاز به کمک داری؟

اگر در پیاده‌سازی این ماشین‌حساب‌ها یا هر پروژه دیگه‌ای با چالش مواجه شدی، تیم متخصص ما آماده پاسخگویی به سوالات و ارائه پشتیبانی فنی است.

تماس با تیم فنی