古诗三百首（html）
2024-05-08 18:18:48
前言：好久没发文章了，想复习一下html，顺便写一篇之前的作业，三百首古诗
目录
1、分析
1.1、外观
1.2、功能
2、编写
2.1、html部分
2.1.1、按钮
2.1.2、古诗
2.1.3、广告（没必要，纯属娱乐）
2.2、js部分（重点）
2.2.1、三百首古诗字符串
2.2.2、抓取并定义
2.2.3、准备工作
2.2.4、将字符串中的古诗存入数组中 （难点）
2.2.5、三个按钮的实现
2.3、css部分
3、全部代码
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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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://youzelian.github.io/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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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>后感：
好久之前写的，现在才来捡起来，好多都忘记了，不知道啥意思（还好有注释和度娘），不过看起来还没有忘光，那还算没白学。
之前觉得写的蛮好，现在回头看看又觉得代码写的有些麻烦，这是不是说明我进步啦？哈...
最后，祝大家天天开心，学习进步！
古诗三百首（html）相关推荐
- python+jieba分析唐诗三百首
python+jieba分析唐诗三百首 代码及源文件地址:poem_300 代码保证符合命名规范.遵循PEP8规则.导包顺序清晰.尽量做到复用性和不罗嗦 记得修改文件路径哟(^U^)ノ~YO 如果有帮 ...
- 唐诗三百首-免费无广告版-iPhone,iPad通用
熟读唐诗三百首,不会作诗也会吟.<唐诗三百首>是一部流传很广的唐诗选集.唐朝(618年-907年)二百九十年间,是中国诗歌发展的黄金时代,云蒸霞蔚,名家辈出,唐诗数量多达五万首.孙琴安&l ...
- 唐诗三百首微电影合集（300集）
诗词是最美的语言,是迷醉心怀的智慧.古典诗词,寥寥数语,却四两拨千斤,字字千锤百炼,就这么几个字,或勾勒出恢弘清雅的画卷,或传递出幽咽情愫.苍茫之志.以下是我们推荐给大家的古诗词微电影合集,大家可以收 ...
- 用C#来学习唐诗三百首和全唐诗
Begin 最近把项目做完了,闲来无事,就想做点好玩的事情,刚好前几天下载了[唐诗三百首]和[全唐诗]这两个txt文件,正好用C#来整理一下. 然后导出QData格式,可以给其他软件读取. 以后弄个开 ...
- HTML5唐诗三百首,《唐诗三百首》中王维5首五言绝句，代表了盛唐绝句的最高成就！...
王维(701年?-761年),字摩诘,唐代山水田园诗派代表人物之一,人称"诗佛".<唐诗三百首>中王维5首五言绝句,代表了盛唐绝句的最高成就. 1/<鹿柴> ...
- 【Elasticsearch】es 7.8.0 唐诗三百首写入 Elasticsearch 会发生什么
1.概述 本文参考 项目实战 01:将唐诗三百首写入 Elasticsearch 会发生什么? 并且进行实战,对其进行一点修改. 1.实战项目 将唐诗三百首写入Elasticsearch会发生什么? ...
- 《唐诗三百首》中的童年记录
这是学习笔记的第 2192 篇文章 读完需要 9 分钟 速读仅需7分钟 唐诗三百首在最近读了几遍,你可能不了解的<唐诗三百首>,看了下<诗词大会>发现真是人才济济.一方面是词穷 ...
- python唐诗分析综合_Python利器之胎教《唐诗三百首》文本分析
事情是这样的,你们听我讲: 有一天,孕妈妈在家庭群里对准爸爸说,在某猫上买本<唐诗三百首>吧,每天给宝宝读一首唐诗,作为胎教.有图有真相: 作为好吃懒做的准爸爸,听到这个消息的瞬间,表情是 ...
- 你可能不了解的《唐诗三百首》
这是学习笔记的第 2189 篇文章 读完需要 9 分钟 速读仅需3分钟 对于唐诗,自己其实是一种复杂的心情,好像会背些,但是用的时候却都想不起.<唐诗三百首>算是重温古诗的一种方式,借着让 ...
最新文章
- 获清华特奖又上“最强大脑”！这位90后学神去一线抗疫的理由是……
- php调用系统浏览器代码,php判断操作系统或浏览器实现代码
- jdbc mysql 函数 慢_java jdbc addBatch()提交mysql速度过慢
- python编程在哪里写-python3.6.3 安装好了在哪里编写程序
- lamp安装zabbix（全源码安装）
- ubuntu等linux下自定义设置程序代理工具proxychains简介
- WebCrack：网站后台弱口令批量检测工具
- 前端学习（3061）：vue+element今日头条管理-接口分页参数说明
- 22. 链表中倒数第k个节点
- sklearn 线性回归
- 2020腾讯全球数字生态大会：产业互联网战略升级，数字优先引领未来经济发展
- C++使用boost::bind 订阅消息中的返回函数传入多个参数
- python独一无二的路_独一无二的Python基础学习——可用作面试
- R语言初级教程: R编程环境的搭建
- 鸟哥的Linux私房菜——第三部分|第19章 认识与分析日志文件
- Codeforces1457 C. Bouncing Ball（思维+dp）
- 每周分享第二期：人工智能对未来工作的影响
- 解决Maven无法使用ojdbc依赖的问题
- loss scale的理解
- 主元素、主元素II、主元素III