Thực đơn
trang chủẢnh và video

Tiện ích đếm ngược. Trình tạo đồng hồ đếm ngược trực tuyến miễn phí

Xin chào các bạn thân mến. Trong một trong những bài viết trước, tôi đã thảo luận xem liệu nó có đáng sử dụng hay không (nó còn được gọi là bộ hẹn giờ đếm ngược) trên trang đích của bạn. Vì vậy, nếu bạn nghĩ rằng bạn cần nó, thì hôm nay tôi sẽ cho bạn biết cách kết nối nó với trang đích của bạn.

Chúng ta sẽ nói về một số tùy chọn, trong một trường hợp, đó sẽ là một tập lệnh đếm ngược sẽ lặp lại sau mỗi 24 giờ. Đó là, bạn sẽ có thể thực hiện một chương trình khuyến mãi. Ví dụ: “cho đến cuối ngày -” và bộ đếm thời gian sẽ hiển thị thời gian còn lại cho đến cuối ngày. Sau một ngày, đồng hồ sẽ khởi động lại và bắt đầu đếm lại

Và trong một phiên bản khác, tôi sẽ kể cho bạn nghe về dịch vụ trực tuyến, cho phép bạn kết nối bộ đếm ngược. Nhưng ở đây người ta cho rằng đồng hồ được thiết kế trong một thời gian dài. Ví dụ: bạn dự định mở một trang web trong một tháng và hiện tại bạn đã tạo một sơ khai như thế này:


Nó có thể được sử dụng theo nhiều cách khác nhau, ví dụ: nếu chương trình khuyến mãi diễn ra một lần và được thiết kế trong thời gian dài, thì kết nối trực tuyến mang lại nhiều lợi nhuận hơn vì bạn chỉ cần thêm một dòng mã vào đúng chỗ. Nói chung tùy vào mục đích mà bạn hãy chọn phương án phù hợp cho mình. Bắt đầu nào...

Bộ đếm ngược có khởi động lại

Vì vậy, bộ đếm ngược sẽ khởi động lại sau một ngày. Nó được phát triển bởi một nghệ nhân có blog mywpnote.ru. Tôi biết đến blog này khoảng sáu tháng trước và nó thực sự giúp ích cho tôi vào thời điểm đó. Hôm nay tôi muốn kể cho các bạn nghe về một trong những máy đo mà anh ấy đã phát triển và mô tả cách kết nối nó.

Bộ hẹn giờ trông như thế này:

Tải xuống các nguồn và trong kho lưu trữ, bạn sẽ thấy 4 thư mục có tên vid1, vid2, vid3, vid4 - trong đó các loại khác nhau thiết kế các bộ đếm thời gian. Bạn có thể xem mọi thứ và chọn thứ bạn thích. Phương thức kết nối là giống nhau cho tất cả mọi người.

Tôi sẽ trình chiếu vào ngày 4, vì đối với tôi nó có vẻ phổ biến nhất. Chúng tôi mở vid4 và trước mặt chúng tôi bộ tiêu chuẩn thư mục cho hầu hết các nguồn trên mạng. ( tập tin chỉ mục, một thư mục chứa các biểu định kiểu, một thư mục chứa ảnh và một thư mục chứa tập lệnh). Tôi đã thay đổi một chút cấu trúc tệp để giúp người mới bắt đầu kết nối đồng hồ đo dễ dàng hơn. Tức là tôi đã đặt tập lệnh hẹn giờ vào tập tin riêng biệt và trước khi nó có trong chỉ mục.

Làm cách nào để kết nối tập lệnh đếm ngược với trang đích của bạn?

Mở index.html bằng bất kỳ trình soạn thảo nào (tôi sử dụng sublime3) và xem đoạn mã sau.

Từ đây bạn cần sao chép kết nối của style sheet và script (dòng 7 và 8) vào dự án của mình.

Ngoài ra, ở nơi bạn muốn đặt bộ hẹn giờ, bạn cần viết thẻ div với lớp “countbox” – dòng 13. Mã đặc biệt đặt nhiều kết nối hẹn giờ để làm rõ rằng chúng có thể được sử dụng nhiều lần trên một trang. Nhiều tập lệnh gặp vấn đề với điều này và lần thứ hai chúng không muốn hiển thị trên màn hình.

Bây giờ bạn chỉ cần sao chép các thư mục img, css và js, cũng như nội dung của chúng vào dự án của bạn - thế là xong! Bộ đếm ngược sẽ hoạt động! Như bạn có thể thấy, phải mất tối đa 5 phút và một yếu tố quan trọng như vậy sẽ có mặt trên trang web của bạn. Nếu bạn có thắc mắc gì, hãy viết bình luận, tôi chắc chắn sẽ giúp bạn kết nối đồng hồ!

Bộ đếm ngược trực tuyến

Đối với những người cần một loại bộ đếm ngược khác, đã được đề cập ở đầu bài viết, có một dịch vụ với phương thức kết nối cực kỳ đơn giản. Tất cả những gì bạn cần làm là truy cập trang web www.timegenerator.ru và chọn một trong những bộ hẹn giờ được đề xuất.


Hẹn giờ là chương trình đếm ngược thời gian và tắt máy tính hoặc máy tính xách tay sau một khoảng thời gian do người dùng chỉ định.

Ứng dụng hẹn giờ cho Windows
Hẹn giờ tắt máy tính trong Windows 7 như một tiêu chuẩn giải phap băng phân mêm không tồn tại, nhưng tắt máy thời gian quy định có thể nhờ vào các sản phẩm nhà phát triển bên thứ ba.

1. Tự động tắt máy– Hẹn giờ tắt máy tính Windows 7, nhờ đó bạn có thể khởi động lại PC, chuyển nó sang chế độ ngủ, đặt đồng hồ đếm ngược hoặc thời gian cụ thể cho một sự kiện cụ thể.
2. PC Autos – một tiện ích đơn giản để vô hiệu hóa, thay đổi chế độ người dùng hoặc máy tính.
3. Hẹn giờ tắt máy RC – chương trình hẹn giờ nhỏ gọn có quay số chức năng cơ bản. Tiện ích Tắt hệ thống tự động hoạt động theo cách tương tự.

Có những ứng dụng không cần cài đặt. PowerOff thuộc về những thứ này. Bạn có thể tải xuống miễn phí bất kỳ chương trình tắt PC chạy Windows 7 nào.

Tắt máy tính của bạn bằng cách sử dụng thời gian nhất định sử dụng trình phát (AIMP, WinAmp), trình quản lý tải xuống torrent và một số tài nguyên trực tuyến.

Tắt máy mà không có tiện ích
Có thể đặt bộ hẹn giờ máy tính trong Windows 8 và Windows 7 bằng cách sử dụng dòng lệnh. Trong trường tìm kiếm, nhập: “shutdown -s -f -t 30” và việc sắp xếp các dấu gạch nối và dấu cách phải chính xác như thế này. Số ở cuối lệnh có nghĩa là thời gian tính bằng giây sau đó PC sẽ tắt. Tức là trong 1 giờ bạn cần đăng ký 3600, trong 2 giờ – 7200, v.v. Tất cả những gì bạn phải làm là nhấp vào “OK” và hệ thống sẽ báo cáo việc tắt máy sau khoảng thời gian được chỉ định.

Nếu cần hủy việc tắt máy, hãy nhập mã “shoutdown -a” vào trường “Run”. Trong trường hợp này, một thông báo tương ứng sẽ xuất hiện trên khay.

Lên lịch thay thế hẹn giờ windows 8 và 7
hẹn giờ ngủ máy tính Windows 7/8 có thể được thay thế lịch trình tiêu chuẩn nhiệm vụ. Bạn cần vào phần “Hành động” – “Tạo” nhiệm vụ đơn giản", điền vào cột "Tên", nhấp vào "Tiếp theo". Trong cửa sổ tiếp theo, tần số được đặt, sau đó lệnh "Shoutdown" được nhập vào cửa sổ "Chương trình hoặc tập lệnh" và trường đối số là "-s -f".

Để hủy, bạn cần vào thư viện bộ lập lịch và xóa tác vụ.

Liên hệ với

Bạn có nhớ đồng hồ bấm giờ “còn _ ngày _ giờ _ phút nữa là đến Tết” không? Hôm nay đồng hồ đếm ngược đã biến thành một chiếc đồng hồ tuyệt vời công cụ tiếp thị- đồng hồ đang bật trang đích cửa hàng trực tuyến, trên trang bán hàng hoặc trang đích. “Còn 5 ngày, 15 giờ, 40 phút cho đến khi chương trình giảm giá kết thúc” hoặc “7 giờ, 15 phút, 35 giây cho đến khi chương trình giảm giá bắt đầu”. Tất nhiên, bộ tính giờ sẽ “hâm nóng” sự quan tâm của khách truy cập, khuyến khích anh ta thực hiện hành động có mục tiêu trên trang web, hạn chế thời gian và tạo ra hiệu ứng khẩn cấp hoặc thiếu hàng.

Nếu chia sẻ của bạn là một lần hay không tính khả thi về mặt kỹ thuật cài đặt tập lệnh của riêng bạn - có các trình tạo trực tuyến miễn phí sẽ chuẩn bị đồng hồ đếm ngược hoạt động sau hai hoặc ba lần nhấp chuột.

Đồng hồ điện tử

Tùy chọn tùy chỉnh và thiết kế khác nhau. Số lượng mã nhỏ. Kịch bản chạy ở phía dịch vụ.

Ba tùy chọn hẹn giờ. Không có cài đặt thiết kế (chỉ thông qua Kiểu CSS). Số lượng mã lớn (tập lệnh + kiểu + mã HTML). Kịch bản hoạt động ở phía người dùng.

Trình tạo hẹn giờ flash

Không có hỗ trợ jQuery — hẹn giờ thực hiện trên flash. Một số lựa chọn thiết kế. Số lượng mã ở mức trung bình. Bộ đếm hoạt động ở phía dịch vụ.

Trình tạo ngày đếm ngược jQuery

Không có đăng ký. Số lượng mã lớn. Kịch bản hoạt động ở phía người dùng.

Ví dụ về công việc:

Lễ kỷ niệm 100 năm còn lại.

Chương trình sẽ hấp dẫn những ai thích tận hưởng thời gian chờ đợi của mình. Chức năng chính Ứng dụng TimeLeftđây là sự đếm ngược Trong số các công cụ tiện ích, người dùng sẽ tìm thấy đồng hồ đếm ngược, đồng hồ, đồng hồ bấm giờ, lời nhắc và tạo nhãn dán ảo cho phép bạn tạo ghi chú trên màn hình của mình. Việc sử dụng kết hợp các khả năng cho phép bạn tạo lời nhắc có đồng hồ hẹn giờ, đặt nó ở bất kỳ vị trí thuận tiện nào trên màn hình của bạn và lên lịch bắt đầu khi một sự kiện xảy ra. ứng dụng bên ngoài, đặt hẹn giờ tắt máy tính, nhấp vào liên kết hoặc chạy tập lệnh. Đặt bộ hẹn giờ trên màn hình của bạn và chương trình sẽ tạo hiệu ứng sinh động cho thời gian trôi qua tại thời điểm mong đợi và. Khi thời gian diễn ra sự kiện đặc biệt đến gần, khi đồng hồ đếm về 0 và tắt, TimeLeft sẽ thông báo và thu hút sự chú ý của người dùng về điều này bằng cách hiển thị thông báo trên màn hình, kèm theo âm thanh báo động.

Đồng hồ đếm ngược

TimeLeft có thể dễ dàng áp dụng cho bất kỳ công việc hàng ngàyở nhà và tại nơi làm việc. Tiện ích có một số lượng lớn cài đặt và tùy chọn bổ sung. Trong số đó có: cài đặt khởi động, độ trong suốt, cửa sổ nổi và cửa sổ tin nhắn, tích hợp nút thêm nhanh vào trình duyệt, hoạt động của biểu tượng khay TimeLeft, gán phím nóng, lịch trình ngày làm việc, ngày lễ và những thứ khác. Để có màn hình đếm ngược thời gian đẹp mắt và phong cách, chương trình có sự lựa chọn lớn chủ đề cho bộ đếm thời gian, giao diện cho phép bạn tùy chỉnh vẻ bề ngoài TimeLeft để phù hợp với sở thích của bạn. Có thể áp dụng cho đồng hồ bấm giờ hoặc đồng hồ bấm giờ hiệu ứng hình ảnh, đặt kiểu được sử dụng để thay đổi số: dọc và thanh trượt ngang, mờ dần một và sự biểu hiện của một hình khác, bắt chước một bộ đếm cơ khí và những hình khác.

Ảnh chụp màn hình của chương trình TimeLeft




Phiên bản miễn phí của TimeLeft và TimeLeft Deluxe

Phiên bản miễn phí có những hạn chế: chương trình miễn phí Bạn không thể tạo nhiều hơn một công cụ, nghĩa là bạn có thể đồng thời tạo lời nhắc, hẹn giờ, đồng hồ, nhãn dán và đồng hồ bấm giờ, nhưng mỗi công cụ đều có một bản sao duy nhất. Phiên bản trả tiền TimeLeft Deluxe cho phép bạn kết nối đấu giá trực tuyến để theo dõi, xuất bộ đếm thời gian sang tập lệnh java, có thể được đặt trên một trang web, được đồng bộ hóa thời gian chính xác qua Internet và loại bỏ các hạn chế về số lượng công cụ chương trình được sử dụng đồng thời.

Trang web chính thức: http://www.nestersoft.com/timeleft/
Hệ điều hành: Windows Tất cả
Ngôn ngữ được hỗ trợ: Nền tảng đa ngôn ngữ, bao gồm cả tiếng Nga
Phiên bản: 3.62
Giấy phép:phần mềm miễn phí (miễn phí)

Kích thước tệp 2,36 MB

Nó xảy ra rằng bạn cần một cái gì đó đồng hồ đếm ngược, có rất nhiều giải pháp trên Internet nhưng chúng rất cồng kềnh hoặc phụ thuộc vào các thư viện khác. Hôm nay chúng ta sẽ xem xét cách tạo đồng hồ đếm ngược trong javascript bằng 18 dòng mã.

Kế hoạch

  • Tính thời gian còn lại

Đặt ngày kết thúc chính xác

Đầu tiên bạn cần cài đặt ngày chính xác tốt nghiệp. Đây sẽ là một chuỗi ở bất kỳ định dạng nào mà nó hiểu được Ngày.parse() phương pháp. Ví dụ:

Thời hạn Var = "2015-12-31";

định dạng ngắn

Thời hạn Var = "31/12/2015";

Hoặc định dạng dài

Hạn chót Var = "31 tháng 12 năm 2015";

Mỗi định dạng này cho phép bạn đặt thời gian chính xác (theo giờ, phút, giây) và múi giờ. Ví dụ:

Thời hạn Var = "Ngày 31 tháng 12 năm 2015 23:59:59 GMT+02:00";

Tính thời gian còn lại

Hàm getTimeRemaining(endtime)(
var t = Date.parse(endtime) - Date.parse(new Date());
var giây = Math.floor((t/1000) % 60);
var phút = Math.floor((t/1000/60) % 60);
var giờ = Math.floor((t/(1000*60*60)) % 24);
var ngày = Math.floor(t/(1000*60*60*24));
trở lại (
"tổng cộng": t,
“ngày”: ngày,
"giờ": giờ,
"phút": phút,
"giây": giây
};
}

Đầu tiên chúng ta tạo một biến tđể lưu trữ thời gian còn lại. Ngày.parse() phương pháp này được xây dựng trong javascript và cho phép bạn chuyển đổi một chuỗi có thời gian thành giá trị tính bằng mili giây. Điều này sẽ cho phép chúng ta trừ đi lần này với lần khác và nhận được sự khác biệt giữa chúng.

Var t = Date.parse(endtime) - Date.parse(new Date());

Chuyển đổi ngày sang định dạng thuận tiện

Bây giờ chúng tôi muốn chuyển đổi mili giây thành ngày, giờ, phút và giây. Hãy sử dụng giây làm ví dụ:

Var giây = Math.floor((t/1000) % 60);

Chúng ta hãy tìm hiểu những gì đang xảy ra ở đây.

  • Chia mili giây cho 1000 để chuyển đổi chúng thành giây
  • Chúng tôi chia Tổng số giây bằng 60 và lưu phần còn lại - bạn không cần tất cả các giây, chỉ những giây còn lại sau khi số phút đã được tính
  • Làm tròn xuống số nguyên gần nhất vì bạn cần số giây đầy đủ chứ không phải phân số của chúng

Lặp lại logic này để chuyển đổi mili giây thành phút, giờ và ngày.

Dữ liệu bộ đếm thời gian đầu ra dưới dạng đối tượng có thể tái sử dụng

Khi giờ, phút và giây đã sẵn sàng, chúng ta cần trả lại chúng dưới dạng đối tượng có thể tái sử dụng.

Trở lại (
"tổng cộng": t,
“ngày”: ngày,
"giờ": giờ,
"phút": phút,
"giây": giây
};

Đối tượng này cho phép bạn gọi hàm của mình và nhận bất kỳ giá trị được tính toán nào. Đây là ví dụ về cách bạn có thể nhận được số phút còn lại:

GetTimeRemaining(thời hạn).phút

Thuận tiện, phải không?

Hiển thị đồng hồ trên trang và dừng nó khi nó về 0

Bây giờ chúng ta có một hàm trả về số ngày, giờ, phút và giây còn lại. Chúng ta có thể xây dựng bộ đếm thời gian của mình. Đầu tiên, tạo như sau html cấu trúc cho đồng hồ:

Sau đó viết một hàm sẽ hiển thị dữ liệu bên trong của chúng ta danh ca:

Hàm khởi tạoClock(id, endtime)(
var clock = document.getElementById(id);
var timeinterval = setInterval(function())(


" +
"giờ: "+ t.giờ + "
" +
"phút: " + t. phút + "
" +
"giây: " + t.giây;

}
},1000);
}

Hàm này có hai tham số: nhận dạng phần tử sẽ chứa đồng hồ của chúng tôi và thời gian kết thúc của bộ đếm. Bên trong hàm chúng ta sẽ khai báo một biến cái đồng hồ và chúng tôi sẽ sử dụng nó để lưu trữ một liên kết đến khối đồng hồ của chúng tôi, vì vậy chúng tôi không cần phải hỏi DOM.

  • Tính thời gian còn lại
  • Hiển thị thời gian còn lại trong div
  • Nếu thời gian còn lại = 0 thì dừng đồng hồ

Việc duy nhất còn lại là khởi động đồng hồ như thế này:

Khởi tạoClock ("clockdiv", thời hạn);

Chúc mừng! Bây giờ bạn có đồng hồ đếm ngược đơn giản chỉ trong 18 dòng javascript mã số.

Chuẩn bị đồng hồ của bạn để trưng bày

Trước khi tạo kiểu chúng ta sẽ cần tinh chỉnh một số thứ một chút.

  • Loại bỏ độ trễ ban đầu để đồng hồ hẹn giờ xuất hiện ngay lập tức
  • Làm cho tập lệnh đồng hồ hiệu quả hơn để bạn không phải liên tục xây dựng lại tất cả các đồng hồ
  • Thêm số không như mong muốn

Loại bỏ độ trễ ban đầu

Trong đồng hồ chúng tôi sử dụng tập khoảng thời gianđể làm mới màn hình mỗi giây. Thông thường, điều này là bình thường, ngoại trừ lúc đầu, có độ trễ 1 giây. Để khắc phục điều này chúng ta cần cập nhật đồng hồ một lần trước đó tập khoảng thời gian bắt đầu.

Để làm điều này, hãy chuyển hàm ẩn danh mà chúng ta chuyển sang tập khoảng thời gian(cái cập nhật đồng hồ mỗi giây) thành của riêng nó chức năng riêng biệt, mà chúng ta sẽ gọi cập nhậtĐồng hồ. Gọi hàm này khi ở bên ngoài tập khoảng thời gian rồi gọi cô ấy vào trong lần nữa tập khoảng thời gian. Bằng cách này, đồng hồ sẽ được hiển thị không chậm trễ.

Trong của bạn javascript thay thế cái này:

Var timeinterval = setInterval(function())( ... ),1000);

Chức năng cập nhậtClock()
var t = getTimeRemaining(endtime);
clock.innerHTML = "ngày: " + t.days + "
" +
"giờ: "+ t.giờ + "
" +
"phút: " + t. phút + "
" +
"giây: " + t.giây;
if(t.total clearInterval(timeinterval);
}
}

UpdateClock(); // chạy hàm một lần để tránh bị delay
var timeinterval = setInterval(updateClock,1000);

Làm cho kịch bản hiệu quả hơn

Để làm cho tập lệnh hiệu quả hơn, chúng ta không cần cập nhật tất cả các đồng hồ mà chỉ cập nhật các con số. Để làm điều này, hãy đặt mỗi số vào một thẻ nhịp và chúng tôi sẽ chỉ cập nhật nội dung này.

Đây html:


Ngày:

Giờ:

Phút:

Giây:

Var DaysSpan = clock.querySelector(".days");
var giờSpan = clock.querySelector(".hours");
var phútSpan = clock.querySelector(".phút");
var giâySpan = clock.querySelector(".seconds");

Chức năng cập nhậtClock()
var t = getTimeRemaining(endtime);

DaysSpan.innerHTML = t.ngày;
giờSpan.innerHTML = t.hours;
phútSpan.innerHTML = t.phút;
giâySpan.innerHTML = t.giây;

...
}

Thêm số 0 đứng đầu

Nếu bạn cần số 0 đứng đầu, bạn có thể thay thế mã như thế này:

GiâySpan.innerHTML = t.giây;

Như thế này:

SecondsSpan.innerHTML = ("0" + t.seconds).slice(-2);

Phần kết luận

Chúng tôi đã xem xét cách tạo đồng hồ đếm ngược đơn giản trong javascript. Tất cả những gì còn lại bạn phải làm là thêm kiểu. Cám ơn vì sự quan tâm của bạn!