前端练手项目2-名言警句生成_随机生成名人名言 js-CSDN博客

本文链接：https://blog.csdn.net/qq_43352505/article/details/129334314

js dom操作在页面生成名言警句展示

效果展示

在这里插入图片描述

项目难点

本项目与练手项目1的dom操作基本相同（document.getElementById（）获取到元素，innerHTML写入页面），只是css样式增加了
css样式
border-radius: 10px; 边框变圆；
box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 90%); 边框阴影，视觉上呈现立体效果；
主体部分进行弹性布局

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;  //垂直方向，默认是水平方向

函数

Math.floor(Math.random()*number) 获取随机整数

字符串操作-切片
.split() 截取字符串

项目源码

<!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>Document</title>
    <style>
        h3 {
            font-style: italic;
            /* font-family: 'Dancing Script', cursive; */
        }

        .bg {
            height: 100vh;
            background: radial-gradient(#0398FA, #6748A0);
        }

        .content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
        }

        .text {
            width: 900px;
            height: 400px;
            padding: 0 25px;
            border-radius: 10px;
            background-color: #F4EDEA;
            border: 10px solid #06BDC1;
            box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 90%);
        }

        .textarea {
            width: 800px;
            height: 100px;
            margin: 5.5em auto;
            font-size: 1.5rem;
            text-align: center;
        }

        #contentBtn {
            margin-top: 3vh;
            background-color: #06BDC1;
            color: white;
            border-radius: 5px;
            border: none;
            box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 90%);
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="content">
            <div class="text">
                <div class="textarea">
                    <p id="quotes"></p>
                    <h3 id="author"></h3>
                </div>
            </div>
            <button id="contentBtn">生成名言警句</button>
        </div>
    </div>
    <script>
        var obj = document.getElementById('quotes')
        var obj1 = document.getElementById('author')

        // 构建内容文件
        var ary = [
            "读万卷书，行万里路。——顾炎武 ",
            "少壮不努力，老大徒伤悲。——《长歌行》",
            "盛年不重来，一日难再晨。及时当勉励，岁月不待人。——陶渊明",
            "卑怯的人，即使有万丈的愤火，除弱草以外，又能烧掉什么呢?——鲁迅",
            "书是灵魂最好的麻醉剂。——钱伯斯",
            "用心不杂，乃是入神要路。——袁牧",
            "读好书就是同许多高尚的人谈话。——笛卡尔",
            "一万年太久，只争朝夕。——毛泽东",
            "读书志在圣贤，为官心存君国。——朱用纯",
            "学固不在乎读书，然不读书则义理无由明。——朱熹",
            "成功之道无他，惟悉力从事你的工作，而不消存沽名钓誉之心。——朗费罗",
            "莫扎特从不为永恒作曲，但是正因为这个理由，所以他的许多作品均是永恒的。——爱因斯坦",
            "今天所做之事勿候明天，自己所做之事勿候他人。——歌德",
            "我们愈是学习，愈觉得自己的贫乏。——雪莱",
            "失败带给我的经验与收获，在于我已经知道这样做不会成功的证明，下一次我可以避免同样的错误了。——爱迪生",
            "对明天的希望会驱走所有的悲伤。——奥修",
            "至乐莫如读书，至要莫如教子。——《增广贤文》",
            "智者千虑，必有一失;愚者千虑，必有一得。——《晏子春秋》",
            "外国语是人生斗争的一种武器。——马克思",
            "读书百遍，其义自现。——《三国志》",
            "死亡是最大的祸害，因为它断绝了希望。——哈兹里特",
            "人是活的，书是死的。活人读死书，可以把书读活。死书读活人，可以把人读死。——郭沫若",
            "书籍是在时代的波涛中航行的思想之船，它小心翼翼地把珍贵的货物运送给一代又一代。——培根",
            "一个人，如果要在事业上有所成就，需要七分学者气，三分才子气。学者气长到十分就会呆，才子气长到十分就会浮。——陈望道",
            "必须如蜜蜂一样，采过许多花，这才能酿出蜜来。--鲁迅",
            "学源于思，思源于疑。小疑则小进，大疑则大进。——谚语",
            "人生一征途耳，其长百年，我已走过十之七八回首前尘，历历在目，崎岖多于平坦，忽深谷，忽洪涛，幸赖桥梁以渡。桥何名欤?曰奋斗。——茅以升",
            "人生的最高理想是为人民谋利益。——德莱塞",
            "不动笔墨不读书。——徐特立",
            "我们要振作精神，下苦功学习。下苦功，三个字，一个叫下，一个叫苦，一个叫功，一定要振作精神，下苦功。——毛泽东",
            "博学之，审问之，慎思之，明辨之，笃行之。——《礼记》",
            "刻苦读书，积累资料，这是治学的基础。――秦牧",
            "我并没有什么方法，只是对于一件事情很长时间很热心地去考虑罢了。——牛顿",
            "不积跬步，无以至千里;不积小流，无以成江海。——荀子",
            "读书而不思考，等于吃饭而不消化。——波尔克",
            "辛勤的蜜蜂永没有时间的悲哀。——布莱克",
            "饱食、暖衣而无书教，则近于禽兽。——孟子",
            "人生的光荣，不在永远不失败，而在于能够屡扑屡起。——拿破仑",
            "要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒。——培根",
            "在人生的道路上，当你的希望一个个落空的时候，你也要坚定，要沉着。——朗费罗",
            "三万六千日，夜夜当秉烛。白日何短短，百年若易海。——李白",
            "读书贵神解，无事守章句。——徐洪钧",
            '提防那只念一本书的人。——拉丁谚语',
            "对一切人们的疾苦，希望是唯一价廉而普遍的治疗方法;它是俘虏的自由，病人的健康，恋人的胜利，乞丐的财富。——克鲁利",
            "一个爱书的人，他必定不致缺少一个忠实的朋友、一个良好的导师、一个可爱的伴侣、一个优婉的安慰者。——伊萨克·巴罗",
            '光明给我们经验，读书给我们知识。——奥斯特洛夫斯基',
            "希望本身是一种幸福，也许是这个世界能够提供的主要幸福。——塞缪尔·约翰逊",
            "书籍使人们成为宇宙的主人。——巴甫连柯",
            '书籍是人类知识的总结。书籍是全世界的营养品。——莎士比亚',
            "灵魂欲化庄周蝶，只爱书香不爱花。——童铨",
            '最明亮的欢乐火焰大概是由意外的火花点燃的。人生道路上不时散发出芳香的花朵，也是由偶然落下的种子自然生长出来的。——塞·约翰逊',
            '生之本质在于死，因此只有乐于生的人才能真正不感到死之苦恼。——蒙田',
            "读书何所求，将以通事理。——张维屏",
            "希望便是快乐，创造便是快乐。——冰心",
            "书籍是培植智慧的工具。——夸美纽斯",
            "读书如吃饭，善吃饭者长精神，不善吃饭者生疾病。——章学诚",
            "真正的读书使瞌睡者醒来，给未定目标者选择适当的目标。正当的书籍指示人以正道，使其避免误入歧途。——卡耐基",
            "精诚所至，金石为开。——《后汉书》",
            "生命如同寓言，其价值不在长短，而在内容。——塞内卡",
            "坚强的信念能赢得强者的心，并使他们变得更坚强。——白哲特",
            "希望在任何情况是都是必需的，如果没有希望的安慰，贫困、疾病、囚禁的悲惨境遇就会不能忍受。——约翰逊",
            "拥抱希望是穷人的粮食。——赫伯特",
            "希望是坚强的勇气，是新生的意志。——马丁·路德",
            "希望像一个家庭一样，没有它，你会觉得生活乏味;有了它，你又觉得天天为它辛劳，是一种烦恼。——马克·吐温",
            "读书何所求?将以通事理。——张维屏",
            "不去读书就没有真正的教养，同时也不可能有什么鉴别力。——赫尔岑",
            "日习则学不忘，自勉则身不坠。——徐干",
            "生存的小品文，必须是匕首，是投枪，能和读书一同杀出一条生存的血路来的东西。——鲁迅",
            "路漫漫其修道远，吾将上下而求索。——屈原",
        ]

        // 构造随机函数
       function Srandom (){
        var num = Math.floor(Math.random()*69)
        // console.log(num)
        return num
       }

        // 绑定点击事件
        contentBtn.onclick = function () {
            var str = ary[Srandom()].split('——')
            obj.innerHTML = str[0]
            obj1.innerHTML = "—— "+str[1]
        }

    </script>
</body>

</html>