Skip to content

Commit

Permalink
闭包,全局污染坏文明
Browse files Browse the repository at this point in the history
  • Loading branch information
@KawaiiZapic
KawaiiZapic committed Feb 14, 2021
1 parent 9ae77e9 commit 0eba54a
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 148 deletions.
44 changes: 24 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,26 +102,30 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ClassicOldSong/[email protected]/typinyin.css">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Google+Sans" media="none" onload="this.media='all'">
<script>
var feedType = "json";
var feedPath = "feed.php";
var bgArr = [{
"url": "static/img/background-1.jpg",
"thumb": "static/img/background-1-thumb.jpg"
},{
"url": "static/img/background-2.jpg",
"thumb": "static/img/background-2-thumb.jpg"
}];
var senArr = [
{
ch: ["This is an example."],
py: ["This is an example."],
}, {
ch: ["这是","一个","示例","."],
py: ["zhe'shi","yi'ge","shi'li","."],
}
];
</script>
<script src="https://cdn.jsdelivr.net/gh/ClassicOldSong/typinyin.js@master/typinyin.min.js"></script>
<script src="static/js/main.js"></script>
<script>
(function () {
var feedType = "json";
var feedPath = "feed.php";
var bgArr = [{
"url": "static/img/background-1.jpg",
"thumb": "static/img/background-1-thumb.jpg"
},{
"url": "static/img/background-2.jpg",
"thumb": "static/img/background-2-thumb.jpg"
}];
var senArr = [
{
ch: ["This is an example."],
py: ["This is an example."],
}, {
ch: ["这是","一个","示例","."],
py: ["zhe'shi","yi'ge","shi'li","."],
}
];

Init(feedType, feedPath, bgArr, senArr);
})();
</script>
</html>
259 changes: 131 additions & 128 deletions static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,146 +13,149 @@ NodeList.prototype.forEach = NodeList.prototype.forEach || function (callback) {
}
};

function qSlt(selector) {
return document.querySelector(selector);
}
function Init(feedType, feedPath, bgArr, senArr) {

function qSltAll(selector) {
return document.querySelectorAll(selector);
}
function dateParser (str){
var reg = new RegExp("([0-9]{2}) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec){1} ([0-9]{4})");
reg = reg.exec(str);
if(!reg){return false;}
var monthMap = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = reg[1];
var month = monthMap.lastIndexOf(reg[2])+1;
var year = reg[3];
return year+"-"+month+"-"+day;
}
function setArtTip(content) {
qSlt(".article-content").classList.add("empty");
qSlt(".article-content").innerHTML = content;
}
function qSlt(selector) {
return document.querySelector(selector);
}

function randomSet(set) {
for (var i = 0; i < set.length; i++) {
var r = Math.floor(Math.random() * (set.length - i));
var p = set[r];
set[r] = set[i];
set[i] = p;
function qSltAll(selector) {
return document.querySelectorAll(selector);
}
}
function articleOutput(data){
for (var i = 0; i < data.length; i++) {
qSlt(".article-content").innerHTML += '<p class="article-item"><a target="_blank" class="article-title" href="' + data[i].link + '">' + data[i].title + '</a><span class="article-time">' + data[i].timestamp + '</span></p>';
function dateParser (str){
var reg = new RegExp("([0-9]{2}) (Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec){1} ([0-9]{4})");
reg = reg.exec(str);
if(!reg){return false;}
var monthMap = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = reg[1];
var month = monthMap.lastIndexOf(reg[2])+1;
var year = reg[3];
return year+"-"+month+"-"+day;
}
function setArtTip(content) {
qSlt(".article-content").classList.add("empty");
qSlt(".article-content").innerHTML = content;
}
}

var feed = new XMLHttpRequest();
feed.open("GET", feedPath, true);
feed.addEventListener("load", function () {
qSlt(".article-container").classList.add("loaded");
if (feed.status !== 200) {
setArtTip('<i class="fa fa-warning"></i><p class="article-empty-tip">暂时无法连接到博客</p>');
return;
function randomSet(set) {
for (var i = 0; i < set.length; i++) {
var r = Math.floor(Math.random() * (set.length - i));
var p = set[r];
set[r] = set[i];
set[i] = p;
}
}
try {
if(feedType === "json"){
var data = JSON.parse(feed.responseText);
if (!data || data.status === -1) {
throw new Error();
}
data = data.data;
} else if(feedType === "xml"){
var xml = feed.responseXML;
if(!xml){
throw new Error();
}
var data = [];
if(xml.querySelector("rss") != null){
xml.querySelectorAll("channel item").forEach(function (v,i){
if(i > 7){ return; }
data.push({
"link": v.querySelector("link").innerHTML,
"timestamp": dateParser(v.querySelector("pubDate").innerHTML),
"title": v.querySelector("title").innerHTML
function articleOutput(data){
for (var i = 0; i < data.length; i++) {
qSlt(".article-content").innerHTML += '<p class="article-item"><a target="_blank" class="article-title" href="' + data[i].link + '">' + data[i].title + '</a><span class="article-time">' + data[i].timestamp + '</span></p>';
}
}

var feed = new XMLHttpRequest();
feed.open("GET", feedPath, true);
feed.addEventListener("load", function () {
qSlt(".article-container").classList.add("loaded");
if (feed.status !== 200) {
setArtTip('<i class="fa fa-warning"></i><p class="article-empty-tip">暂时无法连接到博客</p>');
return;
}
try {
if(feedType === "json"){
var data = JSON.parse(feed.responseText);
if (!data || data.status === -1) {
throw new Error();
}
data = data.data;
} else if(feedType === "xml"){
var xml = feed.responseXML;
if(!xml){
throw new Error();
}
var data = [];
if(xml.querySelector("rss") != null){
xml.querySelectorAll("channel item").forEach(function (v,i){
if(i > 7){ return; }
data.push({
"link": v.querySelector("link").innerHTML,
"timestamp": dateParser(v.querySelector("pubDate").innerHTML),
"title": v.querySelector("title").innerHTML
});
});
});
} else if(xml.querySelector("feed") != null) {
xml.querySelectorAll("feed entry").forEach(function (v,i){
if(i > 7){ return; }
data.push({
"link": v.querySelector("link").getAttribute("href"),
"timestamp": v.querySelector("published").innerHTML.slice(0,10),
"title": v.querySelector("title").innerHTML
} else if(xml.querySelector("feed") != null) {
xml.querySelectorAll("feed entry").forEach(function (v,i){
if(i > 7){ return; }
data.push({
"link": v.querySelector("link").getAttribute("href"),
"timestamp": v.querySelector("published").innerHTML.slice(0,10),
"title": v.querySelector("title").innerHTML
});
});
});
} else {
throw new Error();
} else {
throw new Error();
}
}
} catch (e) {
setArtTip('<i class="fa fa-warning"></i><p class="article-empty-tip">暂时无法连接到博客</p>');
return;
}
} catch (e) {
setArtTip('<i class="fa fa-warning"></i><p class="article-empty-tip">暂时无法连接到博客</p>');
return;
}
data.length === 0 ? setArtTip('<i class="fa fa-inbox"></i><p class="article-empty-tip">暂时没有文章</p>') : articleOutput(data);
data.length === 0 ? setArtTip('<i class="fa fa-inbox"></i><p class="article-empty-tip">暂时没有文章</p>') : articleOutput(data);

});
feed.addEventListener("error", function () {
qSlt(".article-container").classList.add("loaded");
setArtTip('<i class="fa fa-warning"></i><p class="article-empty-tip">暂时无法连接到博客</p>');
});
feed.send();
var sBg = bgArr[Math.floor(Math.random() * bgArr.length)];
qSlt(".background-layer").style.backgroundImage = "url(" + sBg.thumb + ")";
var bgLoader = new Image();
bgLoader.src = sBg.url;
var bgTimeout = -1;
});
feed.addEventListener("error", function () {
qSlt(".article-container").classList.add("loaded");
setArtTip('<i class="fa fa-warning"></i><p class="article-empty-tip">暂时无法连接到博客</p>');
});
feed.send();
var sBg = bgArr[Math.floor(Math.random() * bgArr.length)];
qSlt(".background-layer").style.backgroundImage = "url(" + sBg.thumb + ")";
var bgLoader = new Image();
bgLoader.src = sBg.url;
var bgTimeout = -1;

function bgHandler() {
bgTimeout === -1 ? 0 : clearTimeout(bgTimeout);
qSlt(".background-layer").style.backgroundImage = "url(" + sBg.url + ")";
qSlt(".background-layer").classList.remove("loading");
}
function bgHandler() {
bgTimeout === -1 ? 0 : clearTimeout(bgTimeout);
qSlt(".background-layer").style.backgroundImage = "url(" + sBg.url + ")";
qSlt(".background-layer").classList.remove("loading");
}

bgLoader.complete ? bgHandler() : (function () {
bgLoader.addEventListener("load", bgHandler);
bgTimeout = setTimeout(function () {
qSlt(".background-layer").classList.add("loading");
}, 1000);
})();
var doki = new Typinyin();
randomSet(senArr);
doki.setOptions({
sentences: senArr,
startDelay: 1000,
typeSpeed: 100,
pause: 3000,
backSpeed: 60,
cursorChar: "|",
loop: true,
});
window.addEventListener("DOMContentLoaded", function () {
qSlt(".circle-line").addEventListener("animationiteration", function () {
doki.attach(".dokidoki-text");
qSlt(".self-avatar").classList.add("finished");
qSlt(".content-layer").classList.add("finished");
setTimeout(function () {
document.body.classList.remove("locked");
qSlt(".content-layer").classList.remove("finished");
qSlt(".self-avatar").classList.add("no-delay");
doki.init();
}, 1500);
qSltAll(".switcher-btn").forEach(function (v) {
var id = v.id.substr(-1);
v.addEventListener("click", function () {
qSlt(".self-wrapper").style.transform = "translateX(-" + 33.3 * (parseInt(id) - 1) + "%)";
qSlt(".btn-select-indicator").style.left = "" + 33.3 * (parseInt(id) - 1) + "%";
qSlt(".selected").classList.remove("selected");
v.classList.add("selected");
bgLoader.complete ? bgHandler() : (function () {
bgLoader.addEventListener("load", bgHandler);
bgTimeout = setTimeout(function () {
qSlt(".background-layer").classList.add("loading");
}, 1000);
})();
var doki = new Typinyin();
randomSet(senArr);
doki.setOptions({
sentences: senArr,
startDelay: 1000,
typeSpeed: 100,
pause: 3000,
backSpeed: 60,
cursorChar: "|",
loop: true,
});
window.addEventListener("DOMContentLoaded", function () {
qSlt(".circle-line").addEventListener("animationiteration", function () {
doki.attach(".dokidoki-text");
qSlt(".self-avatar").classList.add("finished");
qSlt(".content-layer").classList.add("finished");
setTimeout(function () {
document.body.classList.remove("locked");
qSlt(".content-layer").classList.remove("finished");
qSlt(".self-avatar").classList.add("no-delay");
doki.init();
}, 1500);
qSltAll(".switcher-btn").forEach(function (v) {
var id = v.id.substr(-1);
v.addEventListener("click", function () {
qSlt(".self-wrapper").style.transform = "translateX(-" + 33.3 * (parseInt(id) - 1) + "%)";
qSlt(".btn-select-indicator").style.left = "" + 33.3 * (parseInt(id) - 1) + "%";
qSlt(".selected").classList.remove("selected");
v.classList.add("selected");
});
});
});
}, {once: true});
});
}, {once: true});
});
}
console.log("\n %c Present %c By Zapic \n\n", "color: #fff; background: #fb7299; padding:5px 0;", "background: #efefef; padding:5px 0;");

0 comments on commit 0eba54a

Please sign in to comment.