案例-表白墙简单实现

文章目录

效果展示

初始画面

提交内容后画面(按键按下)

代码区

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    .total {
        width: 400px;
        margin: 0px auto; /*上下、左右*/
    }
    h1 {
        text-align: center;
        padding-bottom: 30px;
    }
    p {
        text-align: center;
        color: gray;
    }
    .div1 {
        display: flex;
        justify-content: center; /*水平方向*/
        align-items: center; /*垂直方向*/
        padding-top: 5px;
    }
    span {
        width: 80px;
        height: 30px;
    }
    #edit {
        width: 200px;
        height: 30px;
    }
    .submit {
        width: 280px;
        height: 30px;
        background-color: rgba(248, 236, 7, 0.942);
        border: none;
        border-radius: 5px;
    }
    .submit:active{
        background-color: grey;
    }
</style>
<body>
    <div class="total">
        <h1>表白墙</h1>
        <p>输入后请点击提交,会将信息显示在表格中</p>
        <div class="div1">
            <span>谁:</span><input id="edit" class="who" type="text">
        </div>
        <div class="div1">
            <span>对谁:</span><input id="edit" class="ofwho" type="text">
        </div>
        <div class="div1">
            <span>说什么</span><input id="edit" class="what" type="text">
        </div>
        <div class="div1">
            <input class="submit" type="button" value="提交" onclick="submit()">
        </div>
    </div>
</body>
<script>
    function submit(){
        let containDiv = document.querySelectorAll('#edit')
        console.dir(containDiv)
        let from = containDiv[0].value
        let to = containDiv[1].value
        let message = containDiv[2].value
        console.log(from+'对'+to+'说'+message)
        // 创建div
        let nodeDiv = document.createElement('div')
        nodeDiv.className = 'div1'
        nodeDiv.innerHTML = from+'对'+to+'说'+message
        console.log(nodeDiv)
        // 尾插div
        let nodeparent = document.querySelector('.total')
        nodeparent.appendChild(nodeDiv)
    }
</script>
</html>
相关推荐
IT瘾君1 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库1 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端1 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪2 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程2 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常2 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中3 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木3 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法