ybw2016v/fm.html

## fm.html
<!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>
	<!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>