<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./a.png" type="image/x-icon">
<title>每天60秒读懂世界</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-family: "iao";
}
body {
background-color: black;
}
#ulA {
width: 500px;
margin: 0px auto;
background-color: white;
padding: 20px 20px;
}
#liB {
width: 500px;
word-break: normal;
margin-top: 30px;
font-size: 30px;
}
@font-face {
font-family: "iao";
src: url(./XiaolaiSC-Regular.ttf);
}
#liA {
width: 500px;
position: relative;
}
#p1 {
width: 500px;
height: 420px;
background-color: rgb(249, 75, 128);
}
#p2 {
position: absolute;
top: 140px;
left: 135px;
font-size: 80px;
color: white;
text-align: center;
}
#p4 {
color: rgb(249, 75, 128);
}
#p5 {
width: 50px;
display: inline-block;
text-align: left;
}
#p6 {
width: 390px;
height: 50px;
text-align: center;
color: rgb(249, 75, 128);
display: inline-block;
font-size: 30px;
line-height: 50px;
}
#p7 {
width: 50px;
display: inline-block;
text-align: right;
}
</style>
</head>
<body>
<ul id="ulA">
<li id="liA">
<!-- <p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<hr>
<p id="p5"></p>
<p id="p6"></p>
<hr> -->
</li>
</ul>
<script>
var fred;
fetch("https://api.vvhan.com/api/60s?type=json").then(r => r.json()).then(r => {
fred = r;
console.log(fred);
fred_name = r.name;
for (let i = 0; i < 1; i++) {
console.log(fred.time);
liA.innerHTML += `
<p id="p1">
<p id="p2">${fred.time[2]}</p>
</p>
<p id="p4">NEWS</p>
<hr>
<p id="p5">${fred.time[1]}</p>
<p id="p6">${fred_name}</p>
<p id="p7">${fred.time[0]}</p>
<hr>
`;
}
for (let i = 0; i < fred.data.length; i++) {
console.log(fred.data[i]);
ulA.innerHTML += `
<li id = "liB">${i > 14 ? "" : i + 1 + "、"}${fred.data[i]}</li>
`;
}
});
</script>
</body>
</html>
[
百度云文件下载链接：https://pan.baidu.com/s/1B2Gb0BFJRL4bV9xkvTxUqw?pwd=wyjv
提取码：wyjv