HTML客户端记事本，美观实用还免费，复制就用！福利来啦~

本文链接：https://blog.csdn.net/chenzhi0122/article/details/138084708

我们在做任何一个项目时，都可能需要给客户/用户准备一些小惊喜、小工具

大家可能也试过，上网搜索html记事本...

但是呢，往往会遇到代码只能保存一条消息，不够美观等等的问题

那这里，小编给大家发个福利——新版的客户端记事本

它有漂亮的CSS，美观的样式，绝对赶超你能百度到的95%的html前端记事本！

那代码如下，养成好习惯，代码拿走，欢迎关注获得更多干货，点赞+收藏，这样我才能给大家写出更多美观实用的好东西！

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CZ工作室-客户端记事本</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            padding: 20px;
        }
    
        h2 {
            color: #333;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            animation: glow 1s ease-in-out infinite alternate;
        }
    
        @keyframes glow {
            0% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
            100% { text-shadow: 2px 2px 10px rgba(255, 255, 0, 0.5); }
        }
    
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }
    
        input[type="text"]:focus, textarea:focus {
            outline: none;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.5);
        }
    
        input[type="button"] {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px ;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
    
        input[type="button"]:hover {
            background-color: #45a049;
        }
    
        input[type="button"]:active {
            background-color: #388e3c;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
        }
    
        hr {
            border: none;
            height: 2px;
            background-color: #ccc;
            margin: 20px 0;
        }
    
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }  
    
        th, td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }
    
        th {
            background-color: #f2f2f2;
        }
    
        #show tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    
        #show tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
	<h2>CZ工作室客户端记事本</h2>
	标题：<input id="title" name="title" type="text" size="60"/><br/>
	事件信息：<textarea id="content" name="content" cols="50" rows="8"></textarea><br/>
	添加人：<input id="user" name="user" type="text"/><br/>
	<input type="button" value="添加事件" onclick="addMsg();"/>
	<input type="button" value="清除事件" onclick="clearMsg();"/>
	<hr/>
	<table style="width:800px">
		<tr>
			<th>标题</th>
			<th>事件内容</th>
			<th>添加人</th>
			<th>添加时间</th>
		</tr>
		<tbody id="show"></tbody>
	</table>
	<script>
		var loadMsg = function()
		{
			var tb = document.getElementById("show");
			tb.innerHTML = "";
			for(var i = 0, j = 0 ; i < localStorage.length ; i++)
			{
				var key = localStorage.key(i);
				if (key.indexOf('_fk') == 0)
				{
					var date = new Date();
					date.setTime(key.substring(3));
					var datestr = date.toLocaleDateString()
						+ "&nbsp;" + date.toLocaleTimeString();
					var msgStr = localStorage[key];
					var msg = JSON.parse(msgStr);
					var row = tb.insertRow(j++);
					row.insertCell(0).innerHTML = msg.title;
					row.insertCell(1).innerHTML = msg.content;
					row.insertCell(2).innerHTML = msg.user;
					row.insertCell(3).innerHTML = datestr;
				}
			}
		}
		var addMsg = function()
		{
			var titleElement = document.getElementById("title");
			var contentElement = document.getElementById("content");
			var userElement = document.getElementById("user");
			var msg = {
				title: titleElement.value,
				content: contentElement.value,
				user: userElement.value
			}
			var time = new Date().getTime();
			localStorage['_fk' + time] = JSON.stringify(msg);
			titleElement.value = "";
			contentElement.value = "";
			userElement.value = "";
			alert("数据已保存。");
			loadMsg();
		}
		function clearMsg()
		{
			localStorage.clear();
			alert("全部事件信息已被清除！");
			loadMsg();
		}
		window.onload = loadMsg();
	</script>
<p>&copy;CZ工作室 2021~2024</p>
</body>