Created
July 4, 2020 02:36
-
-
Save ybw2016v/42cbb71afea344e35c22e2abc84c6a01 to your computer and use it in GitHub Desktop.
用于嵌套的HTML页面
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<base target="_top" /> | |
<title>DTS iframe Page</title> | |
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> | |
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> | |
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> | |
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> | |
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
<style> | |
body{ | |
background-color: rgba(250, 250, 250, 0); | |
} | |
.dogname { | |
color: rgb(0, 117, 226); | |
position: absolute; | |
top: 25px; | |
left: 120px; | |
padding: 0 10px; | |
font-size: 160%; | |
font-weight: 500; | |
} | |
.dogavatar { | |
width: 80px; | |
/* min-width: 64px; */ | |
border-radius: 50%; | |
border-width: 2px; | |
border-color: blue; | |
} | |
.posttime { | |
background-color: aqua; | |
color: cadetblue; | |
position: absolute; | |
top: 75px; | |
left: 125px; | |
} | |
.card { | |
max-width: 800px; | |
margin-top: 2em; | |
margin-left: auto; | |
margin-right: auto; | |
background-color:rgba(250, 250, 250, 0.838); | |
opacity: 1; | |
} | |
.dog { | |
min-width: 350px; | |
max-width: 800px; | |
margin-top: 2em; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.waibao { | |
min-width: 350px; | |
background-color: rgba(250, 250, 250, 0); | |
/* opacity: 0; */ | |
} | |
.cont { | |
/* border: 2px solid cadetblue; */ | |
margin-top: 2em; | |
} | |
.uadog { | |
font-size: 0.6em; | |
color: darkgrey; | |
} | |
img { | |
max-width: 95%; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
.moredog { | |
margin-top: 2em; | |
margin-bottom: 2em; | |
max-width: 400px; | |
width: 50%; | |
margin-left: auto; | |
margin-right: auto; | |
border-radius: 10px; | |
background: linear-gradient(145deg, #69b9e6, #7ddbff); | |
box-shadow: 3px 3px 6px #63aed9, | |
-3px -3px 6px #87ecff; | |
} | |
.dixian { | |
font-size: 0.8em; | |
color:aqua; | |
margin-top: 32px; | |
/* margin: auto 0; */ | |
bottom: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="dogtalk" class="waibao"> | |
<!-- <div class="card"> | |
<div class="card-body"> | |
<img src="https://www.dogcraft.top/avatar.jpg" class="dogavatar"><span class="dogname">dogcraft</span> | |
<span class="posttime badge badge-pill badge-info">一天前 </span> | |
<div class="contain cont"> | |
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本 | |
<br> | |
测试文本测试文本测试文本测试文本测试文本测试文本测试文本 | |
</div> | |
</div> | |
<div class="card-footer"> | |
<span class="uadog"> Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu | |
Chromium/83.0.4103.61 Chrome/83.0.4103.61 Safari/537.36</span> | |
</div> | |
</div> --> | |
</div> | |
<div id="dogwaibao" class="dog text-center"> | |
<!-- <p class="dixian">我是有底线的</p> | |
<hr> --> | |
<button class="moredog" onclick="MoreDogItem()" id="ansdog">MORE 查看更多</button> | |
</div> | |
<script> | |
var Page = 1; | |
var ListDog = []; | |
var AllPages; | |
var ItemPage = 10; | |
var DogNow; | |
function DogTimeDif(dateDiff) { | |
var ResStr; | |
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数 | |
var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数 | |
var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数 | |
//计算相差分钟数 | |
var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数 | |
var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数 | |
//计算相差秒数 | |
var leave3 = leave2 % (60 * 1000) //计算分 | |
if (dayDiff >= 1) { | |
ResStr = `${dayDiff}天前 `; | |
} else if (hours >= 1) { | |
ResStr = `${hours}小时前 `; | |
} | |
else { | |
ResStr = `${minutes}分钟前 ` | |
} | |
return ResStr; | |
} | |
function AddCont(num) { | |
$.getJSON(`https://apid.dogcraft.top/api/talk/${num}`, function (data, status) { | |
DogNow = Date.now(); | |
ListDog = data.ResCont; | |
AllPages = Math.ceil(data.SunNumber / ItemPage); | |
for (let index = 0; index < ListDog.length; index++) { | |
const eledog = ListDog[index]; | |
var PostTime = Number(eledog.time); | |
TimeDif = DogNow - PostTime; | |
TimeStringDoge = DogTimeDif(TimeDif); | |
DogDate = new Date(PostTime); | |
TimeStringDoge2 = DogDate.toLocaleString(); | |
DogDateTime = TimeStringDoge + TimeStringDoge2; | |
var MkdownCont = marked(eledog.content); | |
var HtmlDog = `<div class="card"> | |
<div class="card-body" id="${Page}-${index + 1}"> | |
<img src="${eledog.avatar}" class="dogavatar"><span class="dogname">${eledog.name}</span> | |
<span class="posttime badge badge-pill badge-info">${DogDateTime} </span> | |
<div class="contain cont"> | |
${MkdownCont} | |
</div> | |
</div> | |
<div class="card-footer"> | |
<span class="uadog"> | |
${eledog.ua}</span> | |
</div> | |
</div>`; | |
$("#dogtalk").append(HtmlDog); | |
} | |
}) | |
} | |
AddCont(1); | |
function MoreDogItem() { | |
if (Page >= AllPages) { | |
// $("#ansdog").text("没有更多了") | |
console.log("没有更多了") | |
$("#dogwaibao").html(`<p class="dixian">我是有底线的</p> | |
<hr>`) | |
} else { | |
Page = Page + 1; | |
AddCont(Page); | |
if (Page == AllPages) { | |
console.log("没有更多了") | |
$("#dogwaibao").html(`<p class="dixian">我是有底线的</p> | |
<hr>`) | |
} | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment