一个简单的html时间显示页面-可做小工具

代码由 chatgpt3.5 生成，已验证
index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>当前时间</title>
 <style>
   
body {
	text-align: center;
	font-family: Arial, sans-serif;
	background-color: #f5f5f5;
	padding-top: 100px;
}

      h1 {
	      font-size: 36px;
	      color: #555;
	      margin-bottom: 20px;
      }

      #time {
	      font-size: 72px;
	      color: #333;
	      margin-bottom: 20px;
      }

      #date {
	      font-size: 24px;
	      color: #666;
	      margin-bottom: 40px;
      }

      #quote {
	      font-size: 24px;
	      color: #888;
	      margin-bottom: 40px;
      }

      #notes {
	      width: 500px;
	      margin: 0 auto;
	      border: 1px solid #ccc;
	      padding: 10px;
	      background-color: #fff;
	      text-align: left;
	      font-size: 14px;
	      margin-bottom: 40px;
      }

      #notes textarea {
	      width: 100%;
	      height: 200px;
	      padding: 10px;
	      border: none;
	      resize: none;
      }

      #notes button {
	      font-size: 16px;
	      background-color: #555;
	      color: #fff;
	      padding: 10px 20px;
	      border: none;
	      cursor: pointer;
	      transition: background-color 0.3s ease;
      }

      #notes button:hover {
	      background-color: #333;
      }
 </style>
</head>
<body>
 <!-- <h1>当前时间</h1> -->
 <div id="time"></div>
 <div id="date"></div>
 <div id="quote">生活是一种态度。</div>
 <div id="notes">
   <textarea id="markdownEditor" placeholder="在这里写下您的笔记..." rows="10" cols="50"></textarea>
   <br>
   <div id="markdownPreview"></div>
   <br>
   <button id="saveButton">保存笔记 (Ctrl + S)</button>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <!-- <script src="https://fastly.jsdelivr.net/npm/marked/marked.min.js"></script> -->
 <script>
   function updateTime() {
     var now = new Date();
							var hour = now.getHours();
							var minute = now.getMinutes();
							var second = now.getSeconds();
							var week = now.getDay();
							var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
							var year = now.getFullYear();
							var month = now.getMonth() + 1;
							var day = now.getDate();

							// 格式化时间
							hour = hour < 10 ? "0" + hour : hour;
							minute = minute < 10 ? "0" + minute : minute;
							second = second < 10 ? "0" + second : second;

							// 在页面中显示时间和日期
							document.getElementById("time").innerHTML = hour + ":" + minute + ":" + second;
							document.getElementById("date").innerHTML = year + "年" + month + "月" + day + "日 " + weekday[week];
   }

   // 每隔1秒更新时间
   setInterval(updateTime, 1000);

   // Markdown记事本
   var markdownEditor = document.getElementById("markdownEditor");
   var markdownPreview = document.getElementById("markdownPreview");
   var saveButton = document.getElementById("saveButton");

   // 实时渲染Markdown文本
   function renderMarkdown() {
     var markdownText = markdownEditor.value;
     var renderedHtml = marked.parse(markdownText);
     markdownPreview.innerHTML = renderedHtml;
   }

   // 保存文本到本地代码省略，请使用上面的代码
function saveText() {
							var text = markdownEditor.value;
							var blob = new Blob([text], {type: "text/markdown"});
							var url = URL.createObjectURL(blob);
							var link = document.createElement("a");
							link.href = url;
							link.download = "notes.md";
							link.click();
						}

   // 监听Ctrl + S组合键保存文本代码省略，请使用上面的代码
document.addEventListener("keydown", function(event) {
							if (event.ctrlKey && event.key === "s") {
											event.preventDefault();
											saveText();
										}
						});
    // 点击按钮保存文本代码省略，请使用上面的代码
    saveButton.addEventListener("click", saveText);
    // 实时渲染Markdown文本
    markdownEditor.addEventListener("input", renderMarkdown);
    // 初始化渲染Markdown文本
    renderMarkdown();
 </script>
</body>
</html>