您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

古诗三百首（html）

时间：01-14来源：作者：点击数：24

1、分析

1.1、外观

三个按钮和古诗以及后续添加的三个广告

按钮：上一首、下一首、随机一首

古诗：序号、题目、内容

广告：两侧、底部

1.2、功能

浏览三百首古诗

2、编写

2.1、html部分

2.1.1、按钮

    <input type="button" value="上一首" id="pre">
    <input type="button" value="下一首" id="next">
    <input type="button" value="抽一首" id="rand">

2.1.2、古诗

标题h3

段落p

 <div class="gushi">
        <h3></h3>
        <p></p>
    </div>

2.1.3、广告（没必要，纯属娱乐）

<div class="guanggao1">
        <a href="#">
            <img
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.j9hzrzHvHLbiR0iTSUWe2wHaEH?w=315&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
        </a>
    </div>
    <div class="guanggao2">
        <a href="#">
            <img
                src="https://ts1.cn.mm.bing.net/th/id/R-C.4be92dcd4126aeb16a1bef9e5e1ca788?rik=CCluIJquuC8j2g&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20190612%2f29318854_150652110861_2.jpg&ehk=%2bSMUf%2fgzJNECsRCG3JOco2gdtGcknlBbC2PIpZRu790%3d&risl=&pid=ImgRaw&r=0">
        </a>
    </div>
    <div class="guanggao3">
        <a href="#">
            <img
                src="https://tse1-mm.cn.bing.net/th/id/R-C.fc075d3ec7a688cdf0ae215f6c3ff5fe?rik=PKpTHA6oL6mLdQ&riu=http%3a%2f%2fwww.quanboo.com%2faa%2f0712.gif&ehk=jGUkkw0kCujAmTuUPhZpkP%2f8v%2f1%2bl%2f2cH7IqrBPcIhc%3d&risl=&pid=ImgRaw&r=0">
        </a>
    </div>

2.2、js部分（重点）

2.2.1、三百首古诗字符串（这里使用字符串过多，使用src引入）

 <!-- 此处poem结尾的字符串补全bug（加一个301）是为了补全字符串处理中poem.search(arr[i]), poem.search(arr[i + 1])的bug，因为如果不加301的话最后一个就会特殊化没有poem.search(arr[i + 1]) -->
    <script src="https://youzelian.github.io/ts300.js">
    </script>

2.2.2、抓取并定义

//定义向前向后和抽一首的按钮
var pre = document.getElementById("pre");
var next = document.getElementById("next");
var rand = document.getElementById("rand");
//定义标题和内容
var h3 = document.querySelector("h3");
var p = document.querySelector("p");

2.2.3、准备工作

// 搜索所有的数字并放在数组arr[]中
var arr = poem.match(/\d+(.\d+)?/g);
var i;
var poemall = [],
    poemtitle = [],
    poemcontent = [];

2.2.4、将字符串中的古诗存入数组中（难点）

//将字符串分成数组保存
for (i = 0; i < arr.length; i++) {
    // substring() 方法从字符串中提取两个索引（位置）之间的字符，并返回子字符串
    // search() 在字符串中搜索一个值并返回第一个匹配的位置
    // 这里poemall数组元素是一整个古诗(包括题目和内容)
    poemall[i] = poem.substring(poem.search(arr[i]), poem.search(arr[i + 1]));
    // 这里的poemtitle数组和poemcontent数组是为了分开古诗的标题和内容
    poemtitle[i] = poemall[i].substring(0, poemall[i].search("\n"));
    poemcontent[i] = poemall[i].substring(poemall[i].search("\n"), poemall[i].length);
}

2.2.5、三个按钮的实现

//定义功能show，分开标题和内容
function show() {
    h3.textContent = poemtitle[i];
    p.textContent = poemcontent[i];
}
i = 0;
show(i);
// 定义pre向前按钮
pre.onclick = function () {
    if (i == 0) {
        i = arr.length - 2;
        show(i);
    }
    else {
        i--;
        show(i);
    }
}
// 定义next向后按钮
next.onclick = function () {
    if (i == 299) {
        i = 0;
        show(i);
    }
    else {
        i++;
        show(i);
    }
}
// 定义rand抽一首按钮
rand.onclick = function () {
    // Math.random()求得0~299.0的随机数
    // Math.round()是对里面的数进行四舍五入
    i = Math.round(Math.random() * 299);
    show(i);
}

2.3、css部分

没啥讲的，就是三个广告涉及到定位，下面是全部代码

3、全部代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第八次作业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #e1e0c7;
            text-align: center;
        }

        input {
            width: 60px;
            height: 60px;
            background-color: #ccffff;
            border-radius: 30px;
            border: none;
            font-size: 18px;
        }

        input:hover {
            background-color: #66cc99;
            color: white;
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }

        .gushi {
            white-space: pre-line;
        }

        h3 {
            font: 500 50px 楷体, 微软雅黑;
        }

        p {
            font: 33px/45px 楷体, 微软雅黑;
        }

        .yu {
            /* 布局定位属性 */
            float: right;
            /* 自身属性 */
            margin-top: 250px;
            /* 文本属性 */
            font-size: 15px;
        }

        .guanggao1 a img,
        .guanggao2 a img {
            position: fixed;
            top: 200px;
            width: 350px;
            height: 150px;
            border-radius: 30px;
            transition: all 1s;
        }

        .guanggao1 a img {
            left: 0;
        }

        .guanggao2 a img {
            right: 0;
        }

        .guanggao3 a img {
            position: fixed;
            bottom: 0;
            left: 50%;
            margin-left: -500px;
            width: 1000px;
            height: 100px;
            transition: all 1s;
        }

        .guanggao1 a img:hover,
        .guanggao2 a img:hover {
            width: 500px;
            height: 200px;
        }

        .guanggao3 a img:hover {
            width: 1100px;
            height: 150px;
        }
    </style>
    <!-- 此处poem结尾的字符串补全bug（加一个301）是为了补全字符串处理中poem.search(arr[i]), poem.search(arr[i + 1])的bug，因为如果不加301的话最后一个就会特殊化没有poem.search(arr[i + 1]) -->
    <script src="https://github.com/youzelian/youzelian.github.io/blob/main/web2022/ts300.js">
    </script>
</head>

<body>
    <input type="button" value="上一首" id="pre">
    <input type="button" value="下一首" id="next">
    <input type="button" value="抽一首" id="rand">
    <div class="gushi">
        <h3></h3>
        <p></p>
    </div>
    <div class="guanggao1">
        <a href="#">
            <img
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.j9hzrzHvHLbiR0iTSUWe2wHaEH?w=315&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
        </a>
    </div>
    <div class="guanggao2">
        <a href="#">
            <img
                src="https://ts1.cn.mm.bing.net/th/id/R-C.4be92dcd4126aeb16a1bef9e5e1ca788?rik=CCluIJquuC8j2g&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20190612%2f29318854_150652110861_2.jpg&ehk=%2bSMUf%2fgzJNECsRCG3JOco2gdtGcknlBbC2PIpZRu790%3d&risl=&pid=ImgRaw&r=0">
        </a>
    </div>
    <div class="guanggao3">
        <a href="#">
            <img
                src="https://tse1-mm.cn.bing.net/th/id/R-C.fc075d3ec7a688cdf0ae215f6c3ff5fe?rik=PKpTHA6oL6mLdQ&riu=http%3a%2f%2fwww.quanboo.com%2faa%2f0712.gif&ehk=jGUkkw0kCujAmTuUPhZpkP%2f8v%2f1%2bl%2f2cH7IqrBPcIhc%3d&risl=&pid=ImgRaw&r=0">
        </a>
    </div>
    <div class=" yu">--copy right to 尤泽利安</div>
    <script>
        //定义向前向后和抽一首的按钮
        var pre = document.getElementById("pre");
        var next = document.getElementById("next");
        var rand = document.getElementById("rand");
        //定义标题和内容
        var h3 = document.querySelector("h3");
        var p = document.querySelector("p");
        // 搜索所有的数字并放在数组arr[]中
        var arr = poem.match(/\d+(.\d+)?/g);
        //准备工作
        var i;
        var poemall = [],
            poemtitle = [],
            poemcontent = [];
        //将字符串分成数组保存
        for (i = 0; i < arr.length; i++) {
            // substring() 方法从字符串中提取两个索引（位置）之间的字符，并返回子字符串
            // search() 在字符串中搜索一个值并返回第一个匹配的位置
            // 这里poemall数组元素是一整个古诗(包括题目和内容)
            poemall[i] = poem.substring(poem.search(arr[i]), poem.search(arr[i + 1]));
            // 这里的poemtitle数组和poemcontent数组是为了分开古诗的标题和内容
            poemtitle[i] = poemall[i].substring(0, poemall[i].search("\n"));
            poemcontent[i] = poemall[i].substring(poemall[i].search("\n"), poemall[i].length);
        }
        //定义功能show，分开标题和内容
        function show() {
            h3.textContent = poemtitle[i];
            p.textContent = poemcontent[i];
        }
        i = 0;
        show(i);
        // 定义pre向前按钮
        pre.onclick = function () {
            if (i == 0) {
                i = arr.length - 2;
                show(i);
            }
            else {
                i--;
                show(i);
            }
        }
        // 定义next向后按钮
        next.onclick = function () {
            if (i == 299) {
                i = 0;
                show(i);
            }
            else {
                i++;
                show(i);
            }
        }
        // 定义rand抽一首按钮
        rand.onclick = function () {
            // Math.random()求得0~299.0的随机数
            // Math.round()是对里面的数进行四舍五入
            i = Math.round(Math.random() * 299);
            show(i);
        }
    </script>
</body>

</html>