1-3 点击按钮添加div元素

最新推荐文章于 2023-04-19 12:46:19 发布

却是

最新推荐文章于 2023-04-19 12:46:19 发布

阅读量2.5k

点赞数

文章标签： javascript html css

原文链接：https://mp.weixin.qq.com/s/u1z009G2lYZK-SGFCXJhyw

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

案例模仿：链接: https://mp.weixin.qq.com/s/u1z009G2lYZK-SGFCXJhyw

效果图

未按按钮前
按了三次
在这里插入图片描述
下面展示一些 Web代码。

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

<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>fighting</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #293654;
        }

        h3 {
            margin: 30px 0;
            font-size: 20pxpx;
            color: #fff;
            text-align: center;
        }

        #content {
            margin: 10px 0;
            font-size: 8px;
            color: #cb6a29;
            text-align: center;
        }

        div {
            text-align: center;
        }

        button {
            width: 190px;
            height: 40px;
            margin: 30px 0;
            background-color: #777aff;
            border: 1px solid #fff;
            border-radius: 4px;
            color: #fff;
            font-size: 8px;
        }
    </style>
</head>

<body>
    <h3>给自己一句鼓励的话</h3>
    <div id="content"></div>
    <div>
        <button class="button" onclick="addText()">鼓励自己一下</button>
    </div>

    <script>
        let titles = [
            '目前是学习前端小课的第二天，要加油啊！',
            '你是最棒哒！',
            '待你学成归来，就是繁华盛开之日！',
            '哪怕是枯燥的过程也要好好享受！'
        ];
        let addText = function () {
            let index = Math.floor(Math.random() * titles.length + 0);
            let div = document.createElement("div");
            let textNode = document.createTextNode(titles[index]);
            div.appendChild(textNode); //先把文本给div元素
            div.style.lineHeight = 2; //让div有换行效果
            let contentDiv = document.getElementById('content');
            //把div元素添加至id为content的节点中
            contentDiv.appendChild(div);  
        }
    </script>
</body>

</html>