158 lines
3.4 KiB
HTML
158 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="referrer" content="no-referrer">
|
|
<title>Clock</title>
|
|
<style>
|
|
html {
|
|
user-select: none;
|
|
}
|
|
|
|
#date {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
#timer {
|
|
text-align: center;
|
|
font-size: 4rem;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
#img {
|
|
object-fit: cover;
|
|
z-index: -2;
|
|
display: block;
|
|
}
|
|
|
|
#mark {
|
|
z-index: -1;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.full-page {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<img id="img" class="full-page">
|
|
<div id="mark" class="full-page"></div>
|
|
<main class="full-page center">
|
|
<div id="date">00月00日</div>
|
|
<div id="timer">00:00</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
//px2rem
|
|
function setHtmlFontSize() {
|
|
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
|
|
const htmlDom = document.getElementsByTagName('html')[0]
|
|
if (htmlWidth >= 1200) htmlDom.style.fontSize = 1200 / 12 + 'px'
|
|
else htmlDom.style.fontSize = htmlWidth / 14 + 'px'
|
|
}
|
|
|
|
// 屏幕大小改变时触发
|
|
onresize = setHtmlFontSize
|
|
|
|
//进入全屏
|
|
function requestFullScreen() {
|
|
var de = document.body;
|
|
if (de.requestFullscreen) {
|
|
de.requestFullscreen();
|
|
} else if (de.mozRequestFullScreen) {
|
|
de.mozRequestFullScreen();
|
|
} else if (de.webkitRequestFullScreen) {
|
|
de.webkitRequestFullScreen();
|
|
}
|
|
}
|
|
|
|
// 获取元素
|
|
const timer = document.getElementById('timer')
|
|
const img = document.getElementById('img')
|
|
const date = document.getElementById('date')
|
|
|
|
// 是否显示冒号
|
|
let showSymbol = true
|
|
// 缓存分钟数判断换背景
|
|
let minute_cache = 0
|
|
// 处理显示时间
|
|
function clock() {
|
|
let now = new Date()
|
|
let hour = now.getHours() + ''
|
|
let minute = now.getMinutes() + ''
|
|
let month = (now.getMonth() + 1) + ''
|
|
let day = now.getDate() + ''
|
|
timer.innerHTML =
|
|
`${hour.padStart(2,'0')}<span ${showSymbol ? '' : 'style="opacity:0"'}>:</span>${minute.padStart(2,'0')}`
|
|
date.innerHTML = `${month.padStart(2,'0')}月${day.padStart(2,'0')}日`
|
|
showSymbol = !showSymbol
|
|
|
|
minute_cache != minute.padStart(2,'0') ? randomImg() : ''
|
|
minute_cache = minute.padStart(2,'0')
|
|
}
|
|
|
|
// 获取并设置随机的背景
|
|
function randomImg() {
|
|
let base_url = 'https://infinity-api.infinitynewtab.com/random-wallpaper?_='
|
|
base_url += new Date().getTime()
|
|
fetch(base_url)
|
|
.then(function (response) {
|
|
return response.json();
|
|
})
|
|
.then(res => {
|
|
let src = res.data[0].src.rawSrc
|
|
if(src.indexOf('undefined') != -1) {
|
|
randomImg()
|
|
return
|
|
}
|
|
img.src = src
|
|
localStorage.setItem('src', src)
|
|
});
|
|
}
|
|
|
|
// 初始化
|
|
function init() {
|
|
// 设置字体大小
|
|
setHtmlFontSize()
|
|
// 显示时间
|
|
clock()
|
|
// 每秒执行一次
|
|
setInterval(() => {
|
|
clock()
|
|
}, 1000)
|
|
// 取出背景图片地址
|
|
let src = localStorage.getItem('src')
|
|
// 如果第一次加载就随机一个，不是第一次就用上次的
|
|
src != null ? img.src = src : randomImg()
|
|
timer.addEventListener('click', randomImg)
|
|
// 全屏
|
|
date.addEventListener('click', requestFullScreen)
|
|
}
|
|
|
|
init()
|
|
|
|
</script>
|
|
|
|
</html>
|