三个按钮和古诗以及后续添加的三个广告
按钮:上一首、下一首、随机一首
古诗:序号、题目、内容
广告:两侧、底部
浏览三百首古诗
- <input type="button" value="上一首" id="pre">
- <input type="button" value="下一首" id="next">
- <input type="button" value="抽一首" id="rand">
标题h3
段落p
- <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>
- <!-- 此处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>
- //定义向前向后和抽一首的按钮
- 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);
- }
没啥讲的,就是三个广告涉及到定位,下面是全部代码
- <!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>
后感:
好久之前写的,现在才来捡起来,好多都忘记了,不知道啥意思(还好有注释和度娘),不过看起来还没有忘光,那还算没白学。
之前觉得写的蛮好,现在回头看看又觉得代码写的有些麻烦,这是不是说明我进步啦?哈...
最后,祝大家天天开心,学习进步!