个人中心
gpt4 book ai didi

javascript - 如何根据时间自动更改 CSS 类？

转载 作者：行者123 更新时间：2023-11-30 13:58:04 25 4
gpt4 key购买 nike

我正在构建一个天气应用程序，其中有白天模式和夜间模式。时间根据用户搜索城市的时间而变化。我尝试使用这段代码在夜间模式和白天模式的不同 CSS 之间切换

function getMode(response) {
  let today = response.data.dt;
  let timezone = response.data.timezone;
  let difference = today + timezone - 3600;
  let hours = timeConverter2(difference);
  let mode = document.getElementById("app");
  if (hours > 17 || hours < 6) {
    mode.classList.add("darkmode").remove("lightmode");
  }
  if (hours < 17 || hours > 6) {
    mode.classList.add("lightmode").remove("darkmode");
  }
}

“app”是我在 HTML 文件中放置类“lightmode”的地方，如下所示:

<body>
    <div id="app" class="lightmode">

(它包装了我的整个代码)。

问题是当我的当前时间应该改变时它变成了暗模式但是当我搜索一个仍然是白天的城市时它不会变回亮模式，尽管 hours 变量是来自的 API 响应本地时间。

从 JavaScript 更改 CSS 将是一场噩梦，因为有很多很多类需要用很多参数进行更改。

有什么我没有看到的建议或错误吗？

我在这里添加了一个使用 HTML、CSS 和 Javascript 的最小可重现示例:

function search(city) {
  let apiKey = "fe5b1ec1d3199b1c1bb7ae3cbda78fc9";
  let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;
  axios.get(url).then(currentCity);
  axios.get(url).then(todayDate);
  axios.get(url).then(todayTime);
  axios.get(url).then(getMode);
}

function handleSubmit(event) {
  event.preventDefault();
  let input = document.querySelector("#keyword");
  search(input.value);
}

let form = document.querySelector("form");
form.addEventListener("submit", handleSubmit);

search("Lisbon,pt");

function currentCity(response) {
  let city = document.querySelector(".current-city");
  let place = response.data.name;
  city.innerHTML = `${place}`;
}

function todayDate(response) {
  let today = response.data.dt;
  let timezone = response.data.timezone;
  let difference = today + timezone - 3600;
  let date = document.querySelector(".date");
  date.innerHTML = timeConverter(difference);
}

function todayTime(response) {
  let time = response.data.dt;
  let timezone = response.data.timezone;
  let difference = time + timezone - 3600;
  let timeToday = document.querySelector(".time");
  timeToday.innerHTML = timeConverter4(difference);
}

function timeConverter(epoch) {
  let a = new Date(epoch * 1000);
  let months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ];
  let month = months[a.getMonth()];
  let date = a.getDate();
  let time = `${month} ${date}`;
  return time;
}

function timeConverter2(epoch) {
  let a = new Date(epoch * 1000);
  let hour = a.getHours();
  let time = `${hour}`;
  return time;
}

function timeConverter4(epoch) {
  let a = new Date(epoch * 1000);
  let hour = a.getHours();
  let minutes = a.getMinutes();
  if (minutes < 10) {
    minutes = `0${minutes}`;
  }
  let time = `${hour}:${minutes}`;
  return time;
}

function getMode(response) {
  let today = response.data.dt;
  let timezone = response.data.timezone;
  let difference = today + timezone - 3600;
  let hours = timeConverter2(difference);
  let mode = document.getElementById("app");
  if (hours > 20 || hours < 6) {
    mode.classList.add("darkmode").remove("lightmode");
  } else {
    mode.classList.add("lightmode").remove("darkmode");
  }
}
.lightmode h1 {
  font-family: "Josefin Sans", sans-serif;
  text-align: right;
  color: #06384d;
  font-size: 32px;
  font-weight: 700;
}

.lightmode {
  font-family: "Josefin Sans", sans-serif;
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  border-style: solid;
  border-radius: 30px;
  border-color: #096386;
}

#app {
  margin: 10px 400px;
  padding: 10px 10px;
}

.element {
  display: block;
  text-align: center;
  font-size: 100px;
  position: relative;
  right: 10px;
}

.lightmode .current {
  display: block;
  position: relative;
  left: 100px;
  top: 5px;
  font-size: 35px;
  font-weight: 600;
  color: #06384d;
}

.lightmode .current-city {
  display: block;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #06384d;
}

.lightmode .date {
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 600;
  color: #06384d;
}

.lightmode .time {
  display: block;
  text-align: center;
  position: relative;
  bottom: 15px;
  font-size: 20px;
  font-weight: 600;
  color: #06384d;
}

.darkmode h1 {
  font-family: "Josefin Sans", sans-serif;
  text-align: right;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.darkmode {
  font-family: "Josefin Sans", sans-serif;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  border-style: solid;
  border-radius: 30px;
  border-color: #096386;
}

.darkmode .current {
  display: block;
  position: relative;
  left: 100px;
  top: 5px;
  font-size: 35px;
  font-weight: 600;
  color: #fff;
}

.darkmode .current-city {
  display: block;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
}

.darkmode .date {
  display: block;
  text-align: center;
  font-size: 25px;
  font-weight: 600;
  color: #fff;
}

.darkmode .time {
  display: block;
  text-align: center;
  position: relative;
  bottom: 15px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet" />

<div id="app" class="lightmode">
  <div class="container">
    <h1>WeatherWatch</h1>
    <div class="input-group mb-3">
      <form>
        <input type="text" class="form-control" id="keyword" placeholder="Search city..." aria-label="Input city" aria-describedby="button-addon2" autocomplete="off" />
        <div class="input-group-append">
          <submit class="btn btn-outline-secondary search-btn" type="button" id="button-addon2">
            Search
          </submit>
      </form>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <div class="element">
        </div>
        <span class="current"></span>
      </div>
      <div class="col-6">
        <span class="current-city">Lisbon</span>
        <p class="date"></p>
        <p class="time"></p>
      </div>
    </div>

最佳答案

我觉得问题出在这里:

if (hours > 17 || hours < 6) {
  mode.classList.add("darkmode").remove("lightmode");
}
if (hours < 17 || hours > 6) {
  mode.classList.add("lightmode").remove("darkmode");
}

以凌晨3点为例，两个循环都满足条件。所以应该是这样的:

if (hours > 17 || hours < 6) {
  mode.classList.add("darkmode").remove("lightmode");
}
else {
  mode.classList.add("lightmode").remove("darkmode");
}

您还应该检查边缘情况:

if (hours >= 6 && hours <= 17) {
  mode.classList.add("lightmode").remove("darkmode");
}
else {
  mode.classList.add("darkmode").remove("lightmode");
}

关于javascript - 如何根据时间自动更改 CSS 类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56828570/

25 4 0
文章推荐： javascript - 如何在表单提交时获取html组件值？
文章推荐： javascript - 在 .map 中添加条件
文章推荐： javascript - Ionic4 错误 TS2554 : Expected 1 arguments, 但得到 0
文章推荐： C#、DLL 导入 API 在 VS2012 .NET Framework 4.5 中无法正常工作
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com