学前端Day2 | 豆包MarsCode AI刷题

momolikepotato
108 阅读3分钟

  • 今天的课程是CSS样式的基础，用AI练构建了一个简单的输入显示：在输入框中输入文字后点击"Enter"，输入的文字将显示在上方的容器中。 image.png

  • input部分

    • input 常用的触发事件
    onfocusonbluroninputonchange
    当input框获取焦点时触发事件当input框失去焦点时触发事件当在input框内输入内容时触发，例如输入1，2，3，三个数字，就会触发三次事件当在input框内输入的内容前一次和后一次输入的内容不一致时触发事件
    • input 的常用css样式属性：border-radius、border、caret-color、outline、color

    outline:none //去掉input获取焦点时的边框

    border-radius: 5px; //定义input框的圆角为5px

    border：none //定义input框未获焦点时的边框未不存在

    caret-color: red; //定义input框内的光标颜色为红色

    color:red //input内输入的文字为红色

    input:hover{}

    • input的type常用的设置

    text：文本、button：按钮、checkbox：复选框(注意加name属性)、email：邮箱类型

    radio：单选框(注意加name属性)：单选框、file：上传文件、hidden：隐藏域、number：数字

    submit：提交按钮、date：年月日、datetime-local：年月日时分秒

image.png

  • display部分 image.png
  • 交互部分

输入文字并点击"Enter"后会在容器中显示，并且不会覆盖上次内容更新至最新显示内容部分，显示容器可滑动，每次发送后输入框清空。 

// 监听输入框的键盘事件
inputText.addEventListener('keypress', function(event) {
    // 检查是否按下了Enter键
    if (event.keyCode === 13) {
        // 获取输入框的值
        var inputValue = inputText.value.trim();
        // 如果输入不为空，则追加到显示区域
        if (inputValue) {
            // 创建一个新的div元素
            var newDiv = document.createElement('div');
            newDiv.classList.add('display-item');
            newDiv.textContent = inputValue;
            // 将新div追加到显示区域
            displayContainer.appendChild(newDiv);
            // 清空输入框以便下一次输入
            inputText.value = '';
            // 滚动到显示区域的最新内容处
            displayContainer.scrollTop = displayContainer.scrollHeight;
        }
    }
});

  • CSS position

    static（静态定位）relative（相对定位）fixed（固定定位）absolute（绝对定位）sticky（粘性定位）
    HTML 元素默认情况下的定位方式为 static。静态定位的元素不受 top、bottom、left 和 right 属性的影响。position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位 。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。注意：“被定位的”元素是其位置除 static 以外的任何元素。元素根据用户的滚动位置进行定位。粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止。然后将其“粘贴”在适当的位置（比如 position:fixed）。
avatar
文章
阅读
粉丝