码云笔记前端博客
Home > JavaScript > 我如何使用我的旧iPhone 4制作GPS供电的天气时钟

我如何使用我的旧iPhone 4制作GPS供电的天气时钟

2019-01-21 分类:JavaScript 作者:管理员 阅读(5138)

本文共计11948个字,阅读时间预计30分钟,干货满满,记得点赞加收藏哦

我的第一部苹果智能手机是iPhone 4s。我还记得在当时它是最酷的东西的时候探索它的能力的兴奋感。最后,当然,我换了一个新的型号,旧的iPhone,仍然在薄荷状态,收集了两年的灰尘。真是浪费!

但果真如此吗?我突然想到,我可以重新利用旧苹果手机为我们的走廊创造一个有用的天气时钟。

我如何使用我的旧iPhone 4制作GPS供电的天气时钟

在这个过程中,我发现重用旧设备不仅有趣而且经济,还可以加深您对web标准的理解。在本教程中,我将展示如何创建一个小web页面来显示基于当前GPS位置的日期、时间和当前天气条件。我们将一起从公共API检索天气数据,并将API密钥隐藏在PHP文件中以确保安全性。最后,我们将查看如何添加清单文件和元标记,以便用户可以将页面保存到设备的主屏幕,然后将其作为独立应用程序启动,包括自定义图标。

获取时间

现在的时间

时钟的HTML有一些占位符文本,我们将最终替换它们。此时我们需要创建一个剧中的<main>容器元素和两个用来存放日期和时间的<time>语义元素,<span>标记在第二个<time>元素运行的秒之间,元素中的datetime属性将使用JavaScript动态更新。

1
2
3
4
<main id="container" class="daymode">
  <time id="date" datetime="" class="clocktext">Someday, Anymonth 15, 20XX</time>
  <time id="time" datetime="" class="clocktext">12:00<span>:00 PM</span></time>
</main>

一点响应式设计是关键。我们希望它能很好地适应iPhone 4s屏幕或任何其他小型智能手机的竖屏和横屏模式。当然,我们还希望它能在桌面web浏览器上正常工作。但是,我们不能使用任何前沿的CSS或JavaScript,因为像我的iPhone 4s这样的老设备无法理解它。

我通过创建特定于一天中的时间的样式来完成一个档次,我们甚至可以利用媒体查询来暗化在最新MacOS中打开暗模式的 Mac用户的日间风格。

标签通过2em的宽度将运行的秒和冒号很好地包裹,该宽度足够容纳两个大写字母(即AM和PM)。最终的CSS需要的是媒体查询,以便在时钟处于横向模式时提升字体大小,或实际上任何视口都大于480px的设备。

下面是我们正在查看的基本样式,为了简洁起见,删除了最终应用程序中的更多装饰样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* Base nighttime styles */
.nightmode {
  background-color: #121212;
  color: #fff;
}

/* Base daytime styles */
.daymode {
  background-color: #87ceeb;
  color: #333;
}

/* Target MacOS users who have Dark Mode enabled */
@media (prefers-color-scheme: dark) {
  .daymode {
    background-color: #003;
    color: #ffc;
  }
}

/* Used to wrap any lines of text  */
.clocktext {
  display: block;
  margin: 0;
  padding: 1px 0 0 0;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

#date {
  font-size: 1.3rem;
  padding-top: 15px;
}

#time {
  font-size: 5rem;
  margin: 1px 0 0 0;
}

#time span {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0 0 0 0.5em;
  padding: 0;
  text-align: left;
  vertical-align: baseline;
  white-space: normal;
  width: 2em;
}

@media (min-width: 480px){
  #date {font-size: 2rem;}
  #time {font-size: 8rem;}
  #time span {
    font-size: 2rem;
    line-height: 2;
  }
}

对于JavaScript,我选择了ES5,因为ES6的很多功能在iOS 9.35的移动Safari浏览器上无法运行,而iOS 9.35是iPhone 4s上运行的最后一个iOS系统。幸运的是,ES5完全可以胜任这项任务,而且该应用程序也可以在较新的设备上正常运行。

我们需要当前日期和时间(now)、显示日期(dd)的元素、显示时间(td)的元素以及月份和日期的名称的变量。加载页面后,将调用init函数每秒更新一次时间(1000毫秒)。getClockStrings()函数更新now Date对象中的值,并返回一个包含日期和时间的HTML字符串的对象。然后updateTime()函数更新HTML以显示时间。这里很少使用的一个特性是Date对象的toISOString()方法,该方法将机器可读的日期字符串添加到两个元素的datetime属性中。

下面是用demo中的JavaScript实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//注意:选择ES5而不是ES6是为了与旧的移动设备兼容
var now, dd, td;
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

document.addEventListener("DOMContentLoaded", init, false);
function init() {
  dd = document.getElementById("date");
  td = document.getElementById("time");
  updateTime();
  setInterval(updateTime,1000);
}

function updateTime() {
  var clockdata = getClockStrings();
  dd.innerHTML = clockdata.datehtml;
  td.innerHTML = clockdata.timehtml;
  dd.dateTime = now.toISOString();
  td.dateTime = now.toISOString();
}

function getClockStrings() {
  now = new Date();
  var year = now.getFullYear();
  var month = months[now.getMonth()];
  var date = now.getDate();
  var day = days[now.getDay()];
  var hour = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var meridian = hour < 12 ? "AM" : "PM";
  var clockhour = hour > 12 ? hour - 12 : hour;
  if (hour === 0) {clockhour = 12;}
  var clockminutes = minutes < 10 ? "0" + minutes : minutes;
  var clockseconds = seconds < 10 ? "0" + seconds : seconds;
  var datehtml = day + ", " + month + " " + date + ", " + year;
  var timehtml = clockhour + ":" + clockminutes + "<span>:" + clockseconds + " " + meridian + "</span>";
  return {"datehtml":datehtml,"timehtml":timehtml};
}

定位用户位置

Geolocation API能够准确获取到用户位置的方法。当页面加载时,我们可以这样做,礼貌的提示我们用户去启动定位功能。因此,我们必须在HTML中添加一个按钮和一个用来显示接收到的GPS信息。

1
2
<button id="gpsbutton">Get GPS Location</button>
<div id="gps" class="clocktext infotext"></div>

这里也有它们自己的样式,这里我们给它添加了一个infotext类和两个ID分别是gpsbutton和gps

最后,我们需要在媒体查询中添加修改后的infotext类选择器规则。

再次,简洁的基本样式-装饰样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* The geolocation coordinates upon clicking GPS button */
.infotext {
  font-size: 1.3rem;
  line-height: 1.4;
  padding: 0 5px 0 5px;
  width: auto;
}

/* The button itself */
#gpsbutton {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  margin: 0 auto;
  width: auto;
  cursor: pointer;
}

#gpsbutton:hover {
  /* Styles for the hover state */
}

@media (min-width: 480px){
  /* Add the rule below to the end of the media query */
  .infotext {font-size: 1.8rem;}
}

JavaScript需要对纬度、经度、GPS 以及GPS 进行一些新变量。单击时,GPS按钮调用getLocation()函数,该函数测试浏览器中地理位置支持的可用性。如果找到这样的支持,它将调用导航器的getCurrentPosition方法。并将引用传递给名为showPosition的成功回调函数和名为geoError的错误回调函数。

此时,浏览器将请求用户允许获取其GPS位置。如果访问者拒绝,则显示适当的消息。如果用户同意,showPosition()函数将显示纬度和经度,并隐藏GPS按钮。

js获取用户地理位置

JavaScript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// ...
var lat, lon, gd, gpsbutton;
// ...
function init(){
  // ...
  gd = document.getElementById("gps");
  gpsbutton = document.getElementById("gpsbutton");
  gpsbutton.addEventListener("click",getLocation,false);
  // ...
}

function updateTime(){
  // ...
  var sec = now.getSeconds();
  var minutes = now.getMinutes();
  if (sec === 0){
    if (minutes % 5 === 0){
      getLocation(); // Get location every 5 minutes while the app is running
    }
  }
}

function getClockStrings(){
  // ...
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition,geoError);
  }else{
    gd.innerHTML = "location unknown";
  }
}

function geoError(){
  gd.innerHTML = "location detection disabled";
}

function showPosition(position) {
  gpsbutton.style.display = "none";
  lat = position.coords.latitude;
  lon = position.coords.longitude;
  gd.innerHTML = "GPS: " + lat.toFixed(2) + " | " + lon.toFixed(2);
}

如何获取天气

向这个时钟添加当前的天气条件是一个有用的特性。幸运的是,在OpenWeatherMap上的优秀人员允许免费访问基本天气信息。在那里注册一个免费帐户,您将获得一个API密钥,您可以在web开发中使用它。普通账户提供了当前的天气和5天的天气预报,你可以在任何有效的GPS位置上进行预测。只要确保每分钟调用API的次数不超过60次,否则您将被要求升级到付费帐户。一旦有了API键,就用它替换代码示例中的单词YOUR_API_KEY_HERE,然后将代码粘贴到浏览器的位置栏中。用不同的纬度和经度做实验。你可以在LatLong上找到任何主要城市的坐标,坐标以你需要的十进制格式给出。

1
http://api.openweathermap.org/data/2.5/weather?lat=40.15&amp;lon=-75.21&amp;APPID=YOUR_API_KEY_HERE

HTML代码:

在GPS 下方,将以下内容添加到HTML中。

1
2
<div id="weather" class="clocktext infotext"></div>
<img id="icon" src="https://openweathermap.org/img/w/01n.png" alt="weather icon" />

CSS代码:

CSS需要新的天气和图标图像的样式。注意,图标最初设置为0不透明度。一旦检索到有效的天气信息,JavaScript代码中就会更改这一点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#weather {
  display: block;
  width: auto;
}

#icon {
  display: inline-block;
  opacity: 0;
  vertical-align: top;
  width: 50px;
  height: 50px;
}

@media (min-width: 480px){
  /* Add the rule below to the end of the media query */
  #weather {display: inline-block;}
}

JavaScript代码:

我们需要添加变量来引用天气URL、天气(wd)和天气图标。我们还需要决定华氏温度或摄氏温度。usephp的布尔值现在应该设置为false。稍后我们将讨论在PHP文档中隐藏API密钥。locationrequired布尔值将帮助我们避免在用户请求天气和地理定位api之前调用它们。日落和日出时间变量将允许我们根据一天中的时间改变时钟的外观。iconurl值提供了检索天气图标所需的URL的词干。我们还需要在updateTime函数中使用0到14之间的随机数,这样我们的所有用户就不会在每季度的同一分钟请求天气预报。如果您有自己的图标集,可以更改iconurl的URL值。PNG图标的文件名可以在OpenWeatherMap。org上找到。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// ...
var weatherurl, wd, icon, weatherminute;
var temperaturescale = "F"; // 设置为F或C(华氏或摄氏)
var usephp = false; // 设置为true以使用PHP文档隐藏api密钥
var locationRequested = false;
var sunsettime = 0;
var sunrisetime = 0;
var iconurl = "https://openweathermap.org/img/w/";

// ...
function init(){
  //... Add these lines before the updateTime call at the end of the function
  wd = document.getElementById("weather");
  icon = document.getElementById("icon");
  weatherminute = randRange(0,14);
  // ...
}

// Random number utility function
function randRange(min, max) {
  return Math.floor(Math.random()*(max-min+1))+min;
}

接下来,我们将修改updateTime()函数的最后一个if块。我们希望避免对天气和地理定位API的不必要调用,因此测试sec === 0非常重要,以确保我们不会在给定的一分钟内调用这两个API中的任何一个60次。我们还希望仅当用户批准了浏览器的地理位置请求时才调用api。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function updateTime(){
  //...
  if (locationRequested && sec === 0){
    checkForSunset(); // 每分钟检查一次日落
    if (minutes % 15 === weatherminute){
        getWeather(); // 在应用程序运行时,每15分钟获取一次天气信息
        // weatherminute是一个介于014之间的随机数
        // 用户不会同时访问API
    }
    if (minutes % 5 === 0){
      getLocation(); // 在应用程序运行时,每5分钟获取一次位置信息
    }
  }
}

在showPosition()函数中,请求天气数据的URL要么是指向PHP文件的相对路径,要么是指向OpenWeatherMap.org服务的完整HTTPS URL。在这两种情况下,我们都将在URL的查询字符串中传递纬度和经度。对于APPID,请用您自己的API键替换这里的单词your_api_key__除非您使用下面步骤4中讨论的PHP解决方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function showPosition(position) {
  //...
  if (usephp){
    weatherurl = "clock.php?lat=" + lat + "&lon=" + lon;
  }else{
    weatherurl = "https://api.openweathermap.org/data/2.5/weather?";
    weatherurl += "lat=" + lat + "&lon=" + lon + "&APPID=";
    weatherurl += "YOUR_API_KEY_HERE";
  }
  if (!locationRequested){
    getWeather();
    locationRequested = true;
  }
}

showPosition()函数然后调用getWeather(),后者更新weather,以便在检索天气数据时让用户知道发生了什么事情。我选择使用较老的XMLHttpRequest标准,因为像iPhone 4s这样的老设备不支持fetch。如果天气数据请求是通过PHP文档传递的,那么响应类型将是“document”而不是纯文本,因此我们必须对此进行测试。如果是这样,我们需要的JSON对象将位于响应体的textContent属性中。否则,我们只需要在responseText属性中找到纯文本。然后将数据解析为JSON对象并发送给processWeather()函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getWeather() {
  wd.innerHTML = "getting weather";
  var xhttp = new XMLHttpRequest();
  xhttp.responseType = usephp ? "document" : "text";
  // PHP文件返回文档,而不是纯文本
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      // 使用PHP作为数据源时,我们需要' textContent '
      // 返回的文档主体的
      var data = usephp ? xhttp.response.body.textContent : xhttp.responseText;
      processWeather(JSON.parse(data));
    }
  };
  xhttp.open("GET", weatherurl, true);
  xhttp.send();
}

发送给processWeather()的JSON对象如下所示:

1
2
3
4
5
{"coord":{"lon":-75.21,"lat":40.15},
"weather":[{"id":701,"main":"Mist","description":"mist","icon":"50n"}],
"base":"stations",
"main":{"temp":276.42,"pressure":1011,"humidity":100,"temp_min":275.15,"temp_max":277.15},"visibility":16093,"wind":{"speed":2.1,"deg":310},"clouds":{"all":90},"dt":1545021480,
"sys":{"type":1,"id":4743,"message":0.1513,"country":"US","sunrise":1545049047,"sunset":1545082605},"id":5190089,"name":"Fort Washington","cod":200}

从这个JSON数据中,我们需要获取包含当前条件描述和天气图标文件名的weather属性。然后用一个新的src属性值更新html中ID为“icon”的标记,以加载图标图像。温度是主要属性的一部分,但它必须转换为华氏或摄氏(大多数人认为不是开尔文)。完成此操作后,可以将当前条件分配给weather的innerHTML属性。日出和日落的时间在数据的sys属性中找到。一旦有了这些,我们就可以调用checkForSunset()函数并修改样式以匹配一天中的时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function processWeather(data){
  var weather = data["weather"][0];
  icon.src = iconurl + weather.icon + ".png";
  icon.style.opacity = 1;
  var localtemperature = convertTemperature(data["main"].temp).toFixed(0);
  var weatherstring = localtemperature + "°" + temperaturescale + "&nbsp;&nbsp;" + weather.description;
  wd.innerHTML = weatherstring;
  sunsettime = Number(data["sys"].sunset);
  sunrisetime = Number(data["sys"].sunrise);
  checkForSunset();
}

function checkForSunset(){
  var nowtime = now.getTime()/1000;
  // 如果一天中的时间是在日落之后,则更改表示样式
  // 或者在第二天日出之前
  var isDark = nowtime > sunsettime || nowtime < sunrisetime;
  document.getElementById("container").className = isDark ? "nightmode":"daymode";
}

function convertTemperature(kelvin){
  // 将开尔文温度转换为摄氏或华氏温度
  var celsius = (kelvin - 273.15);
  return temperaturescale === "F" ? celsius * 1.8 + 32 : celsius;
}

是否需要向你展示我的API密钥

我使用一次性的API密钥创建了一个可用的演示程序。然而,通常情况下,在前端web应用程序的代码中以纯文本形式放置API键似乎不是一个好主意。其他人可能会复制它并使用您的API访问配额。如果您可以访问典型的web服务器(CodePen不支持PHP),那么您可以将API密钥隐藏在PHP文件中。下面是一些示例代码。将API密钥替换为时钟并上传文件。将php放入与主HTML文件相同的目录中。PHP文件充当OpenWeatherMap API的代理,我们在演示中使用OpenWeatherMap API获取数据。如果它有任何问题获取天气数据,它只是返回一个适当的结构化对象“天气不可用”作为描述和温度转换为0°f。API密钥从来没有从服务器传输到浏览器,所以没有什么可窥探的。

如果您知道一种安全的、无服务器的解决方案,可以隐藏API密钥(也许是Netlify或Docker ?),我很想听听读者们的想法,因为不必启动我们自己的服务器来存储和访问数据。如果你有什么想法,请插嘴。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Clock Data</title></head>
<body>
<?php
error_reporting(0);
$latitude = "80";
$longitude = "-85";

if (isset($_GET["lat"]) && isset($_GET["lon"])) {
  $latitude = $_GET["lat"];
  $longitude = $_GET["lon"];
}

$endpoint = "http://api.openweathermap.org/data/2.5/weather?";
$apikey = "YOUR_API_KEY_HERE";
$weatherurl = $endpoint . "lat=" . $latitude . "&lon=" . $longitude . "&appid=" . $apikey;
$jsonfile = file_get_contents($weatherurl);

if ($jsonfile !== false){
  echo "$jsonfile";
} else {
  echo '{"weather":[{"description":"Weather Unavailable","icon":"01n"}],"main":{"temp":255.372278}}';
}

?>
</body>
</html>

如果其他人试图从另一个域使用这个PHP文件,浏览器应该会抛出如下示例所示的错误。我在makepages。com域中加载了一份天气时钟的副本,并试图访问shearspi雷麦雷a.com域中的PHP文件。现在,在典型的商业web服务器安装中,默认情况下都采用同源策略。您可能需要确认您正在使用的服务器上的情况。

1
2
[Error] Origin https://makepages。com is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load https://shearspiremedia。com/demos/clock/clock.php?lat=40.14616446413611&lon=-75.20946717104738 due to access control checks.

接下来,更新JavaScript文件中的usephp变量并测试:

1
var usephp = true; // 设置为true以使用PHP文档隐藏api密钥

是否可以全屏模式

一旦应用程序启动并正常工作,它就可以加载到任何智能手机浏览器上。然而,iPhone不得不忍受位置栏和页脚的存在。讨厌的东西!

如果能全屏观看就太好了。要做到这一点,我们需要一个清单文件来告诉设备,我们希望将时钟视为一个独立的应用程序,并告诉Android设备应用程序图标的位置。这是我保存为manifest的manifest文件。json在与HTML文件相同的目录中。您可以使用Web应用程序清单生成器创建自己的清单文件。一定要调整图标文件名在您自己的清单文件和链接标签在HTML中,我们看到这里:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  "short_name": "Weather Clock",
  "name": "Weather Clock by Shearspire Media",
  "icons":
    {
      "src": "icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "icons/launcher-icon-128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "icons/launcher-icon-152.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "orientation": "landscape",
  "display": "standalone",
  "start_url": "index.html"
}

对于主屏幕图标,我们还需要一组192px、152px、128px、96px和48px的正方形PNG图像。将它们保存到与HTML文件相同的文件夹中的icons文件夹中。使用清单中找到的文件名。Web应用程序清单生成器将通过上传一张512 x 512像素的图像来创建除48px之外的所有所需大小的图标。下面是我制作的简单图标:

weather图标制作

最后,我们需要在HTML文件的头部添加一些元标记和链接标记,以使这一切正常工作。这是完成的索引。html文件代码,包括所有在代码页上看不到的头标记。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="manifest" href="manifest.json">
  <link rel="apple-touch-icon" sizes="48x48" href="icons/launcher-icon-1x.png">
  <link rel="apple-touch-icon" sizes="96x96" href="icons/launcher-icon-2x.png">
  <link rel="apple-touch-icon" sizes="128x128" href="icons/launcher-icon-128.png">
  <link rel="apple-touch-icon" sizes="152x152" href="icons/launcher-icon-152.png">
  <link rel="apple-touch-icon" sizes="192x192" href="icons/launcher-icon-4x.png">
  <title>Weather Clock by ShearSpire Media</title>
  <script src="clock.js"></script>
  <link rel="stylesheet" type="text/css" href="clock.css">
</head>
<body>
  /* Clock markup */
</body>
</html>

用户现在可以点击iPhone上的分享按钮,选择“添加到主屏幕”,会出现一个图标,将时钟作为一个全屏独立应用程序启动。享受吧!”

如果用户的确切位置不是必需的,我们可以完全避免使用Geolocation API,并使用几个IP地址服务中的任意一个来获得大致的位置。在上面的演示中,从extreme-ip-lookup.com接收JSON对象,以获得用户的大致GPS位置。它显示JSON中找到的城市和区域值,而不是GPS坐标。在这种情况下,用户应该清楚天气位置是邻近的城镇。

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 3 条评论 - 我如何使用我的旧iPhone 4制作GPS供电的天气时钟

  1. 斌仔 Linux Chrome 62.0.3202.84

    学习了,神操作啊

  2. 视觉锅锅 Linux Chrome 62.0.3202.84

    学习一下,思想不错。

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @视觉锅锅谢谢

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8647901 次
  • 最近更新: 2019年11月21日