达人带货ROI与净收益计算器

zhangwen97 · 发表于 2025-9-2 00:35:46

[size=16.002px]达人带货ROI与净收益计算器是一款专为电商从业者、直播主播、MCN机构和品牌方设计的专业工具。本应用通过科学的计算模型，帮助用户精准计算直播带货的保本ROI、预期收益和成本结构，优化营销策略，最大化利润空间。达人带货ROI计算结果 1.png

还是HTML得。复制代码保存为html的打开就可以了

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>达人带货ROI与净收益计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 30px;
            background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            width: 100%;
            color: white;
            position: relative;
        }
        
        .screenshot-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .screenshot-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        h1 {
            margin-bottom: 10px;
            font-size: 2.2rem;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .calculator-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .input-section, .result-section {
            flex: 1;
            min-width: 300px;
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        
        .section-title {
            color: #2c3e50;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        input[type="number"], input[type="text"] {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        input[type="number"]:focus, input[type="text"]:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        .input-hint {
            font-size: 0.85rem;
            color: #7f8c8d;
            margin-top: 5px;
        }
        
        .calculate-btn {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            border: none;
            padding: 14px 25px;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
        }
        
        .calculate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
        }
        
        .result-box {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #3498db;
            transition: transform 0.3s;
        }
        
        .result-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .result-title {
            font-size: 0.9rem;
            color: #7f8c8d;
            margin-bottom: 8px;
        }
        
        .result-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .highlight {
            color: #e74c3c;
            font-weight: 600;
        }
        
        .positive {
            color: #27ae60;
            font-weight: 600;
        }
        
        .chart-container, .net-profit-calculator {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            width: 100%;
        }
        
        .scenario-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .scenario-btn {
            padding: 10px 20px;
            background: #eef2f7;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .scenario-btn.active {
            background: #3498db;
            color: white;
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
        }
        
        .slider-container {
            margin-top: 15px;
        }
        
        .slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            appearance: none;
            background: #ddd;
            outline: none;
            border-radius: 4px;
        }
        
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3498db;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .slider-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .calculator-container {
                flex-direction: column;
            }
            
            .scenario-controls {
                flex-direction: column;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .screenshot-btn {
                position: relative;
                top: 0;
                right: 0;
                margin-top: 15px;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>达人带货ROI与净收益计算器</h1>
            <p class="subtitle">精准计算保本ROI，优化您的带货策略，最大化利润</p>
            <button class="screenshot-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2a10 10 0 0 0-10 10c0 2.648 1 5 3 6.664L5 22h14l-1.336-3.336A10 10 0 0 0 22 12c0-5.523-4.477-10-10-10z"></path>
                    <circle cx="12" cy="10" r="3"></circle>
                </svg>
                截图保存结果
            </button>
        </header>
        
        <div class="calculator-container">
            <div class="input-section">
                <h2 class="section-title">基本参数设置</h2>
                <div class="form-group">
                    <label for="commission">佣金率 (%)</label>
                    <input type="number" id="commission" min="0" max="100" value="20" step="0.1">
                    <p class="input-hint">请输入商品销售佣金百分比</p>
                </div>
                
                <div class="form-group">
                    <label for="adCost">投流成本 (元)</label>
                    <input type="number" id="adCost" min="0" value="10000" step="100">
                    <p class="input-hint">请输入计划投入的广告费用</p>
                </div>
                
                <div class="form-group">
                    <label for="anchorSalary">主播工资 (元)</label>
                    <input type="number" id="anchorSalary" min="0" value="5000" step="100">
                    <p class="input-hint">请输入主播的固定工资或分成</p>
                </div>
                
                <div class="form-group">
                    <label for="productPrice">商品单价 (元)</label>
                    <input type="number" id="productPrice" min="0" value="199" step="1">
                    <p class="input-hint">请输入单个商品的价格</p>
                </div>
                
                <div class="form-group">
                    <label for="serviceFee">平台服务费率 (%)</label>
                    <input type="number" id="serviceFee" min="0" max="20" value="10" step="0.1">
                    <p class="input-hint">通常为0-10%，部分平台会收取技术服务费</p>
                </div>
                
                <button class="calculate-btn">计算保本ROI</button>
            </div>
            
            <div class="result-section">
                <h2 class="section-title">保本计算结果</h2>
                <div class="result-box">
                    <p class="result-title">保本ROI</p>
                    <p class="result-value" id="breakEvenROI">1:5.00</p>
                </div>
                
                <div class="result-box">
                    <p class="result-title">需要达到的销售额</p>
                    <p class="result-value" id="requiredSales">50,000 元</p>
                </div>
                
                <div class="result-box">
                    <p class="result-title">需要售出商品件数</p>
                    <p class="result-value" id="requiredUnits">252 件</p>
                </div>
                
                <div class="result-box">
                    <p class="result-title">预期佣金收入</p>
                    <p class="result-value" id="expectedCommission">10,000 元</p>
                </div>
                
                <div class="result-box">
                    <p class="result-title">平台服务费</p>
                    <p class="result-value" id="platformFee">1,000 元</p>
                </div>
                
                <div class="result-box">
                    <p class="result-title">主播工资成本</p>
                    <p class="result-value" id="anchorCost">5,000 元</p>
                </div>
                
                <div class="result-box">
                    <p class="result-title">净收益</p>
                    <p class="result-value" id="netProfit">0 元 <span class="highlight">(保本点)</span></p>
                </div>
            </div>
        </div>
        
        <div class="net-profit-calculator">
            <h2 class="section-title">净收益计算器</h2>
            <div class="form-group">
                <label for="actualROI">实际ROI值</label>
                <input type="number" id="actualROI" min="0" value="5.0" step="0.1">
                <div class="slider-container">
                    <input type="range" min="1" max="15" value="5" step="0.1" class="slider" id="roiSlider">
                    <div class="slider-labels">
                        <span>1:1</span>
                        <span>1:5</span>
                        <span>1:10</span>
                        <span>1:15</span>
                    </div>
                </div>
                <p class="input-hint">请输入或滑动选择实际达到的ROI值（保本ROI: 1:5.00）</p>
            </div>
            
            <button class="calculate-btn">计算净收益</button>
            
            <div class="result-box">
                <p class="result-title">实际销售额</p>
                <p class="result-value" id="actualSales">50,000 元</p>
            </div>
            
            <div class="result-box">
                <p class="result-title">实际净收益</p>
                <p class="result-value" id="actualNetProfit">0 元</p>
            </div>
        </div>
        
        <div class="chart-container">
            <h2 class="section-title">ROI与利润关系可视化</h2>
            <div class="scenario-controls">
                <button class="scenario-btn active">保本情况</button>
                <button class="scenario-btn">盈利情况 (ROI +20%)</button>
                <button class="scenario-btn">亏损情况 (ROI -20%)</button>
            </div>
            <canvas id="roiChart"></canvas>
        </div>
        
        <footer>
            <p>© 2025 达人带货ROI与净收益计算器 | 助力您的电商决策</p>
        </footer>
    </div>

    <script>
        // 初始化图表
        let roiChart;
        let currentScenario = 'breakEven';
        let breakEvenROI = 5.0;
        let actualCommissionRate = 0.18;
        let adCost = 10000;
        let anchorSalary = 5000;
        
        // 页面加载时初始化计算
        document.addEventListener('DOMContentLoaded', function() {
            calculateROI();
            calculateNetProfit();
            
            // 添加滑块事件监听
            document.getElementById('roiSlider').addEventListener('input', function() {
                document.getElementById('actualROI').value = this.value;
                calculateNetProfit();
            });
            
            // 添加ROI输入框事件监听
            document.getElementById('actualROI').addEventListener('input', function() {
                document.getElementById('roiSlider').value = this.value;
                calculateNetProfit();
            });
        });
        
        // 计算保本ROI
        function calculateROI() {
            // 获取输入值
            const commissionRate = parseFloat(document.getElementById('commission').value) / 100;
            adCost = parseFloat(document.getElementById('adCost').value);
            anchorSalary = parseFloat(document.getElementById('anchorSalary').value);
            const productPrice = parseFloat(document.getElementById('productPrice').value);
            const serviceFeeRate = parseFloat(document.getElementById('serviceFee').value) / 100;
            
            // 计算实际佣金率（扣除平台服务费）
            actualCommissionRate = commissionRate * (1 - serviceFeeRate);
            
            // 计算总成本（投流成本 + 主播工资）
            const totalCost = adCost + anchorSalary;
            
            // 计算保本ROI
            breakEvenROI = totalCost / (adCost * actualCommissionRate);
            
            // 计算所需销售额
            const requiredSales = totalCost / actualCommissionRate;
            
            // 计算需要售出的商品件数
            const requiredUnits = Math.ceil(requiredSales / productPrice);
            
            // 计算预期佣金收入
            const expectedCommission = requiredSales * commissionRate;
            
            // 计算平台服务费
            const platformFee = expectedCommission * serviceFeeRate;
            
            // 计算净收益（保本点应为0）
            const netProfit = (requiredSales * actualCommissionRate) - totalCost;
            
            // 更新结果显示
            document.getElementById('breakEvenROI').textContent = `1:${breakEvenROI.toFixed(2)}`;
            document.getElementById('requiredSales').textContent = `${requiredSales.toLocaleString('zh-CN')} 元`;
            document.getElementById('requiredUnits').textContent = `${requiredUnits.toLocaleString('zh-CN')} 件`;
            document.getElementById('expectedCommission').textContent = `${expectedCommission.toLocaleString('zh-CN')} 元`;
            document.getElementById('platformFee').textContent = `${platformFee.toLocaleString('zh-CN')} 元`;
            document.getElementById('anchorCost').textContent = `${anchorSalary.toLocaleString('zh-CN')} 元`;
            
            // 更新净收益显示
            const netProfitElement = document.getElementById('netProfit');
            netProfitElement.textContent = `${netProfit.toLocaleString('zh-CN')} 元`;
            
            if (Math.abs(netProfit) < 0.01) {
                netProfitElement.innerHTML = `${netProfit.toLocaleString('zh-CN')} 元 <span class="highlight">(保本点)</span>`;
            } else if (netProfit > 0) {
                netProfitElement.innerHTML = `${netProfit.toLocaleString('zh-CN')} 元 <span class="positive">(盈利)</span>`;
            } else {
                netProfitElement.innerHTML = `${netProfit.toLocaleString('zh-CN')} 元 <span class="highlight">(亏损)</span>`;
            }
            
            // 更新图表
            updateChart(breakEvenROI, actualCommissionRate, adCost, anchorSalary);
            
            // 重新计算净收益
            calculateNetProfit();
        }
        
        // 计算净收益
        function calculateNetProfit() {
            const actualROI = parseFloat(document.getElementById('actualROI').value);
            
            // 计算实际销售额
            const actualSales = adCost * actualROI;
            
            // 计算总成本（投流成本 + 主播工资）
            const totalCost = adCost + anchorSalary;
            
            // 计算净收益
            const netProfit = (actualSales * actualCommissionRate) - totalCost;
            
            // 更新结果显示
            document.getElementById('actualSales').textContent = `${actualSales.toLocaleString('zh-CN')} 元`;
            
            const actualNetProfitElement = document.getElementById('actualNetProfit');
            actualNetProfitElement.textContent = `${netProfit.toLocaleString('zh-CN')} 元`;
            
            if (Math.abs(netProfit) < 0.01) {
                actualNetProfitElement.innerHTML = `${netProfit.toLocaleString('zh-CN')} 元 <span class="highlight">(保本点)</span>`;
            } else if (netProfit > 0) {
                actualNetProfitElement.innerHTML = `${netProfit.toLocaleString('zh-CN')} 元 <span class="positive">(盈利)</span>`;
            } else {
                actualNetProfitElement.innerHTML = `${netProfit.toLocaleString('zh-CN')} 元 <span class="highlight">(亏损)</span>`;
            }
        }
        
        // 切换场景
        function changeScenario(scenario) {
            currentScenario = scenario;
            
            // 更新按钮状态
            document.querySelectorAll('.scenario-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 更新图表
            updateChart(breakEvenROI, actualCommissionRate, adCost, anchorSalary);
        }
        
        // 更新图表
        function updateChart(breakEvenROI, actualCommissionRate, adCost, anchorSalary) {
            const ctx = document.getElementById('roiChart').getContext('2d');
            
            // 如果已有图表实例，先销毁
            if (roiChart) {
                roiChart.destroy();
            }
            
            // 根据场景确定数据范围
            let minROI, maxROI;
            
            if (currentScenario === 'breakEven') {
                minROI = breakEvenROI * 0.5;
                maxROI = breakEvenROI * 1.5;
            } else if (currentScenario === 'profit') {
                minROI = breakEvenROI * 0.8;
                maxROI = breakEvenROI * 1.8;
            } else {
                minROI = breakEvenROI * 0.2;
                maxROI = breakEvenROI * 1.2;
            }
            
            // 生成数据
            const roiValues = [];
            const profitValues = [];
            const breakEvenPoint = [];
            
            for (let roi = minROI; roi <= maxROI; roi += (maxROI - minROI) / 20) {
                roiValues.push(roi.toFixed(2));
                
                const sales = adCost * roi;
                const commission = sales * actualCommissionRate;
                const totalCost = adCost + anchorSalary;
                const profit = commission - totalCost;
                profitValues.push(profit);
                
                // 标记保本点
                if (Math.abs(roi - breakEvenROI) < 0.1) {
                    breakEvenPoint.push({x: roi, y: profit});
                } else {
                    breakEvenPoint.push(null);
                }
            }
            
            // 创建新图表
            roiChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: roiValues,
                    datasets: [
                        {
                            label: '利润 (元)',
                            data: profitValues,
                            borderColor: '#3498db',
                            backgroundColor: 'rgba(52, 152, 219, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3
                        },
                        {
                            label: '保本点',
                            data: breakEvenPoint,
                            pointBackgroundColor: '#e74c3c',
                            pointRadius: 6,
                            pointHoverRadius: 8,
                            showLine: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: '不同ROI水平下的利润表现',
                            font: {
                                size: 16
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    if (context.datasetIndex === 0) {
                                        return `ROI 1:${context.label}, 利润: ${context.raw.toFixed(0)}元`;
                                    } else {
                                        return `保本点: ROI 1:${breakEvenROI.toFixed(2)}`;
                                    }
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'ROI (1:X)'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: '利润 (元)'
                            }
                        }
                    }
                }
            });
        }
        
        // 截图功能
        function takeScreenshot() {
            html2canvas(document.querySelector(".container")).then(canvas => {
                // 创建一个链接用于下载
                const link = document.createElement('a');
                link.download = '达人带货ROI计算结果.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        }
        
        // 添加输入框变化时自动计算
        document.querySelectorAll('#commission, #adCost, #anchorSalary, #productPrice, #serviceFee').forEach(input => {
            input.addEventListener('input', calculateROI);
        });
    </script>
</body>
</html>

please · 发表于 5 天前

感谢分享，支持开源！！！

wh1234567 · 发表于 7 天前

感谢分享

yuan71058 · 发表于 7 天前

感谢分享

year1970 · 发表于 7 天前

感谢分享

佳乐 · 发表于 2025-9-2 18:58:57

这个界面不错啊。支持一下！

1184798949 · 发表于 2025-9-2 16:06:38

感谢分享

深蓝的海 · 发表于 2025-9-2 11:26:01

达人带货ROI与净收益计算器是一款专为电商从业者

px271090412 · 发表于 2025-9-2 11:16:51

8503 · 发表于 2025-9-2 10:41:55

支持支持支持支持支持支持支持

		自动登录	找回密码
密码			注册

[Web源码] 达人带货ROI与净收益计算器

评分

浏览过的版块