价格计算器(报价)基于字数

时间:2015-06-18 21:20:06

标签: javascript jquery html calculator

我正在为当地报纸制作广告表格。我不熟悉编程方面的东西,还在学习。我能够成功地获取表单来计算单词,但我需要根据不同的包/单词计数来引用价格。以下是表单的示例以及价格结构示例的内容。感谢任何帮助指出我正确的方向!请你好,这是练习/为我学习!!

一篇论文15个单词6.50美元,之后每个单词10美分。两篇论文15.50美元12.50美元,之后每个单词15美分。三篇论文15个单词18.00美元,之后每个单词15美分。四篇论文15个单词22.50美元,之后每个单词15美分。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Place An Ad</title>
    <link href="adform.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        counter = function() {
            var value = $('#text').val();

            if (value.length == 0) {
                $('#wordCount').html(0);
                return;
            }

            var regex = /\s+/gi;
            var wordCount = value.trim().replace(regex, ' ').split(' ').length;


            $('#wordCount').html(wordCount);
        };

        $(document).ready(function() {
            $('#count').click(counter);
            $('#text').change(counter);
            $('#text').keydown(counter);
            $('#text').keypress(counter);
            $('#text').keyup(counter);
            $('#text').blur(counter);
            $('#text').focus(counter);
        });
    </script>
</head>

<body id="container">


    <form>
        <p>First Name
            <br>
            <input type="text">
        </p>
        Last Name
        <br>

        <input type="text">
        <p>
            Billing Address:
            <br>
            <input type="text">
        </p>
        <p>
            <input type="text">
        </p>
        <p>
            City:
            <br>
            <input type="text">
        </p>
        <p>
            State:
            <br>
            <input type="text">
        </p>
        <p>
            Zip Code:
            <br>
            <input type="text">
        </p>
        <p>
            Classification:
            <br>
            <select>
                <option>4X4</option>
                <option>Acreage</option>
                <option>Antiques</option>
                <option>Appliances</option>
                <option>Apts Duplex For Rent</option>
                <option>Auctions</option>
                <option>Automobiles</option>
                <option>Boats</option>
                <option>Business for Sale</option>
                <option>Business Opportunity</option>
                <option>Childcare</option>
                <option>Classic Vehicles</option>
                <option>Commercial Rent</option>
                <option>Commercial Sale</option>
                <option>Computers</option>
                <option>Electricians</option>
                <option>Employment</option>
            </select>
        </p>
        <p>Ad Body:
            <br>
            <textarea id="text" cols="50" rows="4"></textarea>
            <br>
            <div id="result">
                <strong>Words: <span id="wordCount">0</span> </strong>
                <br />
                <p>Attach Photo:
                    <br>
                    <input type="file" name="pic" accept="image/*">
                </p>
                Number of Weeks:
                <br>
                <select>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <p>
                    Extended Coverage Areas:
                    <br> Coverage area 1
                    <input type="checkbox" name="coverage" value="Coverage 1"> <sub>Eastern Washington including Spokane</sub>
                    <br> Coverage area 2
                    <input type="checkbox" name="coverage" value="Coverage 2"> <sub>Lewiston and Moscow areas </sub>
                    <br> Coverage area 3
                    <input type="checkbox" name="coverage" value="Coverage 3"> <sub>TriCities and surrounding areas </sub>
                    <br>
                </p>
                <p>Comments:
                    <br>
                    <textarea cols="50" rows="3" id='text'></textarea>
                </p>
                <sub>Please note: Ads without complete billing information or ad text will    not be accepted.</sub>
    </form>
</body>

</html>

0 个答案:

没有答案