Các trường biểu mẫu tự động tính toán JavaScript

3. Khởi tạo plugin AutoCalc và hoàn tất

$('form').jAutoCalc();

4. Tùy chọn mặc định của plugin

$('form').jAutoCalc({

  // default attribute
  attribute: 'jAutoCalc',

  // thousand separator
  thousandOpts: [',', '.', ' '],

  // decimal separator
  decimalOpts: ['.', ','],

  // decimal places
  decimalPlaces: -1,

  // do the math right away?
  initFire: true,

  // allows chained calculation?
  chainFire: true,

  // do the math everytime keys are pressed
  keyEventsFire: false,

  // are the results read-only?
  readOnlyResults: true,

  // shows parse error
  showParseError: true,

  // treats empty as zero
  emptyAsZero: false,

  // smart intergers?
  smartIntegers: false,

  // callback
  onShowResult: null,

  // custom functions
  funcs: {},

  // custom constants
  vars: {}
  
});

Nhật ký thay đổi

v1. 4. 2 (2021-09-18)

  • nếu một tên trường trong một phương trình được bắt đầu bằng ". " đ. g "{tổng} / {. qty}" giá trị của trường sẽ vẫn được sử dụng trong phương trình nhưng thay đổi đối với trường sẽ không gây ra tính toán lại

v1. 4. 0/1 (2021-04-01)

  • nếu một tên trường trong một phương trình được bắt đầu bằng ". " đ. g "{tổng} / {. qty}" giá trị của trường sẽ vẫn được sử dụng trong phương trình nhưng thay đổi đối với trường sẽ không gây ra tính toán lại

v1. 3. 1 (2021-02-11)

  • Các giá trị được cố gắng phân tích cú pháp sau khi làm sạch để xem chúng có hợp lệ hay không, dừng quá trình nếu giá trị không hợp lệ

v1. 2. 2 (2021-02-11)

  • Sửa lỗi tương thích IE11

v1. 2. 1 (2020-08-18)

  • Không thực thi chainFire một cách không cần thiết

v1. 2. 1 (2020-08-18)

  • Không thực thi chainFire một cách không cần thiết

Plugin jQuery tuyệt vời này được phát triển bởi c17r. Để biết thêm Cách sử dụng nâng cao, vui lòng kiểm tra trang demo hoặc truy cập trang web chính thức

Thường được yêu cầu tạo một biểu mẫu trực tuyến có thể tính toán tổng số. Đây là một biểu mẫu tính toán HTML đơn giản. Nó có cấu trúc giống như biểu mẫu hóa đơn để bạn có thể sao chép và điều chỉnh. Lưu ý rằng "đơn giản" có nghĩa là dễ hiểu. Vì vậy, tôi đã tránh mọi cám dỗ để tạo mã nhỏ nhất. Ngoài ra, mã sử dụng một số jQuery để thực hiện phép tính

Dưới đây là một biểu mẫu tính toán. Thử nhập trường số lượng. Nó sẽ tự động cập nhật tổng số. Lưu ý rằng giá vật phẩm được tính toán và không thể thay đổi

Xem biểu mẫu tính toán Pen Simple HTML trên CodePen

Mã HTML (hàng)

<div class="row">
    <div class="col-6">
        1. Powdered white sugar (cups)
    div>
    <div class="col-3">
        <input type="number" value="0" class="qty" id="qty_sugar" />
    div>
    <div class="col-2">
        <input type="number" readonly value="0" id="price_sugar" />
    div>
div>

Mã HTML ở trên tạo một hàng trong biểu mẫu hóa đơn. Lưu ý thuộc tính id của trường số lượng và đơn giá

Các hàng còn lại được thêm tương tự Chỉ ID của các trường được thay đổi

Bây giờ chúng ta hãy xem số học đằng sau tính toán này. Người dùng chỉ có thể nhập số lượng của các mặt hàng. Chúng tôi tính giá của từng mặt hàng bằng cách nhân

số lượng × đơn_giá

Tất cả những gì chúng ta cần làm là viết mã JavaScript để tính tổng. Lưu ý rằng mã này sử dụng thư viện Javascript có tên là jQuery. jQuery làm cho mã này dễ hiểu hơn một chút

function calculateTotal()
{
  let unit_price={
    sugar: 22,
    butter: 12,
    eggs: 2,
    vanilla:43    
  };
  let item_price={}
  
  item_price.sugar = ($("#qty_sugar").val() * unit_price.sugar )
  $("#price_sugar").val(item_price.sugar);
  
  ...
  ...
  
}

Mã này




  ...
0 nhận giá trị của trường có ID qty_sugar Mã



  ...
1 có nghĩa là nhân giá trị của qty_sugar với giá đường (đã khởi tạo ở trên). Ký hiệu * dùng để nhân trong Javascript

Dòng mã này.




  ...
2 đặt kết quả của phép nhân cho trường



  ...
3

Số lượng * giá trị tính tương tự cho các trường còn lại

Sau đó, chúng tôi chỉ cần thêm tất cả các kết quả nhân để tìm tổng

  let total = item_price.sugar + item_price.butter + item_price.eggs + item_price.vanilla;

Cuối cùng, chúng tôi đặt giá trị của “tổng số” bằng cách sử dụng mã này

$("#total_value").text(total);

Tuy nhiên, làm thế nào để tính toán chạy mỗi khi bạn chỉnh sửa số lượng?

Xử lý sự kiện

Đoạn mã dưới đây nối vào các sự kiện thay đổi và bàn phím cho tất cả các trường có thuộc tính lớp




  ...
4 Sau đó, nó chạy hàm tính toán. Vì vậy, đối với mỗi lần cập nhật, biểu mẫu sẽ tính toán tổng số và hiển thị cho bạn

________số 8

tùy chỉnh

Để thêm các mục của bạn, hãy tìm kiếm một trong các mục ở dạng hiện tại (ví dụ: “đường” ) rồi thử thay đổi mục đó. Khi bạn đã thực hiện các thay đổi, bạn sẽ biết được những thay đổi đó ảnh hưởng như thế nào đến hoạt động của biểu mẫu

Làm cách nào để tính giá trị trong JavaScript?

Kết quả. html . const number1 = parseFloat(prompt ('Nhập số đầu tiên. ')); . '));

Làm cách nào để tính tổng đầu vào trong JavaScript?

parseInt() được sử dụng để chuyển đổi chuỗi đầu vào của người dùng thành số . const num1 = parseInt(prompt('Nhập số đầu tiên ')); .

Làm cách nào để viết chương trình máy tính bằng JavaScript?

Hướng dẫn tạo một máy tính đơn giản .
Mã HTML ban đầu để bao gồm. js và. tập tin css. .
Input the Digits And Operators. This step creates buttons for digits from 0 to 9 and operators like +,-,*,/, and = .. .
Thêm kiểu dáng trong. tập tin css. Để làm đẹp những gì bạn nhìn thấy trên màn hình, kiểu dáng là rất quan trọng

Làm cách nào để tự động tính tổng các giá trị đầu vào bằng jQuery hoặc JavaScript?

Các bước bắt buộc để lấy tổng giá trị đầu vào bằng cách sử dụng Jquery .
Khai báo tất cả các trường đầu vào với thuộc tính id của từng trường đầu vào để tìm các giá trị mong muốn trong mỗi hàng
Đồng thời khai báo các trường đầu vào với các thuộc tính lớp của từng trường đầu vào để thu thập tổng của tất cả các trường mong muốn

Kích thước tập tin. 198 KBViews Total. 23287Cập nhật lần cuối. 18/09/2021 09. 24. 00 UTC Ngày Xuất bản. 12/07/2018 02. 53. 31 UTCTrang web chính thức. Tới trang webGiấy phép. MIT

Tải xuống bản trình diễn

Thêm trong danh mục này

Xem các plugin được đề xuất

TOP 100 Plugin jQuery 2022

Chrome, IE9+, FireFox, Opera, Safari#Máy tính#Giỏ hàng#tính toán

Các trường biểu mẫu tự động tính toán JavaScript

AutoCalc là một plugin jQuery được tạo cho giỏ hàng của cửa hàng trực tuyến của bạn, cho phép tính toán động các giá trị của các trường biểu mẫu của bạn tương tự như Excel

Công thức được hỗ trợ

  • TỔNG. tổng số
  • AVG. trả về giá trị trung bình của các giá trị trường
  • TỐI THIỂU. trả về giá trị nhỏ nhất
  • TỐI ĐA. trả về giá trị lớn nhất
  • ĐẾM. đếm tất cả các trường biểu mẫu
  • COUNTNOTEMPT. đếm tất cả các trường không trống

hoạt động được hỗ trợ

  • cộng
  • trừ đi
  • nhân
  • chia
  • sức mạnh

Xem thêm

  • Plugin jQuery để tạo đầu vào tính toán dựa trên công thức - Công thức
  • Plugin jQuery đơn giản cho đầu vào máy tính - Máy tính
  • Plugin tính toán dữ liệu bảng cho jQuery - SumTableTotal
  • Plugin jQuery để tính toán dữ liệu CSV trực tuyến - csv-calc
  • Máy tính nội tuyến dựa trên jQuery bên trong trường đầu vào - Calculadora
  • Plugin jQuery cho biểu mẫu tính toán hoặc bảng tính toán - Calx

Làm thế nào để sử dụng nó

1. Để bắt đầu, hãy chèn plugin jQuery AutoCalc sau thư viện jQuery và chúng tôi đã sẵn sàng



2. Thêm công thức vào các trường biểu mẫu của bạn bằng thuộc tính jAutoCalc như sau. Lưu ý rằng mỗi trường biểu mẫu phải có một tên duy nhất




  ...