startpage/js/main.js
hc a0cf683699 feat: enhance date and time display with Chinese format; add search engine switcher
- Updated dateTime function to display date and time in Chinese format.
- Introduced setSearchEngine function to switch between Google and Baidu as search engines.
- Added event listener for search engine switching on click.
- Persisted selected search engine in localStorage for user preference.
- Changed weatherBalloon city ID to Beijing, China.
2025-10-21 16:30:52 +08:00

98 lines
3.6 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

function dateTime() {
const date = new Date();
// 中文日期格式
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekDay = weekDays[date.getDay()];
const today = `${year}${month}${day}${weekDay}`;
// 中文时间格式
const time = date.toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('date-time').innerHTML = '<p id="date">' + today + '</p><p id="time">' + time + '</p>';
setTimeout(dateTime, 1000);
}
function weatherBalloon(cityID) {
var apiKey = ''; //OpenWeather API key
fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID + '&appid=' + apiKey)
.then(function(resp) {
return resp.json()
})
.then(function(data) {
let weatherIcon = data.weather[0].icon;
let tempK = parseFloat(data.main.temp);
let tempC = Math.round(tempK - 273.15);
let tempF = Math.round((tempK - 273.15) * 1.8) + 32;
document.getElementById('weather').innerHTML = '<p id="location">' + data.name + '</p><p id="details" ' + 'title="' + tempF + '&deg;F">' + '<img src="https://openweathermap.org/img/wn/' + weatherIcon + '.png">' + data.weather[0].description + '<span class="separator">|</span>' + tempC + '&deg;C</p>';
});
}
function setSearchEngine(engine) {
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const searchEngineSelector = document.getElementById('search-engine-selector');
const baiduIcon = searchEngineSelector?.querySelector('.baidu-icon');
const googleIcon = searchEngineSelector?.querySelector('.google-icon');
if (!searchForm || !searchInput || !searchEngineSelector || !baiduIcon || !googleIcon) {
return;
}
if (engine === 'google') {
searchEngineSelector.dataset.engine = 'google';
searchEngineSelector.setAttribute('aria-label', '当前搜索引擎Google点击切换至 Baidu');
searchEngineSelector.setAttribute('title', '当前Google点击切换至 Baidu');
searchForm.action = 'https://www.google.com/search';
searchInput.name = 'q';
baiduIcon.style.display = 'none';
googleIcon.style.display = 'block';
} else {
searchEngineSelector.dataset.engine = 'baidu';
searchEngineSelector.setAttribute('aria-label', '当前搜索引擎Baidu点击切换至 Google');
searchEngineSelector.setAttribute('title', '当前Baidu点击切换至 Google');
searchForm.action = 'https://www.baidu.com/s';
searchInput.name = 'wd';
baiduIcon.style.display = 'block';
googleIcon.style.display = 'none';
}
try {
localStorage.setItem('searchEngine', searchEngineSelector.dataset.engine);
} catch (error) {
// Ignore storage errors (e.g., disabled storage)
}
searchInput.focus();
}
function switchSearchEngine() {
const searchEngineSelector = document.getElementById('search-engine-selector');
const nextEngine = (searchEngineSelector?.dataset.engine || 'baidu') === 'baidu' ? 'google' : 'baidu';
setSearchEngine(nextEngine);
}
function traichu() {
dateTime();
weatherBalloon(1816670); //OpenWeather city ID - Beijing, China
const selector = document.getElementById('search-engine-selector');
if (selector) {
selector.addEventListener('click', switchSearchEngine);
let savedEngine = null;
try {
savedEngine = localStorage.getItem('searchEngine');
} catch (error) {
savedEngine = null;
}
setSearchEngine(savedEngine === 'google' ? 'google' : 'baidu');
}
}