简单地用VScode来写个记事本

最新推荐文章于 2024-07-10 10:16:01 发布

梨莓莓

最新推荐文章于 2024-07-10 10:16:01 发布

阅读量402

点赞数 1

文章标签： html css 前端 javascript

本文链接：https://blog.csdn.net/weixin_45377368/article/details/129805258

版权

本文将指导你如何利用Visual Studio Code（VScode）创建一个简单的HTML记事本，结合CSS进行样式设计，并通过JavaScript实现基本功能。首先，创建HTML文件，设置页面结构；接着，添加CSS来美化界面；最后，运用JavaScript增加交互性，如文本保存和加载。通过这个实践，你可以更好地理解前端开发的基础流程。

摘要由CSDN通过智能技术生成

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>解忧杂货店</title>
    <link rel="stylesheet" type="text/css" href="/CSS/index.css" />
    <link rel="shortcut icon" type="favicon.ico" href="/favicon_logosc/favicon-32x32.png">
</head>

<body style="background-color:pink;">
<!-- 主体区域 -->
<section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
        <h1 style="font-family:STXingkai" >解忧杂货店</h1>
        <input autofocus="autofocus" autocomplete="off" placeholder="有什么能为你解答的吗？"
               class="new-todo" />
               
    </header>
    <!-- 列表区域 -->
    <section class="main">
        <ul class="todo-list">

            <li class="todo" >
                <div class="view">
                    <span class="index">1</span>
                    <label>你有什么想问的吗？</label>
                    <button class="destroy"></button>
                </div>
            </li>

        </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" >
      <span class="todo-count">
        <strong >1</strong> 待回消息
      </span>
        <button class="clear-completed">
            Clear
        </button>
    </footer>
</section>
<!-- 底部 -->
<footer class="info">
    <p>
        <a href="#">
            <img src="/imges/梨莓莓（145）.jpg" />
        </a>
    </p>
</footer>
</body>
</html>

<script src="/js/记事本.js"></script>

/*
* 1: 点击按钮追加li
*   思路分析：
*       1：获取添加按钮#add 注册点击事件
*       2：获取.header下的.new-todo的value值，追加到新创建的li中的结构里。
*           2.1：注意新创建的li是有属性的。class="todo"
*           2.2:li里不是简单的放入获取的value值，而是有其他的结构，也需要我们创建和追加
*           2.3：li里的span标签的内容innerHTML值应该是动态变化。
* */

// 获取相关对象
let input = document.querySelector('.header .new-todo');
//获取ul对象。整个页面就这一个ul 任何地方操作的都是这个对象。放