没有写样式,感兴趣的的可以去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>