html 虚拟主机带宽计算器（jQuery）//演示：http：//jsfiddle.net/cydL0hby/4/

Posted 2021-05-11

$('#calculate_btn').click(function () {

    // get input values
    var avg_page_size = $('#avg_page_size').val();
    var avg_daily_visitor = $('#avg_daily_visitor').val();
    var avg_pages_per_visit = $('#avg_pages_per_visit').val();

    // construct the formula
    var daily_quota = avg_page_size * avg_daily_visitor * avg_pages_per_visit;
    var monthly_quota = daily_quota * 30;

    if (monthly_quota >= 1000000) {
        suggest_monthly_quota = (monthly_quota / 1000000).toFixed(0) + ' TB';
        est_monthly_quota = (monthly_quota / 1000000).toFixed(1) + ' TB';
    } else if (monthly_quota >= 1000) {
        suggest_monthly_quota = (monthly_quota / 1000).toFixed(0) + ' GB';
        est_monthly_quota = (monthly_quota / 1000).toFixed(1) + ' GB';
    } else if ((monthly_quota < 1000) && (monthly_quota > 500)) {
        suggest_monthly_quota = '1 GB';
        est_monthly_quota = monthly_quota + ' MB';
    } else if ((monthly_quota < 500)) {
        suggest_monthly_quota = '500 MB';
        est_monthly_quota = monthly_quota + ' MB';
    }



    // show result
    $("#est").html('Your estimated monthly bandwidth quota is ' + est_monthly_quota + '.');
    $("#suggest").html('You can start using ' + suggest_monthly_quota + ' bandwidth plan first.');
});

$("#reset").bind("click", function () {
    $("input[type=text], textarea").val("");
    $("#est,#suggest").html('');
});

<h4>Web Hosting Bandwidth Calculator</h4>

<form>
    <input id="avg_page_size" placeholder="Avg page size (MB)" type="text" />
    <br/>
    <br/>
    <input id="avg_daily_visitor" placeholder="Avg daily visitor" type="text" />
    <br/>
    <br/>
    <input id="avg_pages_per_visit" placeholder="Avg pages per visit" type="text" />
    <br/>
    <br/>
    <input type="button" value="Calculate" id="calculate_btn" />
    <input type="button" value="Reset" id="reset" />
</form>
<p id="est"></p>
<p id="suggest"></p>