一、创建JavaScript温度应用与定位

在本文中，我们将学习如何使用JavaScript创建一个显示温度和地理位置的天气应用。这将涉及到HTML、CSS和JavaScript的结合使用。

1.1 准备工作

首先，我们需要准备开发环境。请打开Sublime Text编辑器，并创建一个新的HTML文件。

1. 打开Sublime Text。
2. 选择“文件”->“新建文件”。
3. 命名文件为Weather app.html。

1.2 CSS样式设计

在HTML文件中，我们将插入CSS样式。以下是一些基本的样式设置，用于定义通知和温度值的字体大小。

* {
    font-family: "Rimouski";
}

body {
    background-color: #293251;
}

.container {
    width: 300px;
    background-color: #FFF;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    padding-bottom: 50px;
}

.app-title {
    width: 300px;
    height: 50px;
    border-radius: 10px 10px 0 0;
}

.app-title p {
    text-align: center;
    padding: 15px;
    margin: 0 auto;
    font-size: 1.2em;
    color: #293251;
}

.notification {
    background-color: #f8d7da;
    display: none;
}

.notification p {
    color: #721c24;
    font-size: 1.2em;
    margin: 0;
    text-align: center;
    padding: 10px 0;
}

.weather-container {
    width: 300px;
    height: 260px;
    background-color: #F4F9FF;
}

.weather-icon {
    width: 300px;
    height: 128px;
}

.weather-icon img {
    display: block;
    margin: 0 auto;
}

.temperature-value {
    width: 300px;
    height: 60px;
}

.temperature-value p {
    padding: 0;
    margin: 0;
    color: #293251;
    font-size: 4em;
    text-align: center;
    cursor: pointer;
}

.temperature-value span {
    color: #293251;
    font-size: 0.5em;
}

.temperature-description p {
    padding: 8px;
    margin: 0;
    color: #293251;
    text-align: center;
    font-size: 1.2em;
}

.location p {
    margin: 0;
    padding: 0;
    color: #293251;
    text-align: center;
    font-size: 0.8em;
}

二、JavaScript实现

2.1 获取地理位置和天气数据

我们将使用JavaScript来获取用户的地理位置，并根据位置信息获取天气数据。

const iconElement = document.querySelector(".weather-icon");
const tempElement = document.querySelector(".temperature-value p");
const descElement = document.querySelector(".temperature-description p");
const locationElement = document.querySelector(".location p");
const notificationElement = document.querySelector(".notification");

const weather = {};

weather.temperature = {
    unit: "celsius"
};

const KELVIN = 273;
const key = "82005d27a116c2880c8f0fcb866998a0";

if ('geolocation' in navigator) {
    navigator.geolocation.getCurrentPosition(setPosition, showError);
} else {
    notificationElement.style.display = "block";
    notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
}

function setPosition(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    getWeather(latitude, longitude);
}

function showError(error) {
    notificationElement.style.display = "block";
    notificationElement.innerHTML = `<p>${error.message}</p>`;
}

function getWeather(latitude, longitude) {
    const api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`; 

    fetch(api)
        .then(response => response.json())
        .then(data => {
            weather.temperature.value = Math.floor(data.main.temp - KELVIN);
            weather.description = data.weather[0].description;
            weather.iconId = data.weather[0].icon;
            weather.city = data.name;
            weather.country = data.sys.country;
        })
        .then(displayWeather);
}

function displayWeather() {
    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
    descElement.innerHTML = weather.description;
    locationElement.innerHTML = `${weather.city}, ${weather.country}`;
}

function celsiusToFahrenheit(temperature) {
    return (temperature * 9/5) + 32;
}

tempElement.addEventListener("click", function() {
    if (weather.temperature.value === undefined) return;

    if (weather.temperature.unit === "celsius") {
        const fahrenheit = Math.floor(celsiusToFahrenheit(weather.temperature.value));
        tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;
        weather.temperature.unit = "fahrenheit";
    } else {
        tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
        weather.temperature.unit = "celsius";
    }
});

三、HTML5代码实现

3.1 完成天气应用的HTML代码

以下是HTML5代码，展示了如何完成天气应用的编写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App JavaScript</title>
    <link rel="stylesheet" href="font/Rimouski.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 style="background-color: blue;">PRABAKARAN ACT</h1><br>
        <div class="app-title">
            <p>Weather</p>
        </div>
        <div class="notification"></div>
        <div class="weather-container">
            <div class="weather-icon">
                <img src="icons/unknown.png" alt="">
            </div>
            <div class="temperature-value">
                <p>- °<span>C</span></p>
            </div>
            <div class="temperature-description">
                <p> - </p>
            </div>
            <div class="location">
                <p>-</p>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

四、总结

本文介绍了如何使用JavaScript创建一个天气应用，该应用能够显示温度和地理位置信息。通过结合HTML、CSS和JavaScript，我们实现了一个功能完整的天气应用。