2010-02-12 34 views
10

Tôi muốn áp dụng các trang CSS khác nhau cho trang web của mình tùy thuộc vào thời gian của trình duyệt. ví dụ: nếu ngày của nó, hiển thị day.css hoặc night.css cho ban đêm.Làm thế nào để xác định xem đó là ngày hay đêm trong javascript hoặc jquery?

Tôi có thể thực hiện việc này bằng PHP nhưng dựa trên thời gian của máy chủ chứ không phải thời gian của trình duyệt.

Có cách nào để cho biết thời gian trong javascript không? Tôi có thể sẽ sử dụng jQuery để chỉ đơn giản là bắt đầu css một khi nó làm việc ra.

+4

Bạn không cần phải javascript cho nhiệm vụ này. Chỉ cần lên lầu và mở rèm cửa. –

+0

Bạn vẫn có thể làm điều đó trong PHP dựa trên các khách hàng địa phương-thời gian .... nhưng bạn sẽ phải sử dụng một số loại IP để dịch vụ vị trí, mà không phải là hoàn toàn đáng tin cậy. – mpen

+0

Đây là một câu hỏi hay và có thể là một tính năng tuyệt vời, nhưng có một khả năng là điều này có thể xảy ra. Tôi đã sử dụng máy tính trước khi có thời gian thiết lập không chính xác (như giờ là cách tắt). Một trong những comp đó là với Vista: sau khi đồng bộ hóa nó với đồng hồ Internet, nó được hoàn nguyên. Vì vậy, có thể có trường hợp bạn có thể giải thích không chính xác dữ liệu. Vâng, có thể có trường hợp dữ liệu không chính xác. Nếu điều này là nhiều hơn về chủ đề và bạn không thực sự quan tâm nếu nó không chính xác trong một số trường hợp, chắc chắn đi trước, nhưng nếu không, bạn có thể không muốn điều này. Tôi không biết mình sẽ làm gì. Chúc may mắn! –

Trả lời

22
var hr = (new Date()).getHours(); //get hours of the day in 24Hr format (0-23) 

Tùy thuộc vào định nghĩa của bạn trong ngày/đêm, thực hiện kỳ ​​diệu của bạn :)

PS: Nếu ngày/đêm bắt đầu không phải ở giờ chính xác, bạn có thể thử getMinutes().

2
(new Date).getHours() 

sẽ nhận giờ địa phương (0-23) của khách hàng. Dựa trên giá trị đó, hoán đổi biểu định kiểu cho trang. Tôi sẽ đặt biểu định kiểu ngày làm mặc định và hoán đổi nó khi cần thiết.

Suy nghĩ ban đầu của tôi là bạn muốn thực hiện thao tác này càng sớm càng tốt trên máy khách để tránh bất kỳ potential browser reflow.

0

tôi sử dụng logic này:

const hours = new Date().getHours() 
const isDayTime = hours > 6 && hours < 20 
Các vấn đề liên quan