{"id":653263,"date":"2025-09-08T10:12:26","date_gmt":"2025-09-08T02:12:26","guid":{"rendered":"http:\/\/puo.cn\/?p=653263"},"modified":"2025-09-08T10:12:26","modified_gmt":"2025-09-08T02:12:26","slug":"wordpress-%e4%be%a7%e8%be%b9%e6%a0%8fhtml%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"http:\/\/puo.cn\/?p=653263","title":{"rendered":"wordpress \u4fa7\u8fb9\u680fhtml\u63d2\u4ef6"},"content":{"rendered":"

\"\"<\/p>\n

<div class=”stats-widget”>
\n<style>
\n.stats-widget {
\nfont-family: Arial, sans-serif;
\nbackground: #ffffff;
\nborder-radius: 8px;
\npadding: 15px;
\ncolor: #333333;
\nmargin-bottom: 15px;
\nbox-shadow: 0 2px 10px rgba(0,0,0,0.1);
\nborder: 1px solid #e0e0e0;
\n}<\/p>\n

.stats-widget h4 {
\nmargin: 0 0 10px 0;
\nfont-size: 16px;
\ntext-align: center;
\ncolor: #667eea;
\nfont-weight: 600;
\n}<\/p>\n

.stats-container {
\ndisplay: flex;
\nflex-wrap: wrap;
\nmargin-bottom: 10px;
\n}<\/p>\n

.stat-item {
\nflex: 1 0 45%;
\nbackground: #f8f9fa;
\npadding: 8px;
\nborder-radius: 6px;
\ntext-align: center;
\nmargin: 2.5%;
\nborder: 1px solid #e9ecef;
\n}<\/p>\n

.stat-label {
\nfont-size: 12px;
\ncolor: #6c757d;
\nmargin-bottom: 4px;
\n}<\/p>\n

.stat-value {
\nfont-size: 16px;
\nfont-weight: bold;
\ncolor: #495057;
\n}<\/p>\n

.weather-container {
\nbackground: #f8f9fa;
\npadding: 10px;
\nborder-radius: 6px;
\ntext-align: center;
\nmargin-top: 10px;
\nborder: 1px solid #e9ecef;
\n}<\/p>\n

.weather-info {
\ndisplay: flex;
\nalign-items: center;
\njustify-content: center;
\nmargin-top: 5px;
\n}<\/p>\n

.weather-icon {
\nfont-size: 24px;
\nmargin-right: 8px;
\n}<\/p>\n

.lunar-date {
\ntext-align: center;
\nmargin-top: 10px;
\nfont-size: 14px;
\ncolor: #6c757d;
\nbackground: #f8f9fa;
\npadding: 8px;
\nborder-radius: 6px;
\nborder: 1px solid #e9ecef;
\n}
\n<\/style><\/p>\n

<h4>\u65f6\u95f4\u7edf\u8ba1<\/h4>
\n<div class=”stats-container”>
\n<div class=”stat-item”>
\n<div class=”stat-label”>\u4eca\u5e74\u5269\u4f59<\/div>
\n<div class=”stat-value” id=”daysRemaining”>\u8ba1\u7b97\u4e2d…<\/div>
\n<\/div>
\n<div class=”stat-item”>
\n<div class=”stat-label”>\u672c\u6708\u5269\u4f59<\/div>
\n<div class=”stat-value” id=”monthDaysRemaining”>\u8ba1\u7b97\u4e2d…<\/div>
\n<\/div>
\n<div class=”stat-item”>
\n<div class=”stat-label”>\u672c\u5b63\u5ea6\u5269\u4f59<\/div>
\n<div class=”stat-value” id=”quarterDaysRemaining”>\u8ba1\u7b97\u4e2d…<\/div>
\n<\/div>
\n<div class=”stat-item”>
\n<div class=”stat-label”>\u672c\u5468\u5269\u4f59<\/div>
\n<div class=”stat-value” id=”weekDaysRemaining”>\u8ba1\u7b97\u4e2d…<\/div>
\n<\/div>
\n<\/div><\/p>\n

<div class=”weather-container”>
\n<div class=”stat-label”>\u4e0a\u6d77\u5929\u6c14<\/div>
\n<div class=”weather-info”>
\n<div class=”weather-icon” id=”weatherIcon”>\ud83c\udf24\ufe0f<\/div>
\n<div>
\n<div id=”weatherTemp”>–\u00b0C<\/div>
\n<div id=”weatherDesc”>\u52a0\u8f7d\u4e2d…<\/div>
\n<\/div>
\n<\/div>
\n<\/div><\/p>\n

<div class=”lunar-date”>
\n<div class=”stat-label”>\u519c\u5386<\/div>
\n<div id=”lunarDate”>\u8ba1\u7b97\u4e2d…<\/div>
\n<\/div><\/p>\n

<script>
\nfunction calculateTimeRemaining() {
\nconst today = new Date();<\/p>\n

\/\/ \u4eca\u5e74\u5269\u4f59\u5929\u6570
\nconst endOfYear = new Date(today.getFullYear(), 11, 31);
\nconst daysLeftYear = Math.ceil((endOfYear – today) \/ (1000 * 60 * 60 * 24));
\ndocument.getElementById(‘daysRemaining’).innerText = daysLeftYear + ” \u5929”;<\/p>\n

\/\/ \u672c\u6708\u5269\u4f59\u5929\u6570
\nconst endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
\nconst daysLeftMonth = Math.ceil((endOfMonth – today) \/ (1000 * 60 * 60 * 24));
\ndocument.getElementById(‘monthDaysRemaining’).innerText = daysLeftMonth + ” \u5929”;<\/p>\n

\/\/ \u672c\u5b63\u5ea6\u5269\u4f59\u5929\u6570
\nconst currentQuarter = Math.floor(today.getMonth() \/ 3);
\nconst endOfQuarter = new Date(today.getFullYear(), (currentQuarter + 1) * 3, 0);
\nconst daysLeftQuarter = Math.ceil((endOfQuarter – today) \/ (1000 * 60 * 60 * 24));
\ndocument.getElementById(‘quarterDaysRemaining’).innerText = daysLeftQuarter + ” \u5929”;<\/p>\n

\/\/ \u672c\u5468\u5269\u4f59\u5929\u6570
\nconst endOfWeek = new Date(today);
\nendOfWeek.setDate(today.getDate() + (7 – today.getDay()));
\nconst daysLeftWeek = Math.ceil((endOfWeek – today) \/ (1000 * 60 * 60 * 24));
\ndocument.getElementById(‘weekDaysRemaining’).innerText = daysLeftWeek + ” \u5929”;
\n}<\/p>\n

function getLunarDate() {
\n\/\/ \u7b80\u5316\u7248\u519c\u5386\u8ba1\u7b97\uff08\u5b9e\u9645\u5e94\u7528\u4e2d\u5efa\u8bae\u4f7f\u7528\u4e13\u95e8\u7684\u519c\u5386\u5e93\uff09
\nconst today = new Date();
\nconst lunarInfo = [
\n0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
\n0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
\n0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
\n0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
\n0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557
\n];<\/p>\n

\/\/ \u7b80\u5316\u8ba1\u7b97\uff0c\u5b9e\u9645\u5e94\u7528\u4e2d\u5e94\u4f7f\u7528\u66f4\u7cbe\u786e\u7684\u7b97\u6cd5
\nconst lunarMonths = [“\u6b63\u6708”, “\u4e8c\u6708”, “\u4e09\u6708”, “\u56db\u6708”, “\u4e94\u6708”, “\u516d\u6708”, “\u4e03\u6708”, “\u516b\u6708”, “\u4e5d\u6708”, “\u5341\u6708”, “\u51ac\u6708”, “\u814a\u6708”];
\nconst lunarDays = [“\u521d\u4e00”, “\u521d\u4e8c”, “\u521d\u4e09”, “\u521d\u56db”, “\u521d\u4e94”, “\u521d\u516d”, “\u521d\u4e03”, “\u521d\u516b”, “\u521d\u4e5d”, “\u521d\u5341”,
\n“\u5341\u4e00”, “\u5341\u4e8c”, “\u5341\u4e09”, “\u5341\u56db”, “\u5341\u4e94”, “\u5341\u516d”, “\u5341\u4e03”, “\u5341\u516b”, “\u5341\u4e5d”, “\u4e8c\u5341”,
\n“\u5eff\u4e00”, “\u5eff\u4e8c”, “\u5eff\u4e09”, “\u5eff\u56db”, “\u5eff\u4e94”, “\u5eff\u516d”, “\u5eff\u4e03”, “\u5eff\u516b”, “\u5eff\u4e5d”, “\u4e09\u5341”];<\/p>\n

\/\/ \u8fd9\u91cc\u4f7f\u7528\u7b80\u5316\u7b97\u6cd5\uff0c\u5b9e\u9645\u5e94\u7528\u4e2d\u5e94\u4f7f\u7528\u66f4\u7cbe\u786e\u7684\u519c\u5386\u8ba1\u7b97\u5e93
\nconst month = lunarMonths[today.getMonth() % 12];
\nconst day = lunarDays[today.getDate() % 30];<\/p>\n

document.getElementById(‘lunarDate’).innerText = month + day;
\n}<\/p>\n

function getWeatherData() {
\n\/\/ \u4f7f\u7528OpenWeatherMap API\u83b7\u53d6\u4e0a\u6d77\u5929\u6c14\uff08\u9700\u8981\u6ce8\u518c\u83b7\u53d6API\u5bc6\u94a5\uff09
\n\/\/ \u8fd9\u91cc\u4f7f\u7528\u6a21\u62df\u6570\u636e\uff0c\u5b9e\u9645\u4f7f\u7528\u65f6\u8bf7\u66ff\u6362\u4e3a\u771f\u5b9e\u7684API\u8c03\u7528
\nconst apiKey = ‘YOUR_API_KEY’; \/\/ \u66ff\u6362\u4e3a\u4f60\u7684API\u5bc6\u94a5
\nconst city = ‘Shanghai’;
\nconst apiUrl = `https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city}&appid=${apiKey}&units=metric&lang=zh_cn`;<\/p>\n

\/\/ \u6a21\u62df\u6570\u636e\uff08\u5b9e\u9645\u4f7f\u7528\u65f6\u8bf7\u5220\u9664\u8fd9\u90e8\u5206\uff0c\u4f7f\u7528\u4e0a\u9762\u7684API\u8c03\u7528\uff09
\nconst mockWeatherData = {
\nmain: { temp: 22 },
\nweather: [{ description: ‘\u591a\u4e91’, icon: ’03d’ }]
\n};<\/p>\n

\/\/ \u4f7f\u7528\u6a21\u62df\u6570\u636e
\ndocument.getElementById(‘weatherTemp’).innerText = mockWeatherData.main.temp + “\u00b0C”;
\ndocument.getElementById(‘weatherDesc’).innerText = mockWeatherData.weather[0].description;<\/p>\n

\/\/ \u6839\u636e\u5929\u6c14\u63cf\u8ff0\u8bbe\u7f6e\u56fe\u6807
\nconst weatherDesc = mockWeatherData.weather[0].description;
\nlet weatherIcon = ‘\ud83c\udf24\ufe0f’; \/\/ \u9ed8\u8ba4\u56fe\u6807<\/p>\n

if (weatherDesc.includes(‘\u6674’)) weatherIcon = ‘\u2600\ufe0f’;
\nelse if (weatherDesc.includes(‘\u4e91’)) weatherIcon = ‘\u2601\ufe0f’;
\nelse if (weatherDesc.includes(‘\u96e8’)) weatherIcon = ‘\ud83c\udf27\ufe0f’;
\nelse if (weatherDesc.includes(‘\u96ea’)) weatherIcon = ‘\u2744\ufe0f’;
\nelse if (weatherDesc.includes(‘\u96fe’) || weatherDesc.includes(‘\u973e’)) weatherIcon = ‘\ud83c\udf2b\ufe0f’;<\/p>\n

document.getElementById(‘weatherIcon’).innerText = weatherIcon;<\/p>\n

\/* \u5b9e\u9645API\u8c03\u7528\u4ee3\u7801\uff08\u53d6\u6d88\u6ce8\u91ca\u5e76\u66ff\u6362API\u5bc6\u94a5\uff09
\nfetch(apiUrl)
\n.then(response => response.json())
\n.then(data => {
\ndocument.getElementById(‘weatherTemp’).innerText = data.main.temp + “\u00b0C”;
\ndocument.getElementById(‘weatherDesc’).innerText = data.weather[0].description;<\/p>\n

\/\/ \u6839\u636e\u5929\u6c14\u56fe\u6807\u4ee3\u7801\u8bbe\u7f6e\u8868\u60c5\u56fe\u6807
\nconst iconCode = data.weather[0].icon;
\nlet weatherIcon = ‘\ud83c\udf24\ufe0f’; \/\/ \u9ed8\u8ba4\u56fe\u6807<\/p>\n

if (iconCode.includes(’01’)) weatherIcon = ‘\u2600\ufe0f’; \/\/ \u6674\u5929
\nelse if (iconCode.includes(’02’)) weatherIcon = ‘\u26c5’; \/\/ \u5c11\u4e91
\nelse if (iconCode.includes(’03’) || iconCode.includes(’04’)) weatherIcon = ‘\u2601\ufe0f’; \/\/ \u591a\u4e91
\nelse if (iconCode.includes(’09’)) weatherIcon = ‘\ud83c\udf27\ufe0f’; \/\/ \u9635\u96e8
\nelse if (iconCode.includes(’10’)) weatherIcon = ‘\ud83c\udf26\ufe0f’; \/\/ \u96e8
\nelse if (iconCode.includes(’11’)) weatherIcon = ‘\u26c8\ufe0f’; \/\/ \u96f7\u96e8
\nelse if (iconCode.includes(’13’)) weatherIcon = ‘\u2744\ufe0f’; \/\/ \u96ea
\nelse if (iconCode.includes(’50’)) weatherIcon = ‘\ud83c\udf2b\ufe0f’; \/\/ \u96fe<\/p>\n

document.getElementById(‘weatherIcon’).innerText = weatherIcon;
\n})
\n.catch(error => {
\nconsole.error(‘\u83b7\u53d6\u5929\u6c14\u6570\u636e\u5931\u8d25:’, error);
\ndocument.getElementById(‘weatherTemp’).innerText = ‘–\u00b0C’;
\ndocument.getElementById(‘weatherDesc’).innerText = ‘\u83b7\u53d6\u5931\u8d25’;
\n});
\n*\/
\n}<\/p>\n

\/\/ \u521d\u59cb\u5316
\ncalculateTimeRemaining();
\ngetLunarDate();
\ngetWeatherData();<\/p>\n

\/\/ \u6bcf\u5206\u949f\u66f4\u65b0\u4e00\u6b21\u6570\u636e
\nsetInterval(function() {
\ncalculateTimeRemaining();
\ngetLunarDate();
\ngetWeatherData();
\n}, 60000);
\n<\/script>
\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

<div class=”stats-widget”> <style> .stats-widget { font-family: Arial, sans-serif; background: #…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[136],"tags":[309,404,477],"topic":[342],"class_list":["post-653263","post","type-post","status-publish","format-standard","hentry","category-136","tag-html","tag-wordpress","tag-477","topic-wordpress"],"_links":{"self":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=653263"}],"version-history":[{"count":1,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653263\/revisions"}],"predecessor-version":[{"id":653266,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/653263\/revisions\/653266"}],"wp:attachment":[{"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=653263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=653263"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=653263"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftopic&post=653263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}