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。

相关文章

centos7基于keepalived+nginx部署k8s1.26.0高可用集群

centos7基于keepalived+nginx部署k8s1.26.0高可用集群

《centos7基于keepalived+nginx部署k8s1.26.0高可用集群》Kubernetes是一个开源的容器编排平台,用于自动化地部署、扩展和管理容器化应用程序,在生产环境中,为了确保集... 目录一、初始化（所有节点都执行）二、安装containerd（所有节点都执行）三、安装docker-
阅读更多...
Java汇编源码如何查看环境搭建

Java汇编源码如何查看环境搭建

《Java汇编源码如何查看环境搭建》：本文主要介绍如何在IntelliJIDEA开发环境中搭建字节码和汇编环境,以便更好地进行代码调优和JVM学习,首先,介绍了如何配置IntelliJIDEA以方... 目录一、简介二、在IDEA开发环境中搭建汇编环境2.1 在IDEA中搭建字节码查看环境2.1.1 搭建步
阅读更多...
第10章 中断和动态时钟显示

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始，按照书籍的划分，第10章开始就进入保护模式（Protected Mode）部分了，感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断（Interrupt）的设计，中断的几种方式：外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用： 为了更好的利用处理器的性能。协同快速和慢速设备一起工作
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
Java ArrayList扩容机制 （源码解读）

Java ArrayList扩容机制 （源码解读）

结论：初始长度为10，若所需长度小于1.5倍原长度，则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义         1：数组默认长度         2:这是一个共享的空数组实例，用于明确创建长度为0时的ArrayList ，比如通过 new ArrayList<>(0)，ArrayList 内部的数组 elementData 会指向这个 EMPTY_EL
阅读更多...
如何在Visual Studio中调试.NET源码

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时，发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null，再判断Count。 看了一下Count的源码如下： 1 [__DynamicallyInvokable]2 public int Count3 {4 [__DynamicallyInvokable]5 get
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础：WAV专题（6）——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道，通过FFprobe命令可以打印WAV音频文件每个packet（也称为数据包或多媒体包）的信息，这些信息包含该packet的pts、dts： 打印出来的“pts”实际是AVPacket结构体中的成员变量pts，是以AVStream->time_base为单位的显
阅读更多...
kubelet组件的启动流程源码分析

kubelet组件的启动流程源码分析

概述 摘要: 本文将总结kubelet的作用以及原理，在有一定基础认识的前提下，通过阅读kubelet源码，对kubelet组件的启动流程进行分析。 正文 kubelet的作用 这里对kubelet的作用做一个简单总结。 节点管理 节点的注册 节点状态更新 容器管理(pod生命周期管理) 监听apiserver的容器事件 容器的创建、删除(CRI) 容器的网络的创建与删除
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2