Kindle可用的天气时钟，记一个新手小白的第一套源码。

2024-03-06 23:10
文章标签 源码 时钟 新手 可用 小白 天气 kindle 第一套

本文主要是介绍Kindle可用的天气时钟，记一个新手小白的第一套源码。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        这段时间抽空整理了一下家务，从几个尘封的箱子里翻出了好几个淘汰好久的电子产品，有六代的Kindle一个，一代的MiPad一个，外加好几个手机。本来打算扔掉的，无意间在网上看到几篇用kindle做天气时钟的帖子，于是想干脆废物利用一下，也弄一个天气时钟。

        最开始本来想用直接用网上现成的网站，找了好久终于找到一个比较满意（www.itmm.wang/clock/）效果如图：        

        可遗憾的是，这个网站已经不能用。于是下定决心，自己搞一套吧。好歹在学校里多少也学过点，看看能不能捡起来，这才有了这篇差劲的文章以及这套差劲的源码。

        我会在这里公布全套的源码，好久没写代码了，自己认为很差劲，知道这里大神很多，请大神不吝赐教，代码有可以优化更新的地方请多多指教，在此拜谢。

        PS：目前在我的六代Kindle中一代MiPad中测试代码均可使用。废话不多说，先上效果图

一、实际使用效果图

1、六代Kindle效果图

2、一代MiPad效果

二、源码部分

        源码是基于html+js编写，下面是全部源码，欢迎大神指教。

1、html部分

<html style="width:100%;height:100%; margin:0; padding:0">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>WeatherClock</title> 
</head> 
<body> <div class="CssSolarDateWeek" id="IdSolarDateWeek"></div> <div class="CssLunarDate" id="IdLunarDate"></div> <div class="CssTime" id="IdTime"></div> <img class="Cssicon" id="IdIcon"></img><div class="CssProvinces">浙江</div><!--自由修改成你所在的省份--><div class="CssCity">金华</div><!--自由修改成你所在的城市--><div class="CssText" id="IdText"></div><div class="CssTemp" id="IdTemp"></div><div class="CssWind" id="IdWind"></div><div class="CssFeelsLike" id="IdFeelsLike"></div><div class="CssFeelsLike_01">体感温度</div><div class="CssHumidity" id="IdHumidity"></div><div class="CssHumidity_01">相对湿度</div><div class="CssWindScale" id="IdWindScale"></div><div class="CssWindScale_01">风力等级</div><div class="CssPressure" id="IdPressure"></div><div class="CssPressure_01">大气压强</div><div class="CssNowPoetry" id="IdNowPoetry"></div>
<link rel="stylesheet" href="css/Style.css" /> 
<script src="js/date.js"></script> 
<script>
//时间部分function SolarLunarTime(){var NowDateStamp = new Date().getTime();//将系统时间装换成时间戳var JudgmentUTC = new Date().getTimezoneOffset();//获取系统时间与GMT时间的差值switch(JudgmentUTC){case 0:NowDate=NowDateStamp+28800000;//从GMT时间戳转成CST时间戳break;case -480:NowDate=NowDateStamp;break;}var NowDate = new Date(NowDate);//使用处理后的时间戳设置变量NowDate
//我的kindle不知因什么原因系统时间一直时GMT时间，想尽所有办法都无法更改，只能通过JudgmentUTC及switch获得CST时间。
//阳历及星期		var SolarDate = Solar.fromDate(NowDate);document.getElementById("IdSolarDateWeek").innerHTML=((SolarDate.getYear())+"年"+(SolarDate.getMonth()>9?SolarDate.getMonth():"0"+SolarDate.getMonth())+"月"+(SolarDate.getDay()>9?SolarDate.getDay():"0"+SolarDate.getDay())+"日 • 星期"+(SolarDate.getWeekInChinese()));
//阴历var LunarDate = Lunar.fromDate(NowDate);document.getElementById("IdLunarDate").innerHTML=LunarDate.getYearInGanZhi()+" • "+LunarDate.getYearShengXiao()+"年 • "+LunarDate.getMonthInChinese()+"月"+LunarDate.getDayInChinese();
//时间var Hours = (NowDate.getHours())>9?(NowDate.getHours()):"0"+(NowDate.getHours());var Minutes = (NowDate.getMinutes())>9?(NowDate.getMinutes()):"0"+(NowDate.getMinutes());var Seconds = (NowDate.getSeconds())>9?(NowDate.getSeconds()):"0"+(NowDate.getSeconds());document.getElementById("IdTime").innerHTML=Hours+":"+Minutes;t=setTimeout(function(){SolarLunarTime()},500);//500毫秒(0.5秒)刷新一次}//天气部分function TodayWeather(){var NowWeather = new XMLHttpRequest();NowWeather.open("GET","https://devapi.qweather.com/v7/weather/now?location=城市代码&key=APIkey",true);//使用和风天气API，把“城市代码”换成你需要显示天气预报的城市代码，把APIKEY换成你自己的KEY。具体方法参考和风天气开发文档。NowWeather.onreadystatechange = function(){if (NowWeather.readyState == 4 && NowWeather.status == 200) {var NowWeatherData = JSON.parse(NowWeather.responseText);document.getElementById("IdIcon").src = '/icons/'+NowWeatherData.now.icon+'.svg';//天气图标document.getElementById("IdText").innerHTML = NowWeatherData.now.text;//天气描述document.getElementById("IdTemp").innerHTML = NowWeatherData.now.temp+'°';//当前温度document.getElementById("IdWind").innerHTML = NowWeatherData.now.windDir+'•'+NowWeatherData.now.windSpeed+'km/h';//风向及风速document.getElementById("IdFeelsLike").innerHTML = NowWeatherData.now.feelsLike+'°';//体感温度document.getElementById("IdHumidity").innerHTML = NowWeatherData.now.humidity+'%';//相对湿度document.getElementById("IdWindScale").innerHTML = NowWeatherData.now.windScale+'级';//风力等级document.getElementById("IdPressure").innerHTML = NowWeatherData.now.pressure+'Hpa';//大气压强}};NowWeather.send();t=setTimeout(function(){TodayWeather()},3600000);//3600000毫秒(1小时)刷新一次}//名言部分function NowPoetry(){var Poetry = new XMLHttpRequest();Poetry.open("GET","https://v1.hitokoto.cn/",true);Poetry.onreadystatechange = function(){if (Poetry.readyState == 4 && Poetry.status == 200) {var PoetryDate = JSON.parse(Poetry.responseText);document.getElementById("IdNowPoetry").innerHTML = "∮ "+PoetryDate.hitokoto; //一言}}Poetry.send();t=setTimeout(function(){NowPoetry()},3600000);//3600000毫秒(1小时)刷新一次}window.onload =function() { SolarLunarTime(); TodayWeather(); NowPoetry()}
</script>   
</body>
</html>

2、CSS部分

@font-face {font-family:"DSD";src: url(/fonts/DS-Digital.TTF);}/*LED字体*/
@font-face {font-family:"Deng";src: url(/fonts/Deng.ttf);}/*等线常规*/
@font-face {font-family:"Dengb";src: url(/fonts/Dengb.ttf);}/*等线粗体*/
@font-face {font-family:"Dengl";src: url(/fonts/Dengl.ttf);}/*等线细体*//*阳历及星期*/
.CssSolarDateWeek{width:980px;/*宽*/height:100px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:0px;/*定位类型：距左，配合position*/top:30px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:80px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:100px;/*与height数值一致文字即可垂直居中*/
}/*阴历*/
.CssLunarDate{width:980px;/*宽*/height:80px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:0px;/*定位类型：距左，配合position*/top:150px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:60px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:80px;/*与height数值一致文字即可垂直居中*/   
}/*时间*/
.CssTime{width:980px;/*宽*/height:400px;/*高*/border-style:none none solid none;/*边框*/position:absolute;/*定位类型：脱离*/left:0px;/*定位类型：距左，配合position*/top:230px;/*定位类型：距顶，配合position*/font-family:"DSD";/*字体：LED字体*/font-size:380px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:400px;/*与height数值一致文字即可垂直居中*/   
}/*天气图标*/
.Cssicon{width:150px;/*宽*/height:150px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:40px;/*定位类型：距左，配合position*/top:700px;/*定位类型：距顶，配合position*/line-height:150px;/*与height数值一致文字即可垂直居中*/    
}/*省份*/
.CssProvinces{width:150;/*宽*/height:80px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:210px;/*定位类型：距左，配合position*/top:700px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:30px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/  
}/*城市*/
.CssCity{width:150;/*宽*/height:80px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:210px;/*定位类型：距左，配合position*/top:770px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:30px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:80px;/*与height数值一致文字即可垂直居中*/      
}/*温度*/
.CssTemp{width:300;/*宽*/height:190px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:380px;/*定位类型：距左，配合position*/top:660px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:200px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:190px;/*与height数值一致文字即可垂直居中*/    
}/*天气描述*/
.CssText{width:240;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:700px;/*定位类型：距左，配合position*/top:700px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:30px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/       
}/*风向及风速*/
.CssWind{width:240;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:700px;/*定位类型：距左，配合position*/top:775px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:30px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/        
}/*体感温度*/
.CssFeelsLike{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:0px;/*定位类型：距左，配合position*/top:880px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/  
}
.CssFeelsLike_01{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:0px;/*定位类型：距左，配合position*/top:960px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线细体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/    
}/*相对湿度*/
.CssHumidity{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:245px;/*定位类型：距左，配合position*/top:880px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/  
}
.CssHumidity_01{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:245px;/*定位类型：距左，配合position*/top:960px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线细体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/    
}/*风力等级*/
.CssWindScale{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:490px;/*定位类型：距左，配合position*/top:880px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/  
}
.CssWindScale_01{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:490px;/*定位类型：距左，配合position*/top:960px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线细体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/    
}/*大气压强*/
.CssPressure{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:735px;/*定位类型：距左，配合position*/top:880px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/  
}
.CssPressure_01{width:245;/*宽*/height:75px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:735px;/*定位类型：距左，配合position*/top:960px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线细体*/font-size:40px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:75px;/*与height数值一致文字即可垂直居中*/    
}/*一言*/
.CssNowPoetry{width:980px;/*宽*/height:140px;/*高*//*border-style:solid solid solid solid;/*边框*/position:absolute;/*定位类型：脱离*/left:0px;/*定位类型：距左，配合position*/top:1030px;/*定位类型：距顶，配合position*/font-family:"Dengb";/*字体：等线粗体*/font-size:30px;/*文字大小*/text-align:center;/*文字水平居中*/line-height:160px;/*与height数值一致文字即可垂直居中*/   
}

3、JS部分

        js部分主要涉及到农历部分，我使用的是一个第三方lunar库（点击前往获取lunar）。

4、icons部分

        icons部分主要涉及到的是天气预报图标部分，这里直接使用的和风天气的天气图标（点击前往获取图标说明 | 和风天气开发服务 (qweather.com)）。

5、fonts部分

        主要使用的两种字体，一个是LED字体（点击前往获取Techno > LCD fonts | dafont.com），另外一个中文字体自由设置，不做陈述。

三、部署部分

        考虑到就一个天气时钟，买一个云服务器并不是很划算，经过好几个小时的搜寻，终于找到一个可以直接把安卓手机当成服务器的软件，刚好手里还有好2个退役的安卓手机，那就刚好直接部署到手机上了，具体方法参考：超级简单的用安卓手机做web服务器ksweb - 『精品软件区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

好了，理工男没有文字功底，就写这些了。欢迎大神指教，跪谢。

这篇关于Kindle可用的天气时钟，记一个新手小白的第一套源码。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/781664。

相关文章

python编写朋克风格的天气查询程序

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt
阅读更多...
基于Python实现智能天气提醒助手

基于Python实现智能天气提醒助手

《基于Python实现智能天气提醒助手》这篇文章主要来和大家分享一个实用的Python天气提醒助手开发方案,这个工具可以方便地集成到青龙面板或其他调度框架中使用,有需要的小伙伴可以参考一下... 目录项目概述核心功能技术实现1. 天气API集成2. AI建议生成3. 消息推送环境配置使用方法完整代码项目特点
阅读更多...
8种快速易用的Python Matplotlib数据可视化方法汇总(附源码)

8种快速易用的Python Matplotlib数据可视化方法汇总(附源码)

《8种快速易用的PythonMatplotlib数据可视化方法汇总(附源码)》你是否曾经面对一堆复杂的数据,却不知道如何让它们变得直观易懂？别慌,Python的Matplotlib库是你数据可视化的... 目录引言1. 折线图（Line Plot）——趋势分析2. 柱状图（Bar Chart）——对比分析3
阅读更多...
Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例

Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例

《Nginx使用Keepalived部署web集群（高可用高性能负载均衡）实战案例》本文介绍Nginx+Keepalived实现Web集群高可用负载均衡的部署与测试,涵盖架构设计、环境配置、健康检查、... 目录前言一、架构设计二、环境准备三、案例部署配置 前端 Keepalived配置 前端 Nginx
阅读更多...
Docker安装MySQL镜像的详细步骤(适合新手小白)

Docker安装MySQL镜像的详细步骤(适合新手小白)

《Docker安装MySQL镜像的详细步骤(适合新手小白)》本文详细介绍了如何在Ubuntu环境下使用Docker安装MySQL5.7版本,包括从官网拉取镜像、配置MySQL容器、设置权限及内网部署,... 目录前言安装1.访问docker镜像仓库官网2.找到对应的版本，复制右侧的命令即可3.查看镜像4.启
阅读更多...
Redis高可用-主从复制、哨兵模式与集群模式详解

Redis高可用-主从复制、哨兵模式与集群模式详解

《Redis高可用-主从复制、哨兵模式与集群模式详解》：本文主要介绍Redis高可用-主从复制、哨兵模式与集群模式的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录Redis高可用-主从复制、哨兵模式与集群模式概要一、主从复制（Master-Slave Repli
阅读更多...
Android实现一键录屏功能(附源码)

Android实现一键录屏功能(附源码)

《Android实现一键录屏功能(附源码)》在Android5.0及以上版本,系统提供了MediaProjectionAPI,允许应用在用户授权下录制屏幕内容并输出到视频文件,所以本文将基于此实现一个... 目录一、项目介绍二、相关技术与原理三、系统权限与用户授权四、项目架构与流程五、环境配置与依赖六、完整
阅读更多...
Android实现定时任务的几种方式汇总(附源码)

Android实现定时任务的几种方式汇总(附源码)

《Android实现定时任务的几种方式汇总(附源码)》在Android应用中,定时任务（ScheduledTask）的需求几乎无处不在：从定时刷新数据、定时备份、定时推送通知,到夜间静默下载、循环执行... 目录一、项目介绍1. 背景与意义二、相关基础知识与系统约束三、方案一：Handler.postDel
阅读更多...
Java 正则表达式URL 匹配与源码全解析

Java 正则表达式URL 匹配与源码全解析

《Java正则表达式URL匹配与源码全解析》在Web应用开发中,我们经常需要对URL进行格式验证,今天我们结合Java的Pattern和Matcher类,深入理解正则表达式在实际应用中... 目录1.正则表达式分解：2. 添加域名匹配 (2)3. 添加路径和查询参数匹配 (3) 4. 最终优化版本5.设计思
阅读更多...
Java调用C++动态库超详细步骤讲解(附源码)

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,：本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步：动态库生成（vs2017+qt5.12.10）第二步：Java调用C++
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2