2025年3月15日 星期六 甲辰(龙)年 月十四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > 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>

后感:

好久之前写的,现在才来捡起来,好多都忘记了,不知道啥意思(还好有注释和度娘),不过看起来还没有忘光,那还算没白学。

之前觉得写的蛮好,现在回头看看又觉得代码写的有些麻烦,这是不是说明我进步啦?哈...

最后,祝大家天天开心,学习进步!

e157fa1f18054cb7a1fe734d6c809c46.jpeg
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门