master

分支 (2)

管理

管理

master

fxzzzz

a-set
/
ndoe(王旭鹏).html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    body{
        overflow: hidden;
    }
    h1{
        color: black;
        border-bottom: 2px dashed black;
        padding:1%
    }
    li{
        font-size: 30px;
        list-style: none ;

    }
    #addBtn{
        width: 100px;
        background-color: white;
        border-radius: 20px;
        margin-top: 16px;
        font-size: 20px;
        border: 0;
        /* background-color: skyblue; */
        /* border-radius: 50px; */
        margin-left: 36px;
    }
    li button{
        float: right;
        margin-right: 100px;
        width: 100px;
        border: 0;
        background-color: white;
        margin-top: 16px;
        font-size: 20px;
    }
</style>
</head>
<body>
    <div class="add" style="display: none;">
        标题：<input id="title" type="text" value=""><br><br>
        内容：<textarea id="content" id="" cols="30" rows="10" value=""></textarea><br><br>
        <button id="submit">提交</button>
        <button id="over">完成</button>
        <button id="re" style="display:none">修改</button>

    </div>


<h1>笔记列表</h1>
<button id="addBtn">添加笔记</button>
<ul>
</ul>

<script>
    let addBtn = document.querySelector('#addBtn');
    let div = document.querySelector('div');
    let ul = document.querySelector('ul')
    let title = document.querySelector('#title')
    let content = document.querySelector('#content')
    let subBtn = document.querySelector('#submit')
    let over = document.querySelector('#over');
    let re = document.querySelector('#re');


    // 点击添加弹出
    addBtn.onclick =function(){
        div.style.display = 'block'
    }
    // 添加笔记
  subBtn.onclick = function(){
        ajax.post('http://localhost/addNote',(x)=>{
            // console.log(x.data._id);
            if(x.code == 2000){
                let li = document.createElement('li')
                li.id = x.data._id
                console.log(li.id);
                ul.appendChild(li)
                //标题
                let titleP = document.createElement('p')
                titleP.innerHTML = `${title.value}`

                li.appendChild(titleP)
                // 内容
                let contentP = document.createElement('p')

                contentP.innerHTML = `${content.value} `
                contentP.style.display='none'
                li.appendChild(contentP)

                //删除按钮
                let delBtn = document.createElement('button')
                delBtn.innerHTML = '删除'
                li.appendChild(delBtn)
                delBtn.onclick = function(){
                    ajax.get(`http://localhost/deleteNote?id=${li.id}`,()=>{
                        ul.removeChild(li)
                    })
                }

                // 查看按钮
                let seeBtn = document.createElement('button')
                seeBtn.innerHTML = '查看'
                li.appendChild(seeBtn)
                seeBtn.onclick = function(){
                    ajax.get(`http://localhost/noteList?id=${li.id}`,()=>{
                        if(contentP.style.display == 'none'){
                            contentP.style.display='block'
                        }else{
                            contentP.style.display='none'
                        }
                    })
                }

                // 修改按钮
                let re = document.querySelector('#re')
                let reBtn = document.createElement('button')
                reBtn.innerHTML='修改'
                li.appendChild(reBtn)
                reBtn.onclick = function(){
                    div.style.display='block'
                    re.style.display = 'block'

                }
                re.onclick = function(){
                    console.log(content.value);
                    console.log(title.value);
                    ajax.post('http://localhost/updateNote',(x)=>{
                      titleP.innerHTML =title.value
                      contentP.innerHTML = content.value
                    // console.log(x.data);
                    // console.log(titleP.innerHTML );
                    } ,{
                        title:title.value,
                        content:content.value,
                        id:li.id,
                    })}
            }
        },
        {
            title:title.value,
            content:content.value
        },
  )
    }
    // 隐藏添加界面
    over.onclick = function(){
        div.style.display = 'none'
    }
    // 封装函数
    let ajax = {
            get: function(url, cb, data) {
                let x = new XMLHttpRequest();
                x.open('get', url )
                x.send();
                x.onreadystatechange = function() {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            cb(x.response)
                        }
                    }
                }
            },
            post: function(url, cb, data) {
                let x = new XMLHttpRequest();
                let str = Object.keys(data).map(item => `${item}=${data[item]}`).join('&');
                x.open('post', url);
                x.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                x.send(str);
                x.responseType="json"
                x.onreadystatechange = function() {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            cb(x.response)
                        }
                    }
                }
            }
        }
</script>
</body>
</html>