辣鸡记事本——dom

作者: 失而复得_ | 来源:发表于2019-12-01 18:54 被阅读0次

辣鸡记事本——dom
垃圾男朋友
"辣鸡，辣鸡"
option在IE的隐藏问题
简单DOM操作练习
辣鸡
辣鸡
辣鸡
辣鸡
辣鸡

就不说废话了，直接给代码吧，功能就是简单的记事本功能，主要用了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>'
            }
        }
    }
}