代码由 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>

页面效果：

其中笔记可以ctrl+s或点击保存笔记来保存到本地，markdown页面渲染还有些问题。可以放到nginx上，再windows上直接点击在浏览器打开也可以。

一个简单的html时间显示页面-可做小工具的更多相关文章

  1. HTTP lab01 做一个简单的测试用 web页面

      做一个简单的测试用 web页面     1.安装httpd服务   yum install httpd   安装完httpd服务后,系统就自动生成了/var/www/html目录     创建一个 ...

  2. 一个支持DbFirst、ModelFirst和CodeFirst的数据库小工具DbTool

    DbTool 一个支持DbFirst.ModelFirst和CodeFirst的数据库工具. 简介 这是一个针对 SqlServer 数据库和 C# 开发语言的小工具,可以利用这个小工具生成数据库表对 ...

  3. 通过Nginx实现一个简单的网站维护通知页面

    原文:https://www.zhyd.me/article/106 在网站发版时,总会有那么一小段时间服务是访问不通的,一般用户看到的都会是一个502的错误页面 那么可以通过nginx实现一个简单的 ...

  4. 使用libcurl开源库和Duilib做的下载文件并显示进度条的小工具

    转载:http://blog.csdn.net/mfcing/article/details/43603525 转载:http://blog.csdn.net/infoworld/article/de ...

  5. 手把手教你写一个windows服务 【基于.net】 附实用小工具｛注册服务/开启服务/停止服务/删除服务｝

    1,本文适用范围 语言:.net 服务类型:windows服务,隔一段时间执行 2,服务搭建: 1,在vs中创建 console程序 2,在console项目所在类库右键 添加-新建项-选择Windo ...

  6. [wxpusher]分享一个服务器推送消息到微信上的小工具，可以用于微信推送提醒和告警。

    背景 作为一个程序员,业余搞点自己的东西很正常,一般程序员都会有一两台自己的服务器,谁叫今天xx云搞活动,明天yy云搞活动呢. 自家的服务器用来跑爬虫,跑博客,或者跑一些个人业务,但当服务有新状态,抢 ...

  7. 一个简单的修改 iis默认页面的方法..

    1. IIS 默认打开的是欢迎页面 2. 然后找到了一个比较简单的修改默认界面的方法: 找到这个文件的默认路径 C:\inetpub\wwwroot 然后修改 iisstart.htm 文件 在hea ...

  8. 【Eclipse】一个简单的 RCP 应用 —— 显示Eclipse 的启动时间。

    1 创建一个插件项目 1.1 File - New - Plug-in Project 注: 1 如果 New 下没有 Plug-in Project , 到 Other 里面去找. 2 如上截图的下 ...

  9. 一个简单便捷的树形显示Ztree

    这是本人在闲时研究的一个用于显示树形列表的小玩意. zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 下面就说说怎么用吧 ...

  10. 一个简单的数据查询显示jsp

    以前使用jstl标签库只是使用core来显示一些数据,非常方便,今天看了下发现jstl还有其他的标签,使用都非常方便, 1.sql标签,可以直接访问数据库,后台代码都不需要了,这在某些时候非常适合使用 ...

随机推荐

  1. Could not find mimemagic-0.3.2 in any of the sources

    rails s报如下错误 Could not find mimemagic-0.3.2 in any of the sources Run `bundle install` to install mi ...

  2. WEB服务与NGINX（19）- nginx 防盗链功能

    目录 1 nginx防盗链功能 1.1 盗链功能概述 1.2 实现盗链 1.3 实现防盗链 1 nginx防盗链功能 1.1 盗链功能概述 防盗链基于客户端携带的referer实现,referer是记 ...

  3. web3.js：使用eth包

    原文在这里 简介 web3-eth包提供了一套强大的功能,可以与以太坊区块链和智能合约进行交互.在本教程中,我们将指导您如何使用web3.js版本4的web3-eth包的基础知识.我们将在整个示例中使 ...

  4. 单体项目使用Spring Security实现登陆认证授权

    前端可以根据权限信息控制菜单和页面展示,操作按钮的显示.但这并不够,如果有人拿到了接口,绕过了页面直接操作数据,这是很危险的.所以我们需要在后端也加入权限控制,只有拥有操作权限,该接口才能被授权访问. ...

  5. 你可能不知道的秘密——String s=new String(“abc”)到底创建了几个对象?

    String s=new String("abc")创建了几个对象? ​   在探讨上述问题结论之前,我们需要了解常量池这个概念. 常量池 ​   由于字符串在Java中被大量使用 ...

  6. EasyUI框架Datagrid（数据表格）的实现，以及Datagrid的分页显示（详解）

    在前端页面中使用EasyUI框架时,通常会使用EasyUI自带的datagrid(数据表格)样式,下面我们对datagrid样式进行简单的介绍,并且会对datagrid的分页显示进行详细的介绍. Ea ...

  7. 原型工具--canva可画

    Canva 是一个功能强大的在线设计平台,提供了丰富的设计工具和素材,包括原型设计.尽管 Canva 在原型设计方面并不像专门的原型设计工具(如Sketch.Figma.Adobe XD等)那样功能全 ...

  8. NumPy 泊松分布模拟与 Seaborn 可视化技巧

    泊松分布 简介 泊松分布是一种离散概率分布,用于描述在给定时间间隔内随机事件发生的次数.它常用于模拟诸如客户到达商店.电话呼叫接入中心等事件. 参数 泊松分布用一个参数来定义: λ:事件发生的平均速率 ...

  9. linux上使用webdav

    webdav 干什么用的? 对于我来说,主要是用来同步文件的,n年以前,那时候还啥都不懂,要分享一个文件都是用qq/或者微信发,那时候就一个手机一个电脑,而且文件大部分是分享给认识的人. qq分享完全 ...

  10. C++笔记(12) 标准模板库STL

    STL提供了一组表示容器.迭代器.函数.函数对象和算法的模板.STL不是面向对象的编程,而是一种不同的编程模式--泛型编程. 容器:与数组类似的单元,可以存储若干个值,存储的值的类型相同: 算法:完成 ...