随机古诗词

听风ღ᭄

于 2022-12-01 15:07:11 发布

阅读量1k

点赞数 1

分类专栏： HTML 文章标签： javascript css3 html5 前端

本文链接：https://blog.csdn.net/weixin_70054369/article/details/128132210

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

利用HTML CSS js 制作的随机游戏

<html>
<head>
    <meta charset="utf-8" />
    <title>随机古诗词</title>
    <style>
        #box {
            width: 1000px;
            margin: 0 auto;
            background: rgb(3, 0, 7);
            color: rgb(11, 160, 224);
            height: 1000px;
            line-height: 1000px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <center>
        <button onclick="gs()">古诗</button>
        <button onclick="gc()">古词</button>
        <button onclick="clo()">停止</button>
    </center>
    <script>
        var timer = "";//存放计时器
        var a = document.getElementById('box');//获取ID=box的标签(修改文字)
        var ar = ['满目山河空念远 落花风雨更伤春', '人面不知何处去 桃花依旧笑春风', '落霞与孤鹜齐飞 秋水共长天一色', '天生我材必有用 千金散尽还复来', 
        '除升旭日英雄路 垂老残阳没青冢 韶华倾负经风雨 岂惧寒窗落旧尘',
    '羁鸟恋旧林 池鱼思故渊'];//存放古诗的规则
        var ar1 = ['三军可夺帅也 匹夫不可夺志也', '青 取之于蓝而青于蓝 冰 水为之而寒于水', '有志者 事竟成 百二秦关终属楚 苦心人 天不负 三千越甲可吞吴',
        '山无棱 江水竭 冬雷震 夏之雪 天地合 乃敢与君绝','十年生死两茫茫 不思量 自难忘','暗相思 无处说 惆怅夜来烟月'];//存放古词的规则

        function gs() {
            timer = setInterval(function () {
                var num = parseInt(Math.random() * ar.length);
                a.innerHTML = ar[num];
            }, 100);
        }

        function gc() {
            timer = setInterval(function () {
                var num = parseInt(Math.random() * ar1.length);
                a.innerHTML = ar1[num]
            }, 700);
        }


        function clo() {
            clearInterval(timer);
        }
    </script>
</body>
</html>