更改样式 与 元素

assets/js/bing.js

@@ -0,0 +1,38 @@
+const https = require('https')
+const fs = require('fs')
+
+const options = {
+  hostname: 'www.bing.com',
+  port: 443,
+  path: '/HPImageArchive.aspx?format=js&idx=0&n=8',
+  method: 'GET'
+}
+
+const req = https.request(options, bing_res => {
+  let bing_body = [], bing_data = {};
+  bing_res.on('data', (chunk) => {
+    bing_body.push(chunk);
+  });
+  bing_res.on('end', () => {
+    bing_body = Buffer.concat(bing_body);
+    bing_data = JSON.parse(bing_body.toString());
+    let img_array = bing_data.images;
+    let img_url = [];
+    img_array.forEach(img => {
+      img_url.push(img.url);
+    });
+    var jsonpStr = "getBingImages(" + JSON.stringify(img_url) + ")";
+    fs.writeFile('./assets/json/images.json', jsonpStr, (err) => {
+      if (err) {
+        throw err;
+      }
+      console.log("JSON data is saved: " + jsonpStr);
+    });
+  });
+})
+
+req.on('error', error => {
+  console.error(error)
+})
+
+req.end()

assets/js/main.js

@@ -0,0 +1,104 @@
+var iUp = (function () {
+	var time = 0,
+		duration = 150,
+		clean = function () {
+			time = 0;
+		},
+		up = function (element) {
+			setTimeout(function () {
+				element.classList.add("up");
+			}, time);
+			time += duration;
+		},
+		down = function (element) {
+			element.classList.remove("up");
+		},
+		toggle = function (element) {
+			setTimeout(function () {
+				element.classList.toggle("up");
+			}, time);
+			time += duration;
+		};
+	return {
+		clean: clean,
+		up: up,
+		down: down,
+		toggle: toggle
+	};
+})();
+
+function getBingImages(imgUrls) {
+	/**
+	 * 获取Bing壁纸
+	 * 先使用 GitHub Action 每天获取 Bing 壁纸 URL 并更新 images.json 文件
+	 * 然后读取 images.json 文件中的数据
+	 */
+	var indexName = "bing-image-index";
+	var index = sessionStorage.getItem(indexName);
+	var panel = document.querySelector('#panel');
+	if (isNaN(index) || index == 7) index = 0;
+	else index++;
+	var imgUrl = imgUrls[index];
+	var url = "https://www.cn.bing.com" + imgUrl;
+	panel.style.background = "url('" + url + "') center center no-repeat #666";
+	panel.style.backgroundSize = "cover";
+	sessionStorage.setItem(indexName, index);
+}
+
+function decryptEmail(encoded) {
+	var address = atob(encoded);
+	window.location.href = "mailto:" + address;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+	// 获取一言数据
+	var xhr = new XMLHttpRequest();
+	xhr.onreadystatechange = function () {
+		if (this.readyState == 4 && this.status == 200) {
+			var res = JSON.parse(this.responseText);
+			document.getElementById('description').innerHTML = res.hitokoto + "<br/> -「<strong>" + res.from + "</strong>」";
+		}
+	};
+	xhr.open("GET", "https://v1.hitokoto.cn", true);
+	xhr.send();
+
+	var iUpElements = document.querySelectorAll(".iUp");
+	iUpElements.forEach(function (element) {
+		iUp.up(element);
+	});
+
+	var avatarElement = document.querySelector(".js-avatar");
+	avatarElement.addEventListener('load', function () {
+		avatarElement.classList.add("show");
+	});
+});
+
+var btnMobileMenu = document.querySelector('.btn-mobile-menu__icon');
+var navigationWrapper = document.querySelector('.navigation-wrapper');
+
+btnMobileMenu.addEventListener('click', function () {
+	if (navigationWrapper.style.display == "block") {
+		navigationWrapper.addEventListener('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
+			navigationWrapper.classList.toggle('visible');
+			navigationWrapper.classList.toggle('animated');
+			navigationWrapper.classList.toggle('bounceOutUp');
+			navigationWrapper.removeEventListener('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', arguments.callee);
+		});
+		navigationWrapper.classList.toggle('animated');
+		navigationWrapper.classList.toggle('bounceInDown');
+		navigationWrapper.classList.toggle('animated');
+		navigationWrapper.classList.toggle('bounceOutUp');
+	} else {
+		navigationWrapper.classList.toggle('visible');
+		navigationWrapper.classList.toggle('animated');
+		navigationWrapper.classList.toggle('bounceInDown');
+	}
+	btnMobileMenu.classList.toggle('social');
+	btnMobileMenu.classList.toggle('iconfont');
+	btnMobileMenu.classList.toggle('icon-list');
+	btnMobileMenu.classList.toggle('social');
+	btnMobileMenu.classList.toggle('iconfont');
+	btnMobileMenu.classList.toggle('icon-angleup');
+	btnMobileMenu.classList.toggle('animated');
+	btnMobileMenu.classList.toggle('fadeIn');
+});