代码由 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. deepin下的系统,如何为root用户添加密码

  2. 🔥🔥v1.9.2-httpsok快速申请免费谷歌SSL证书

    v1.9.2-httpsok快速申请免费谷歌SSL证书 介绍 httpsok 是一个便捷的 HTTPS 证书自动续签工具,专为 Nginx .OpenResty 服务器设计.已服务众多中小企业,稳定. ...

  3. Shopify Theme 开发 —— 性能优化

    一.概述 关于 Shopify Theme 的性能优化,通常有以下几点: 1.卸载未使用的应用程序 有些 app 会在 theme 里面插入一些代码,即使 app 未被使用,也可能会加载一些脚本文件, ...

  4. AIRIOT答疑第7期|如何快速提升物联网项目交付速度?

    平台+模板,套上就能用!贼拉快! AIRIOT提供物联网低代码平台+多套行业案例模板,针对于有明确项目的服务商,用平台已经配置好的节点数.功能模块.流程,直接上手干项目! AIRIOT解答: 多套物联 ...

  5. Semantic Kernel入门系列:利用YAML定义prompts functions

    引言 在上一章节我们熟悉了prompts functions(提示函数)的创建,我们了解了PromptTemplateConfig中各个属性的简单使用.Semantic Kernel允许我们利用多种方 ...

  6. unity 新input system 鼠标点在ui上检测的两种方法

    哪种有用就用哪种.EventSystem.current.IsPointerOverGameObject()有可能不好使. using System.Collections.Generic; usin ...

  7. MLP实现minist数据集分类任务

    1. 数据集 minist手写体数字数据集 2. 代码 ''' Description: Author: zhangyh Date: 2024-05-04 15:21:49 LastEditTime: ...

  8. go 基数排序

    package main import ( "fmt" ) func SelectSortMax(arr []int) int { arrLen := len(arr) if ar ...

  9. 拼凑一个ABP VNext管理后台拼凑一个ABP VNext管理后台

    介绍# 本项目前后端分离,后端采用ABP VNext框架,前端Vue.项目地址: https://github.com/pojianbing/AuthCenter 目前包含的模块有: 身份认证管理 I ...

  10. ReplayKit 启动录制按钮 RPSystemBroadcastPickerView 的使用

    一.RPSystemBroadcastPickerView 介绍 ReplayKit12自从iOS11公布以来,提供了iOS系统级别的录屏能力(也就是录制自身App以外,手机屏幕内容)的能力,有一个非 ...