Làm thế nào để làm việc với Progressbar trong CSS3 - núm vú

Người dùng thiếu kiên nhẫn, và đôi khi một quá trình cần một thời gian để hoàn thành. Thanh tiến trình làm cho nhà phát triển CSS3 có thể giữ cho người dùng thông báo về tiến trình của một tác vụ.

Các chiến lược lập trình hiện đại cố gắng giữ cho người dùng khỏi phải chờ đợi bằng cách thực hiện các tác vụ lâu hơn ở chế độ nền, nhưng đôi khi người dùng không thể tiến hành cho đến khi công việc được thực hiện. Đây là thời gian bạn cần dựa vào thanh tiến trình để giữ cho người dùng cố gắng ngừng quá trình trước khi nó hoàn thành.

Ví dụ dưới đây chỉ ra cách sử dụng thanh tiến trình. Trong trường hợp này, thanh tiến trình được cập nhật thông qua một vòng lặp thời gian. Mỗi lần bộ hẹn giờ hết hạn, thanh tiến trình sẽ được cập nhật và bộ hẹn giờ được khởi tạo lại.

Kết quả là chỉ số tiến trình di chuyển từ trái sang phải và bộ đếm thời cuối cùng dừng lại khi chỉ báo di chuyển sang bên phải. (Bạn có thể tìm thấy mã hoàn chỉnh cho ví dụ này trong thư mục Chương 06Widgets của mã có thể tải là Progressbar. HTML.)

// Định cấu hình thanh tiến trình. $ (function () {$ ("# Progress") progressbar ({value: 0});}) // Tạo một biến để giữ đối tượng timer. var Timer; / / Tạo một biến để giữ tổng thời gian chờ. var Timeout; chức năng StartTimer () {/ / khởi tạo thời gian chờ. Thời gian chờ = 0; // Đặt giá trị tối đa của thanh tiến trình. $ ("Tiến triển #). tiến trình ("tùy chọn", "tối đa", parseInt ($ ("# StartValue"). val ())); // Tạo biến timer. Timer = cửa sổ. setTimeout (UpdateTimer, 100);} function UpdateTimer () {// Lấy giá trị lớn nhất. var MaxTime = $ ("Tiến triển #"). thanh tiến trình ("tùy chọn", "tối đa"); / / Kiểm tra để kết thúc chu kỳ thời gian. if (Timeout = MaxTime) trở lại; // Cập nhật giá trị Timeout. Thời gian chờ + = 100; / / Cập nhật phần trăm hoàn thành. $ ("# PercentDone"). văn bản (Toán học tròn ((Timeout / MaxTime) * 100)); // Đặt thanh tiến trình. $ ("Tiến triển #). thanh tiến ("giá trị", thời gian chờ); // Tạo biến timer. Timer = cửa sổ. setTimeout (UpdateTimer, 100);}

Nhiệm vụ đầu tiên là tạo thanh tiến trình bằng cách gọi progressbar (). Lưu ý rằng bạn phải cung cấp một giá trị ban đầu là đầu vào. Tuy nhiên, cấu hình thanh tiến trình không hoàn chỉnh - cuộc gọi đến StartTimer () sau này sẽ thực hiện một số nhiệm vụ cấu hình bổ sung.

Chức năng StartTimer () được gọi khi người dùng nhấn vào nút Start Timer trên form. Hàm này khởi tạo hai biến toàn cục. Timer là một đối tượng timer được sử dụng để kích hoạt thanh tiến trình. Thời gian chờ là thời gian trôi qua hiện tại bằng mili giây.

Chức năng này cũng cấu hình tùy chọn tối đa cho thanh tiến trình.Chỉ thị là phần trăm của giá trị hiện tại và các thuộc tính giá trị tối đa. Giá trị tối đa được cung cấp bởi người dùng thông qua một điều khiển, StartValue.

Bất cứ khi nào Thơi gian hết hạn, nó gọi là UpdateTimer (). UpdateTimer () nhận được giá trị thời gian tối đa từ thanh tiến trình và đặt nó trong MaxTime. Sau đó, xác minh rằng Timeout ít hơn MaxTime. Khi Timeout cuối cùng đạt đến MaxTime, thanh tiến trình đã đạt đến 100 phần trăm và đó là thời gian để dừng hẹn giờ.

Bước tiếp theo là cập nhật Timeout cho giá trị tiếp theo. Mỗi lần tiến hành lặp đi lặp lại khoảng 100 mili giây.

Sau khi cập nhật Thời gian chờ, ví dụ cập nhật phần trăm màn hình trên màn hình, được lưu trữ trong một với id của PercentDone. Nó cũng cập nhật thuộc tính giá trị thanh tiến trình để thanh di chuyển đến vị trí tiếp theo.

Bộ hẹn giờ chỉ khởi động một lần. Để tạo vòng lặp tiếp theo của phép lặp, ví dụ phải đặt lại Timer. Khi chờ đợi 100 millisecond tiếp theo kết thúc, UpdateTimer () được gọi lại và quá trình bắt đầu lại.