Skip to content

Commit

Permalink
添加自动模式页面
Browse files Browse the repository at this point in the history
  • Loading branch information
@1pone
1pone committed Jun 11, 2020
1 parent 1bc3da8 commit f787597
Show file tree
Hide file tree
Showing 7 changed files with 480 additions and 0 deletions.
20 changes: 20 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
## Kindle拯救计划

TODO完成auto页面

TODO 添加24小时制，ampm改善

| 浅色模式路径 | 深色模式路径 | 自动模式路径 | 功能模块 | 离线支持 | 说明 |
| ------------ | ------------ | ------------ | ------------------ | :------: | :--: |
| index | dark | auto | 一言 + 时钟 + 天气 | ✕ | √ |
| clock | clockDark | clockAuto | 时钟 | √ | √ |
| yiyan | yiyanOff | yiyanAuto | 一言 + 时钟 + 天气 | √ | ✕ |
| weibo | weiboDark | weiboAuto | 微博热搜+时钟+天气 | ✕ | ✕ |
| | | | | | |

#### 说明

1. 路径省略时默认为index路径，即浅色模式，一言 + 时钟 + 天气功能。
2. 自动模式根据当前时间自动切换深浅色模式，深色模式开启时间为晚上7点到早上6点。
3. 信息更新频率：一言/1小时，天气/20分钟，微博热搜/20分钟。
4. 当页面布局有偏差时请尝试手动刷新页面。
313 changes: 313 additions & 0 deletions auto.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,313 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>　</title>

<style>
@media screen and (min-width: 500px) {
html {font-size: 16px}
}
@media screen and (min-width: 1000px) {
html {font-size: 28px}
}
@font-face {
font-family: 'iconfont';
src: url('./font/iconfont.eot');
src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
url('./font/iconfont.woff2') format('woff2'),
url('./font/iconfont.woff') format('woff'),
url('./font/iconfont.ttf') format('truetype'),
url('./font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
color: #000000;
background-color: #ffffff;
margin: 0;
padding: 0;
}

ul {
list-style: none;
line-height: 2rem;
}

.page {
position: fixed;
width: 100.5%;
height: 100%;
}

.hitokoto_container {
height: 20%;
margin: 1.25rem;
}

.hitokoto_main {
position: relative;
text-align: center;
font-size: 1.5rem;
}

.brackets-l{
position: absolute;
top: 0;
left: 0;
}

.brackets-r{
position: absolute;
bottom: 0;
right: 0;
}

#hitokoto {
padding: 1.875rem 2.5rem;
}

#from {
float: right;
font-size: 1rem;
margin: 0.5rem;
}

.time_container {
position: relative;
height: 40%;
width: 100%;
top: 0;
margin: auto;
text-align: center;
}

#apm {
display: inline-block;
font-size: 2rem;
font-weight: 600;
line-height: 3.75rem;
position: absolute;
top: 2rem;
left: 2rem;
}

.time {
font-size: 12.5rem;
display: inline-block
}

.date {
font-size: 3rem;
}

.weather_container {
height: 40%;
text-align: center;
}

#weaTitle {
margin-left: 2.5rem;
font-size: 1.5rem;
}

#weaImg {
display: inline-block;
margin-right: 2.5rem;
}

.iconfont {
font-size: 7.5rem;
width: 7.5rem;
}

#weaTemp {
display: inline-block;
margin-right: 2.5rem;
}

.tempNum {
display: inline-block;
font-size: 6.875rem;
}

.symbol {
display: inline-block;
font-size: 3rem
}

#weaInfo {
display: inline-block;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</head>

<body>
<div class="page">
<!-- <div id="screensize"></div> -->
<div class="hitokoto_container">
<div class="hitokoto_main">
<div class="brackets-l">『</div>
<div id="hitokoto"></div>
<div class="brackets-r">』</div>
</div>
<div id="from"></div>
</div>

<div class="time_container">
<div id="apm"></div>
<div class="time" id="time">00:00</div>
<div class="date" id="date">1月1日 星期一</div>
</div>

<div class="weather_container">
<p id="weaTitle"></p>
<div id="weaImg"></div>
<div id="weaTemp"></div>
<div id="weaInfo"></div>

</div>
</div>


<script>
// 深浅色模式标示
var lightMode = true
// 获取设备显示尺寸
// var width = window.screen.width
// var height = window.screen.height
// document.getElementById('screensize').innerHTML = '屏幕分辨率的宽：' + width + ' ' + '屏幕分辨率的高：'+height

// 创建XMLHttpRequest对象
function createXHR(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
// 一言模块
function hitokoto() {
var xhr = createXHR();
xhr.open('GET','https://v1.hitokoto.cn?encode=json&charset=utf-8',true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
var data = JSON.parse(this.responseText)
document.getElementById('hitokoto').innerHTML = data.hitokoto
document.getElementById('from').innerHTML =data.from_who ? "「" + data.from + " " + data.from_who + "」" : "「" + data.from + "」"
}
}
xhr.send(null);
}

hitokoto()
setInterval("hitokoto()", 60 * 1000 * 60)

// 时钟模块
function clock() {
var date = new Date()
var utc8DiffMinutes = date.getTimezoneOffset() + 480
date.setMinutes(date.getMinutes() + utc8DiffMinutes)

var hour = date.getHours()

// 20点后6点前启用深色模式
if (hour > 19 || hour < 6) {
if (lightMode) {
document.getElementsByClassName('page')[0].style.color = '#ffffff'
document.getElementsByClassName('page')[0].style.backgroundColor = '#000000'
lightMode = false
}
} else {
if (!lightMode) {
document.getElementsByClassName('page')[0].style.color = '#000000'
document.getElementsByClassName('page')[0].style.backgroundColor = '#ffffff'
lightMode = true
}
}

var apm = '上<br>午'
if (hour > 12) {
apm = '下<br>午'
hour -= 12
}

var timeString = hour + ':' + ('0' + date.getMinutes()).slice(-2)
var dateString = (date.getMonth() + 1) + '月' + date.getDate() + '日'
var weekList = ['日', '一', '二', '三', '四', '五', '六']
var weekString = '星期' + weekList[date.getDay()]

document.getElementById('apm').innerHTML = apm
document.getElementById("time").innerHTML = timeString
document.getElementById("date").innerHTML = dateString + " " + weekString
}

clock()

setInterval("clock()", 60 * 1000)

// 天气模块
// 固定9种类型: xue、lei、shachen、wu、bingbao、yun、yu、yin、qing
var weaImgs = {
xue: ['&#xe645;', '&#xe645;'],
lei: ['&#xe643;', '&#xe643;'],
shachen: ['&#xe646;', '&#xe646;'],
wu: ['&#xe647;', '&#xe647;'],
bingbao: ['&#xe667;', '&#xe667;'],
yun: ['&#xe648;', '&#xe648;'],
yu: ['&#xe64b;', '&#xe64b;'],
yin: ['&#xe64a;', '&#xe652;'],
qing: ['&#xe649;', '&#xe764;'],
weizhi: ['&#xe6f2;', '&#xe6f2;']
}

function getWea(){
var xhr = createXHR();
// xhr.open('GET','https://tianqiapi.com/free/day?appid=48353766&appsecret=VjZ4oxd5',true);
xhr.open('GET','https://tianqiapi.com/free/day?appid=48373524&appsecret=5iHwLsS8',true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
var data = JSON.parse(this.responseText)
// 获取天气图标信息
var imgs = weaImgs[data.wea_img]
var img = imgs[0]
var date = new Date()
var utc8DiffMinutes = date.getTimezoneOffset() + 480
date.setMinutes(date.getMinutes() + utc8DiffMinutes)
var hour = date.getHours()
// 20点后天气使用夜间天气图标
if (hour > 19 || hour < 6) {
img = imgs[1]
}

var weaImg = '<span class="iconfont">'+img+'</span>' + '<div>天气：'+data.wea+'</div>';
var weaTemp = '<div class="tempNum">'+data.tem+'<div class="symbol">&#8451;</div></div>'+'<div>当前气温</div>';
var weaInfo = '<div>最高气温：'+data.tem_day+'&#8451;</div>'+
'<div>最低气温：'+data.tem_night+'&#8451;</div>'+
'<div>空气质量：'+data.air+'</div>'+
'<div>风向：'+data.win+'</div>'+
'<div>风速：'+data.win_speed + ' ' + data.win_meter+'</div>'+
'<div>更新时间：'+data.update_time+'</div>';
document.getElementById('weaTitle').innerHTML = data.city + '当前天气'
document.getElementById('weaImg').innerHTML = weaImg
document.getElementById('weaTemp').innerHTML = weaTemp
document.getElementById('weaInfo').innerHTML = weaInfo
}
}
xhr.send(null);
}

getWea()
setInterval("getWea()", 60 * 1000 * 20)
</script>
</body>
</html>
2 changes: 2 additions & 0 deletions clock.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
body {
color: #000000;
background-color: #ffffff;
margin: 0;
padding: 0;
}

.page {
Expand Down
2 changes: 2 additions & 0 deletions clockDark.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
body {
color: #ffffff;
background-color: #000000;
margin: 0;
padding: 0;
}

.page {
Expand Down
Loading

0 comments on commit f787597

Please sign in to comment.