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

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值