辣鸡记事本——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>'
            }
        }
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好...
    一个敲代码的前端妹子阅读 857评论 0 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,451评论 0 44
  • 尊敬的老师,亲爱的同学们。我是二年级六班的分成。今天我发表的是关于感恩的演讲搞。感恩常在,生活的每一天都充满着感恩...
    孙二阳阅读 344评论 0 0
  • 因为是压“祟”钱啊。 从《中国楹联文化宝典》看来的故事,据说古时候,有一个叫“祟”的小妖,身黑手白,第年年三十晚上...
    lsh524阅读 648评论 0 3
  • 在我看来,不管是做什么事情我们都切忌三心二意,马马虎虎不认真,否则我们真的会是一事无成终身抱憾。 现实生活中有很多...
    阿俊xi阅读 217评论 0 0