就不说废话了，直接给代码吧，功能就是简单的记事本功能，主要用了DOM，初学者可以做做，就当练手。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>辣鸡记事本</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>辣鸡记事本</h1>
<input type="text" name="inner_test" id="text" onKeyDown = "out(event)"> <!--后面是键盘按下去时出现的发生的例子-->
<button id="btn" onclick="show()" >提交</button>
<div id="big"></div>
</body>
<script language="JavaScript" src="js/js.js"></script>
</html>
CSS：
*{
padding:0;
margin:0;
}
body{
text-align: center;
width: 1200px;
margin:0 auto;
list-style:none;
}
#big{
margin:0 50px;
padding:0;
}
.big1 {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 30px;
float: left;
}
.small1 {
width: 100%;
height: 25px;
padding: 0 30px; /*?*/
line-height: 25px;
}
span {
text-align: right;
width: 20px;
height: 20px;
margin: 0 0 0 60px;
}
img {
width: 20px;
height: 20px;
}
.small2 {
width: 100%;
height: 180px;
text-align: left;
border-top: 1px solid black;
}
textarea {
width: 99%;
height: 95%;
text-align: left;
}
/*btn不用设置宽高，会被撑开*/
js
/**
* Created by ASUS on 2019/11/26.
*/
function out(event){
if(event.keyCode ==13) {
show();
}
else {
return false;
}
}
function show(){
var text=document.getElementById('text');
var btn=document.getElementById('btn');
var big=document.getElementById('big');
var content=text.value;
if(text.value.trim()==""){
alert("您好像忘记输入文字了");
return false;
}
var big1=document.createElement('div');
big1.className="big1";
big.appendChild(big1);
var small1=document.createElement('div');
small1.className="small1";
big1.appendChild(small1);
var small2=document.createElement('div');
small2.className="small2";
big1.appendChild(small2);
var writing=document.createElement('textarea');
small2.appendChild(writing);
writing.innerHTML=content;
var count=document.getElementsByClassName("small1");
for(var i=0;i<count.length;i++){
var sum=i+1;
count[i].innerHTML='node'+sum+'<span><img src="./图片/x.png"></span>'
}
writing.value="";
var dele=document.getElementsByClassName("small1");
for(var j=0;j<dele.length;j++){
dele[j].onclick=function(){
big.removeChild(this.parentNode);
var order=document.getElementsByClassName("small1");
for(var k=0;k<order.length;k++){
var s=k+1;
order[k].innerHTML='node'+s+'<span><img src="./图片/x.png"></span>'
}
}
}
}
