Hướng dẫn calculator textbox javascript - hộp văn bản máy tính javascript

Bạn có thể đạt được điều này bằng cách sử dụng jQuery. Bao gồm jQuery trong dự án của bạn bằng cách đặt nó vào

Điều này sẽ cho bạn kết quả khi bạn thay đổi giá trị của hộp thứ hai.

JavaScript có một vài phương thức tiện dụng của đối tượng


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

7:

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 và

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9. Chúng cho phép bạn chạy một đoạn mã JavaScript tại một số điểm trong tương lai. Trong hướng dẫn này, chúng tôi sẽ giải thích cách hai phương pháp này hoạt động và đưa ra một số ví dụ thực tế.
    
    
    
0 cho phép bạn chỉ định rằng một đoạn mã JavaScript [được gọi là biểu thức] sẽ được chạy một số mili giây được chỉ định từ khi phương thức

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 được gọi. Cú pháp chung của phương pháp là:

setTimeout [ expression, timeout ];

Trong đó

    
    
    
2 là mã JavaScript để chạy sau khi
    
    
    
3 mili giây đã trôi qua.

Đây là một ví dụ đơn giản:



Khi một khách truy cập nhấp vào nút, phương thức


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 được gọi, chuyển trong biểu thức mà chúng tôi muốn chạy sau thời gian trễ và giá trị của chính thời gian trễ - 5.000 mili giây hoặc 5 giây.

Hãy tự mình thử! Nhấp vào nút bên dưới và đợi 5 giây:

Trong ví dụ đơn giản ở trên, chúng tôi đã nhúng toàn bộ mã cho hộp cảnh báo JavaScript của chúng tôi trong cuộc gọi


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8. Thông thường, bạn gọi là một chức năng. Trong ví dụ tiếp theo này, nhấp vào một nút gọi một hàm thay đổi nút văn bản của nút thành màu đỏ. Đồng thời, chức năng này cũng thiết lập một hàm được định thời sử dụng

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 để đặt màu văn bản trở lại màu đen sau 2 giây:

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

2

Nhấp vào nút bên dưới để xem hành động:

7

Đôi khi nó rất hữu ích để có thể hủy một bộ đếm thời gian trước khi nó tắt. Phương pháp

    
    
    
7 cho phép chúng tôi làm chính xác điều đó. Cú pháp của nó là:

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

0

trong đó

    
    
    
9 là ID của thời gian chờ được trả về từ cuộc gọi phương thức

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8.

Ví dụ: mã sau đặt một hộp cảnh báo để xuất hiện sau 3 giây khi nhấp vào nút, nhưng khách truy cập có thể nhấp vào cùng một nút trước khi cảnh báo xuất hiện và hủy thời gian chờ:


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

1

Hãy thử nó ra! Nhấp vào nút bên dưới để bắt đầu hẹn giờ và nhấp lại trong vòng 3 giây để hủy nó.

$['#texttwo'].keyup[function[]{ var textone; var texttwo; textone = parseFloat[$['#textone'].val[]]; texttwo = parseFloat[$['#texttwo'].val[]]; var result = textone + texttwo; $['#result'].val[result.toFixed[2]]; }]; 9

Hàm


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

82 có liên quan rất chặt chẽ với

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

83 - họ thậm chí chia sẻ cú pháp tương tự:

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

2

Sự khác biệt quan trọng là, trong khi


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 kích hoạt
    
    
    
2 chỉ một lần,

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9 tiếp tục kích hoạt
    
    
    
2 hết lần này đến lần khác [trừ khi bạn bảo nó dừng lại].

Vậy khi nào bạn nên sử dụng nó? Về cơ bản, nếu bạn từng thấy mình viết mã như:


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

3

Thay vào đó, bạn có lẽ nên sử dụng


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9:

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

4

Tại sao? Chà, vì một điều bạn không cần phải nhớ gọi


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 ở cuối chức năng thời gian của bạn. Ngoài ra, khi sử dụng

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9, hầu như không có độ trễ giữa một lần kích hoạt biểu thức và tiếp theo. Với

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8, có một độ trễ tương đối dài trong khi biểu thức được đánh giá, chức năng được gọi là và

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 mới được thiết lập. Vì vậy, nếu bạn cần thời gian thường xuyên, chính xác - hoặc bạn cần phải làm một cái gì đó tại các khoảng thời gian -

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9 là đặt cược tốt nhất của bạn.

$['#texttwo'].keyup[function[]{ var textone; var texttwo; textone = parseFloat[$['#textone'].val[]]; texttwo = parseFloat[$['#texttwo'].val[]]; var result = textone + texttwo; $['#result'].val[result.toFixed[2]]; }]; 4

Như bạn có thể đoán được, nếu bạn muốn hủy một


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9 thì bạn cần gọi
    
    
    
44, chuyển trong ID khoảng thời gian được trả lại bởi cuộc gọi đến

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9.

Ở đây, một ví dụ đơn giản về


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9 và
    
    
    
44 trong hành động. Khi bạn nhấn một nút, mã sau đây sẽ hiển thị Woo Woo! Và "Yay!" ngẫu nhiên mỗi giây cho đến khi bạn bảo nó dừng lại. . Hoặc là yay! biến mất sau nửa giây:

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

5

Và đây là hành động. Nhấp vào nút bên dưới để khởi động nó:

Bản tóm tắt

Bây giờ chúng tôi đã đề cập đến bốn phương pháp mà bạn có thể sử dụng để tạo các sự kiện được định thời trong JavaScript:


$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

8 và
    
    
    
7 để kiểm soát các sự kiện một lần và

$['#texttwo'].keyup[function[]{
    var textone;
    var texttwo;
textone = parseFloat[$['#textone'].val[]];
texttwo = parseFloat[$['#texttwo'].val[]];
var result = textone + texttwo;
$['#result'].val[result.toFixed[2]];


    }];

9 và
    
    
    
44 để thiết lập các sự kiện lặp lại. Được trang bị các công cụ này, bạn sẽ không gặp vấn đề gì khi tạo các sự kiện theo thời gian trong các kịch bản của riêng bạn.

Bài Viết Liên Quan

Chủ Đề