js结合localStorage紫萼一个简陋的记事本

最新推荐文章于 2020-12-19 14:55:33 发布

雕琢时光纸戆

最新推荐文章于 2020-12-19 14:55:33 发布

阅读量259

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102827390

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

没有写样式，感兴趣的的可以去antd或者bs上拿点样式
主要点将你输入的内容永久的存下并填充到页面，稍微难点的是获取事件并将其转化为自己想要的格式
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#fixed {
				position: fixed;
				top: -100%;
				background-color: blanchedalmond;
				opacity: 0.6;
				width: 100%;
				height: 100px;
				transition: all .3s;
			}

			#fixed.show {
				top: 0px;
			}

			#addBtn {
				position: fixed;
				right: 20px;
				top: 20px;
				height: 50px;
				width: 50px;
				font-size: 20px;
				line-height: 50px;
				opacity: 0.7;
			}

			#button {
				width: 20;
				height: 20px;

			}
			#list{
				position: relative;
				top: 100px;
			}
		</style>
	</head>
	<body>
		
		<button type="button" id="addBtn">+</button>
		<table id="fixed">

			<tr>
				<td>标题</td>
				<td><input type="text" id="title" /></td>
			</tr>
			<tr>
				<td>内容</td>
				<td><input type="text" id="content" /></td>
			</tr>
			<tr>
				<td colspan="2"><button type="button" id="button">录入犯罪记录</button></td>
			</tr>
		</table>
		<hr>
		<ul id="list">

		</ul>
		<script type="text/javascript">
			var titleInput = document.getElementById('title')
			var contentInput = document.getElementById('content')
			var submitBtn = document.getElementById('button')
			var listUl = document.getElementById('list')
            

			var noteList = [


			];
			var tpl = '<li>' +
				'<p>{--date--}</p>' +
				'<h1>{--title--}</h1>' +
				'<h2>{--content--}</h2>' +
				'</li>'+
				'<hr>'
				
			var render = function() {
				var html = ''

				for (var i = 0; i < noteList.length; i++) {
					var theTime = noteList[i].date
					var theDate = new Date(theTime)
					var year = theDate.getFullYear()
					var month = theDate.getMonth() + 1
					var date = theDate.getDate()
					var hours = theDate.getHours()
					var min = theDate.getMinutes()
					var s = theDate.getSeconds()
					var day = theDate.getDay()
					min = min < 10 ? '0' + min : min
					s = s < 10 ? '0' + s : s,
						hours = hours < 10 ? '0' + hours : hours
					var dateStr = year + '年' + month + '月' + date + '日 ' + hours + '时' + min + '分' + s + '秒'+'—————————————————————————————————'+'星期'+day


					html += tpl.replace('{--date--}', dateStr)
						.replace('{--title--}', noteList[i].title)
						.replace('{--content--}', noteList[i].content)
				}
				listUl.innerHTML = html
				console.log(html)
			}
			//获取需要的值
			submitBtn.addEventListener('click', function() {
				var title = titleInput.value
				var content = contentInput.value

				//验证
				if (title.length == 0 || content.length == 0) {
					
					return
				}
				//构建数据

				// var now= new Date()
				// var year = now.getFullYear()
				// var month = now.getMonth()+1
				// var date = now.getDate()
				// var hours = now.getHours()
				// var min = now.getMinutes()
				// var s = now.getSeconds()
				//    min = min <10 ? '0'+ min :min
				// s = s <10 ? '0'+ s :s,
				// hours = hours<10 ? '0'+ hours : hours

				// var dateStr = year +'-'+month+'-'+date+' '+hours+':'+min+':'+s
				var note = {
					title: title,
					content: content,
					date: new Date().getTime()
				}
				//将数据添加到noteList
				noteList.push(note)
				//将数据添加到localStorage
				localStorage.setItem('noteList', JSON.stringify(noteList))
				noteList = JSON.parse(localStorage.getItem('noteList'))

				//重新渲染
				render()
				//点击提交之后,将提交的框框隐藏
				document.getElementById('fixed').className = ''
				//将输入框清空
				titleInput.value = ''
				contentInput.value = ''
			})

			noteList = JSON.parse(localStorage.getItem('noteList'))
			if (noteList) {
				//空数组
			} else {
				noteList = []
			}
			render()


			document.getElementById('addBtn').addEventListener('click', function() {
				document.getElementById('fixed').className = 'show'
			})
			
		</script>
	</body>
</html>

雕琢时光纸戆

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js结合localStorage紫萼一个简陋的记事本

没有写样式，感兴趣的的可以去antd或者bs上拿点样式主要点将你输入的内容永久的存下并填充到页面，稍微难点的是获取事件并将其转化为自己想要的格式代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <styl...
复制链接

扫一扫

专栏目录