当前位置：首页 > news >正文

240828-Gradio结合Html+Css+Javascript制作年历

news 来源：原创 2024/9/19 7:26:42

A. 最终效果

需求描述

html javascript css 按年生成2016年至2116年的日历，要求如下：

二行六例，每个单元是一个月，且每个单元包含周次信息
通过背景为红色的圆圈高亮显示当前的日期
第一页显示今年，鼠标左边或键盘左键更新上一年，鼠标右键或键盘右键更新到下一年
将html javascript css写到同一个html文件中
根据浏览器的宽度，自适应的调整每个月度单元的宽度及字体的大小
整个年历在浏览器中水平居中，年份位于日历的正上方

在这里插入图片描述

B. HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Yearly Calendar</title><style>body {display: flex;flex-direction: column;align-items: center;font-family: Arial, sans-serif;margin: 0;padding: 0;}#year {margin: 20px 0;font-size: 2rem;text-align: center;}.calendar {display: grid;grid-template-columns: repeat(6, 1fr);gap: 10px;width: 90%;max-width: 1200px;}.month {border: 1px solid #ddd;padding: 10px;box-sizing: border-box;}.month h3 {margin: 0;font-size: 1.2rem;text-align: center;}.weekdays,.days {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;font-size: 0.9rem;}.weekdays div {font-weight: bold;padding: 5px 0;}.days div {padding: 5px;cursor: pointer;}.days .today {background-color: red;border-radius: 50%;color: white;}@media (max-width: 800px) {.calendar {grid-template-columns: repeat(3, 1fr);}.month h3 {font-size: 1rem;}.weekdays,.days {font-size: 0.8rem;}}@media (max-width: 500px) {.calendar {grid-template-columns: repeat(2, 1fr);}.month h3 {font-size: 0.9rem;}.weekdays,.days {font-size: 0.7rem;}}</style></head><body><div id="year"></div><div class="calendar" id="calendar"></div><script>const monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December",];const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];let currentYear = new Date().getFullYear();document.addEventListener("DOMContentLoaded", () => {renderCalendar(currentYear);document.getElementById("year").innerText = currentYear;});document.addEventListener("keydown", (event) => {if (event.key === "ArrowLeft") {updateYear(-1);} else if (event.key === "ArrowRight") {updateYear(1);}});document.addEventListener("click", (event) => {if (event.button === 0) {// Left clickupdateYear(-1);}});document.addEventListener("contextmenu", (event) => {event.preventDefault(); // Prevent default context menuupdateYear(1); // Right click});function updateYear(offset) {currentYear += offset;if (currentYear < 2016) currentYear = 2016;if (currentYear > 2116) currentYear = 2116;document.getElementById("year").innerText = currentYear;renderCalendar(currentYear);}function renderCalendar(year) {const calendar = document.getElementById("calendar");calendar.innerHTML = "";for (let i = 0; i < 12; i++) {const monthDiv = document.createElement("div");monthDiv.className = "month";const monthTitle = document.createElement("h3");monthTitle.innerText = monthNames[i];monthDiv.appendChild(monthTitle);const weekdaysDiv = document.createElement("div");weekdaysDiv.className = "weekdays";weekdays.forEach((day) => {const dayDiv = document.createElement("div");dayDiv.innerText = day;weekdaysDiv.appendChild(dayDiv);});monthDiv.appendChild(weekdaysDiv);const daysDiv = document.createElement("div");daysDiv.className = "days";const firstDay = new Date(year, i, 1).getDay();const daysInMonth = new Date(year, i + 1, 0).getDate();// Add empty divs for days before the first day of the monthfor (let j = 0; j < firstDay; j++) {daysDiv.appendChild(document.createElement("div"));}// Add days of the monthfor (let j = 1; j <= daysInMonth; j++) {const dayDiv = document.createElement("div");dayDiv.innerText = j;const today = new Date();if (year === today.getFullYear() &&i === today.getMonth() &&j === today.getDate()) {dayDiv.className = "today";}daysDiv.appendChild(dayDiv);}monthDiv.appendChild(daysDiv);calendar.appendChild(monthDiv);}}</script></body>
</html>

C. Gradio代码

import gradio as grhtml_iframe = """
<iframe srcdoc='
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Yearly Calendar</title><style>body {display: flex;flex-direction: column;align-items: center;font-family: Arial, sans-serif;margin: 0;padding: 0;}#year {margin: 20px 0;font-size: 2rem;text-align: center;}.calendar {display: grid;grid-template-columns: repeat(6, 1fr);gap: 10px;width: 90%;max-width: 1200px;}.month {border: 1px solid #ddd;padding: 10px;box-sizing: border-box;}.month h3 {margin: 0;font-size: 1.2rem;text-align: center;}.weekdays,.days {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;font-size: 0.9rem;}.weekdays div {font-weight: bold;padding: 5px 0;}.days div {padding: 5px;cursor: pointer;}.days .today {background-color: red;border-radius: 50%;color: white;}@media (max-width: 800px) {.calendar {grid-template-columns: repeat(3, 1fr);}.month h3 {font-size: 1rem;}.weekdays,.days {font-size: 0.8rem;}}@media (max-width: 500px) {.calendar {grid-template-columns: repeat(2, 1fr);}.month h3 {font-size: 0.9rem;}.weekdays,.days {font-size: 0.7rem;}}</style></head><body><div id="year"></div><div class="calendar" id="calendar"></div><script>const monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December",];const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];let currentYear = new Date().getFullYear();document.addEventListener("DOMContentLoaded", () => {renderCalendar(currentYear);document.getElementById("year").innerText = currentYear;});document.addEventListener("keydown", (event) => {if (event.key === "ArrowLeft") {updateYear(-1);} else if (event.key === "ArrowRight") {updateYear(1);}});document.addEventListener("click", (event) => {if (event.button === 0) {// Left clickupdateYear(-1);}});document.addEventListener("contextmenu", (event) => {event.preventDefault(); // Prevent default context menuupdateYear(1); // Right click});function updateYear(offset) {currentYear += offset;if (currentYear < 2016) currentYear = 2016;if (currentYear > 2116) currentYear = 2116;document.getElementById("year").innerText = currentYear;renderCalendar(currentYear);}function renderCalendar(year) {const calendar = document.getElementById("calendar");calendar.innerHTML = "";for (let i = 0; i < 12; i++) {const monthDiv = document.createElement("div");monthDiv.className = "month";const monthTitle = document.createElement("h3");monthTitle.innerText = monthNames[i];monthDiv.appendChild(monthTitle);const weekdaysDiv = document.createElement("div");weekdaysDiv.className = "weekdays";weekdays.forEach((day) => {const dayDiv = document.createElement("div");dayDiv.innerText = day;weekdaysDiv.appendChild(dayDiv);});monthDiv.appendChild(weekdaysDiv);const daysDiv = document.createElement("div");daysDiv.className = "days";const firstDay = new Date(year, i, 1).getDay();const daysInMonth = new Date(year, i + 1, 0).getDate();// Add empty divs for days before the first day of the monthfor (let j = 0; j < firstDay; j++) {daysDiv.appendChild(document.createElement("div"));}// Add days of the monthfor (let j = 1; j <= daysInMonth; j++) {const dayDiv = document.createElement("div");dayDiv.innerText = j;const today = new Date();if (year === today.getFullYear() &&i === today.getMonth() &&j === today.getDate()) {dayDiv.className = "today";}daysDiv.appendChild(dayDiv);}monthDiv.appendChild(daysDiv);calendar.appendChild(monthDiv);}}</script></body>
</html>' width="100%" height="800px" style="border:none;"></iframe>
"""with gr.Blocks() as demo:gr.HTML(html_iframe)demo.launch(inbrowser=True)

D. 问题分析

问题描述：

直接将html文件中的内容插入到gr.HTML()后无法显示

解决方案：

代码中没有任何显示的原因可能是由于 Gradio 的 gr.HTML 组件在显示 HTML 内容时的限制问题。gr.HTML 组件只能渲染纯 HTML 和 CSS 内容，对于包含 JavaScript 的代码，它不会自动执行脚本。因此，尽管 HTML 内容被正确加载，JavaScript 却没有执行，从而导致页面没有预期的动态效果。

为了在 Gradio 中正确展示和运行 JavaScript，可以尝试以下解决方案：

使用 IFrame：将完整的 HTML 内容放入一个独立的 HTML 文件中，然后通过 Gradio 的 gr.HTML 加载一个 IFrame，将这个 HTML 文件嵌入其中。
托管网页并嵌入：将 HTML 内容托管在一个 web 服务器上（例如 GitHub Pages），然后在 Gradio 中通过 IFrame 引入外部链接。