|
|
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Forex Market Hours (Centered + Vietnam)</title> |
| <style> |
| body { |
| background-color: #0f0f0f; |
| color: white; |
| font-family: sans-serif; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| padding: 20px; |
| } |
| h2 { |
| color: #00ccff; |
| margin-bottom: 10px; |
| } |
| .controls { |
| text-align: center; |
| margin-bottom: 20px; |
| } |
| select { |
| padding: 5px 10px; |
| font-size: 14px; |
| border-radius: 5px; |
| } |
| table { |
| width: 100%; |
| max-width: 415px; |
| border-collapse: collapse; |
| } |
| th, td { |
| border: 1px solid #333; |
| padding: 8px; |
| text-align: center; |
| } |
| th { |
| background-color: #222; |
| } |
| tr:nth-child(even) { |
| background-color: #1a1a1a; |
| } |
| #localtime { |
| margin-bottom: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="controls"> |
| <label for="tz">Select Timezone:</label> |
| <select id="tz"> |
| <option value="America/Los_Angeles">Los Angeles</option> |
| <option value="America/New_York">New York</option> |
| <option value="Europe/London">London</option> |
| <option value="Asia/Tokyo">Tokyo</option> |
| <option value="Australia/Sydney">Sydney</option> |
| <option value="Asia/Ho_Chi_Minh">Vietnam</option> |
| </select> |
| </div> |
| <p id="localtime"></p> |
| <table> |
| <thead> |
| <tr> |
| <th>Center</th> |
| <th>Status</th> |
| <th>Time Left</th> |
| <th>Opens In</th> |
| <th>Open</th> |
| <th>Close</th> |
| </tr> |
| </thead> |
| <tbody id="session-table"></tbody> |
| </table> |
|
|
| <script> |
| const sessions = [ |
| { center: "Sydney", tz: "Australia/Sydney", open: "08:00", close: "16:00" }, |
| { center: "Tokyo", tz: "Asia/Tokyo", open: "09:00", close: "17:00" }, |
| { center: "London", tz: "Europe/London", open: "08:00", close: "16:00" }, |
| { center: "New York", tz: "America/New_York", open: "09:30", close: "16:00" } |
| ]; |
| |
| function updateSessions() { |
| const userTZ = document.getElementById("tz").value; |
| const now = new Date(); |
| document.getElementById("localtime").innerHTML = "Time in <b>" + userTZ + "</b>: <b>" + |
| now.toLocaleTimeString("en-US", { timeZone: userTZ }) + "</b>"; |
| |
| const tbody = document.getElementById("session-table"); |
| tbody.innerHTML = ""; |
| |
| sessions.forEach(s => { |
| const nowInTZ = new Date(new Date().toLocaleString("en-US", { timeZone: s.tz })); |
| const parseTime = (timeStr) => { |
| let [time, modifier] = timeStr.split(' '); |
| let [hours, minutes] = time.split(':').map(Number); |
| if (modifier === 'PM' && hours < 12) { |
| hours += 12; |
| } |
| if (modifier === 'AM' && hours === 12) { |
| hours = 0; |
| } |
| return { hours, minutes }; |
| }; |
| |
| const openTime = parseTime(s.open); |
| const closeTime = parseTime(s.close); |
| |
| const open = new Date(nowInTZ); |
| open.setHours(openTime.hours, openTime.minutes, 0, 0); |
| |
| const close = new Date(nowInTZ); |
| close.setHours(closeTime.hours, closeTime.minutes, 0, 0); |
| |
| const today = nowInTZ.getDay(); |
| const isWeekend = today === 0 || today === 6; |
| |
| const isOpen = !isWeekend && nowInTZ >= open && nowInTZ < close; |
| const timeLeft = (isOpen && !isWeekend) ? new Date(close - nowInTZ).toISOString().substr(11, 8) : "-"; |
| |
| let opensIn = "-"; |
| if (!isOpen && !isWeekend) { |
| if (nowInTZ > close) open.setDate(open.getDate() + 1); |
| opensIn = new Date(open - nowInTZ).toISOString().substr(11, 8); |
| } |
| |
| const statusColor = isOpen ? "#00cc66" : "#999"; |
| |
| tbody.innerHTML += ` |
| <tr> |
| <td>${s.center}</td> |
| <td style="color:${statusColor}; font-weight:bold;">${isOpen ? "Open" : "Closed"}</td> |
| <td>${timeLeft}</td> |
| <td>${opensIn}</td> |
| <td>${s.open}</td> |
| <td>${s.close}</td> |
| </tr> |
| `; |
| }); |
| } |
| |
| setInterval(updateSessions, 1000); |
| </script> |
| </body> |
| </html> |
|
|
