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
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
...
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]
1. Powdered white sugar [cups]
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