kindle html模板,kindle-clock.html

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

clock

/* default: do nothing*/

.style-0 {

}

.style-0.style-3 {

-webkit-transform: rotate(180deg);

}

.style-0.style-3 #weather-v2-plugin-standard {

display: none;

}

.style-0.style-4 {

-webkit-transform: rotate(180deg);

}

/* style 1: hide weather widget */

.style-1 #weather-v2-plugin-standard {

display: none;

}

/* style 2: hide weather widget, rotate 90deg,larger text */

.style-2 {

-webkit-transform: rotate(90deg);

}

.style-2 #weather-v2-plugin-standard {

display: none;

}

.style-2 #time {

font-size: 13rem;

}

body {

position: relative;

color: #000000;

background-color: #ffffff;

margin: 0;

padding: 0;

}

.page {

position: fixed;

width: 100%;

height: 100%;

font-family: 'Julius Sans One', sans-serif;

z-index: 10;

overflow: hidden;

margin: 0;

padding: 0;

/*display: -webkit-flex;*/

/*-webkit-justify-content: center;*/

/*-webkit-align-items: center;*/

}

.wrap {

position: absolute;

/*margin: auto;*/

/*top: 0;*/

/*left: 0;*/

/*bottom: 0;*/

/*right: 0;*/

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

}

.flash #weather-v2-plugin-standard {

display: none;

}

#time,

#date {

width: 100%;

padding: 0;

margin: 0;

text-align: center;

}

#time {

top: 0;

height: 40%;

font-size: 10rem;

font-weight: 700;

}

#date {

height: 30%;

font-size: 5rem;

}

/* adjust weather width */

#weather-v2-plugin-standard {

margin: auto !important;

}

.wv-lt-location {

text-align: center !important;

}

.wv-lt-location span {

font-size: 2rem !important;

}

.wv-lt-location a {

font-size: 1rem !important;

}

img {

width: 7rem !important;

margin: 0 !important;

}

.wv-n-h-now-img {

text-align: center !important;

}

.wv-v-h-row {

display: flex;

display: -webkit-box;

}

.wv-v-h-location {

width: 33% !important;

margin-top: 3em;

}

.wv-v-h-col-left {

width: 66% !important;

}

.wv-lt-refresh, .wv-n-h-now-alarm, .wv-n-h-now-rain, .wv-n-h-now-txt {

display: none !important;

}

.wv-v-h-now {

margin: 0 !important;

padding: 0 !important;

}

.wv-n-h-now-tmp {

font-size: 3rem !important;

}

.wv-top-select, .wv-top-button {

width: 100% !important;

}

.wv-top-col-3-c {

margin: 10px !important;

}

.wv-n-h-now-content {

text-align: center;

width: 50% !important;

}

.wv-lt-col-7 {

width: 100% !important;

}

/* adjust weather width end */

WIDGET = {

CONFIG: {

"layout": 1,

"width": document.documentElement.clientWidth * 0.7,

"height": document.documentElement.clientHeight * 0.3,

"background": 5,

"dataColor": "000000",

"modules": "10",

"key": "1W26JbTAJH",

"language": "auto"

}

}

var last_time;

var last_flash;

var interval_id;

var style = 0;

const timeDiv = document.getElementById("time");

const dateDiv = document.getElementById("date");

const pageDiv = document.getElementById("page");

const halt = "HALT";

var clientHeight = document.documentElement.clientHeight;

var clientWidth = document.documentElement.clientWidth;

pageDiv.style.height = clientHeight + "px";

pageDiv.style.width = clientWidth + "px";

function pause() {

return;

if (timeDiv.innerHTML === halt) {

last_time = 0;

updateTime()

interval_id = setInterval(updateTime, 1000)

} else {

clearInterval(interval_id);

timeDiv.innerHTML = halt;

}

}

var timer = null

function setTimeAndDateWidgetHeight(base, timeHeight, dateHeight) {

timeDiv.style.height = base * timeHeight + "px";

timeDiv.style.lineHeight = base * timeHeight + "px";

dateDiv.style.height = base * dateHeight + "px";

dateDiv.style.lineHeight = base * dateHeight + "px";

}

function changeStyle() {

var clientHeight = document.documentElement.clientHeight;

var clientWidth = document.documentElement.clientWidth;

switch (style) {

case 1:

pageDiv.classList.add('style-1');

setTimeAndDateWidgetHeight(clientHeight, 0.4, 0.3)

style++;

break;

case 2:

pageDiv.classList.remove('style-2');

pageDiv.classList.add('style-2');

setTimeAndDateWidgetHeight(clientWidth, 0.7, 0.3);

style++;

break;

case 3:

pageDiv.classList.remove('style-1');

pageDiv.classList.remove('style-2');

pageDiv.classList.remove('style-3');

pageDiv.classList.add('style-3');

setTimeAndDateWidgetHeight(clientHeight, 0.4, 0.3)

style++;

break;

case 4:

pageDiv.classList.remove('style-1');

pageDiv.classList.remove('style-2');

pageDiv.classList.remove('style-3');

pageDiv.classList.remove('style-4');

pageDiv.classList.add('style-4');

setTimeAndDateWidgetHeight(clientHeight, 0.4, 0.3)

style++;

break;

default:

pageDiv.classList.remove('style-1');

pageDiv.classList.remove('style-2');

pageDiv.classList.remove('style-3');

pageDiv.classList.remove('style-4');

pageDiv.style.left = 0;

setTimeAndDateWidgetHeight(clientHeight, 0.4, 0.3)

style = 1;

}

}

changeStyle();

function fontSizeAutoChange() {

var clientHeight = document.documentElement.clientHeight;

var clientWidth = document.documentElement.clientWidth;

document.documentElement.style.fontSize = (clientHeight / 40) + "px";

}

fontSizeAutoChange();

window.onresize = fontSizeAutoChange;

function getQueryVariable(variable) {

var query = window.location.search.substring(1);

var vars = query.split("&");

for (var i = 0; i < vars.length; i++) {

var pair = vars[i].split("=");

if (pair[0] === variable) {

return pair[1];

}

}

return false;

}

function updateTime() {

var date = new Date()

var timezone = getQueryVariable("timezone") ? getQueryVariable("timezone") : 8

var utc8DiffMinutes = date.getTimezoneOffset() + timezone * 60;

date.setMinutes(date.getMinutes() + utc8DiffMinutes);

if (date.getMinutes() === 0 && date.getHours() !== last_flash) {

last_flash = date.getHours();

flash();

}

var timeString = date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2)

var dateString = (date.getMonth() + 1) + '/' + date.getDate()

var weekList = ['日', '一', '二', '三', '四', '五', '六'].map(function (str) {

return '周' + str

})

var weekString = weekList[date.getDay()]

if (last_time !== timeString) {

timeDiv.innerHTML = timeString

dateDiv.innerHTML = dateString + ' ' + weekString

}

last_time = timeString;

}

updateTime()

interval_id = setInterval(updateTime, 60000)

function flash() {

document.body.style.backgroundColor = '#000';

pageDiv.classList.add('flash');

setTimeout(function () {

pageDiv.classList.remove('flash');

document.body.style.backgroundColor = '#FFF';

}, 1000)

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史