三个按钮和古诗以及后续添加的三个广告
按钮:上一首、下一首、随机一首
古诗:序号、题目、内容
广告:两侧、底部
浏览三百首古诗
<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>
后感:
好久之前写的,现在才来捡起来,好多都忘记了,不知道啥意思(还好有注释和度娘),不过看起来还没有忘光,那还算没白学。
之前觉得写的蛮好,现在回头看看又觉得代码写的有些麻烦,这是不是说明我进步啦?哈...
最后,祝大家天天开心,学习进步!