辣鸡记事本——dom

就不说废话了，直接给代码吧，功能就是简单的记事本功能，主要用了DOM，初学者可以做做，就当练手。
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'
    }
    writing.value="";

    var dele=document.getElementsByClassName("small1");
    for(var j=0;j'
            }
        }
    }
}