JavaScript-日记本笔记本

最新推荐文章于 2022-09-28 16:14:07 发布

南方@后来

最新推荐文章于 2022-09-28 16:14:07 发布

阅读量860

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44897872/article/details/121069899

版权

JavaScript 日记应用数据存储 localStorage 前端开发

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

纯JavaScript写的日记本一共两个页面一个是书写日记页面,在页面书写日记标题和日记内容,另一个页面是查看日记的页面.

页面一

第一个页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .w {
            margin: 0 auto;
            width: 1200px;
        }

        header {
            position: relative;
            height: 100px;
            background-color: #e8d7b4;
            border-bottom: 2px solid black;
            /* padding-bottom: 10px; */
        }

        .text {
            position: relative;
            background-color: #e8d7b4;
        }

        textarea {
            display: block;
            width: 900px;
            height: 800px;
            background-color: #e6c68c;
            margin: 0 auto;
            border: 0;
            /* 禁止获取焦点时候的边框 */
            outline: none;
        }


        .celc {
            position: absolute;
            bottom: 0;
            width: 50px;
            background-color: #ffffff;
            border: 0;
        }

        .sever {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 50px;
            background-color: #ffffff;
            border: 0;
        }

        .topic {
            width: 300px;
            height: 30px;
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -150px;
            border: 0;
            outline: none;
            text-align: center;
        }

        .look {
            position: absolute;
            right: 51px;
            bottom: 0;
            width: 100px;
            background-color: #ffffff;
            border: 0;
        }

        header p {
            font-size: 30px;
            text-align: center;
            color: #ffffff;
            /* font-weight: 700; */
        }
    </style>
</head>

<body>
    <header class="w">
        <p>前端日记</p>
        <button class="celc">重写</button>
        <input type="text" class="topic" placeholder="题目">
        <button class="sever">保存</button>
        <button class="look">查看日记</button>
    </header>
    <div class="text w">
        <textarea name="" id="" cols="30" rows="10" class="txta"></textarea>
        <!-- <div class="catalog">
            <ul></ul>
        </div> -->
    </div>
</body>
<script>
    const celc = document.querySelector('.celc')
    const topic = document.querySelector('.topic')
    const sever = document.querySelector('.sever')
    const txta = document.querySelector('.txta')
    const ul = document.querySelector('.catalog ul')
    const look = document.querySelector('.look')
    if (localStorage.getItem('wod') == null) {
        let son = {}

        localStorage.setItem('wod', JSON.stringify(son))
    }
    
    let texts = JSON.parse(localStorage.getItem('wod'))
    let topc
    let ta
    let newt
    let newul = {}
    topic.oninput = function () {
        topc = topic.value
    }
    txta.oninput = function () {
        ta = txta.value
    }
    topc = topic.value
    ta = txta.value
    sever.onclick = function () {
        texts[`${topc}`] = ta
        // console.log(texts)
        newt = JSON.stringify(texts)
        localStorage.setItem('wod', newt)
        alert('保存成功')
        //获取数组  
    }
    look.onclick = function () {
        location.assign('./案例1页面2.html')
    }
    celc.onclick = function () {
        location.reload()
    }
    newul = JSON.parse(localStorage.getItem('wod'))
    console.log(newul)
</script>

</html>

页面二:页面查看自己写过的日记记录自己的美好生活

第二个页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            background-color: #e8d7b4;
            border-bottom: 1px solid black;
            text-align: center;
            height: 25px;
            line-height: 25px;
            cursor: pointer;
            font-size: 14px;
            /* color: red; */

        }

        .banner {
            margin: 0 auto;
            width: 900px;
            height: 800px;
        }

        .left {
            float: left;
            width: 150px;
            height: 800px;
            background-color: #e8d7b4;
        }

        .right {
            float: right;
            width: 750px;
            height: 800px;
            background-color: #e6c68c;
        }

        .top1 {
            height: 20px;
            text-align: center;
            background-color: #e8d7b4;
            border-bottom: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="left">
            <div class="top1">目录</div>
            <ul class="cata"></ul>
        </div>
        <div class="right"></div>
    </div>
    <script>
        const cata = document.querySelector('.cata')
        const cont = document.querySelector('.right')
        let pic = JSON.parse(localStorage.getItem('wod'))
        console.log(pic)
        for (let k in pic) {
            cata.innerHTML += `<li>${k}</li>`
        }
        const lis = document.querySelectorAll('li')
        lis.forEach(function (item) {
            item.onclick = function () {

                cont.innerText = pic[item.innerText]
                console.log(item)
                lis.forEach(function (ite) {
                    ite.style.backgroundColor = '#e8d7b4'
                })
                item.style.backgroundColor = '#fff'
            }
        })
    </script>
</body>

</html>