如何使用css和javascript在html中制作溫度選擇器？-有解無憂

我想實作一個類似的效果這個我怎么會在HTML與CSS和JavaScript實作這一目標？

<button onclick="addTemp()">?</button>
<input id="TempBox" value="15" type="text">
<button onclick="remTemp()">?</button>

<script>
function addTemp() {
    document.getElementById("TempBox").innerHTML = document.getElementById("TempBox").value   1;
}
function remTemp() {
    document.getElementById("TempBox").innerHTML = document.getElementById("TempBox").value - 1;
}
</script>

我還想讓它在下一次點擊時超過 28 時說 MAX，如果它低于 15 時就說 MIN。

另外我不知道如何用 css 實作這種外觀，設定溫度更高或更低的按鈕可以是任何大小，但整個東西的最大高度是 120px。

從邏輯上講，javascript 不起作用，因為我不知道如何實作它：/

提前致謝！

PS如果需要/如果你愿意，使用JQuery

uj5u.com熱心網友回復：

首先，設定元素的.innerHTML屬性<input>沒有效果。你應該改變value：

document.getElementById("TempBox").value = ...

其次，由于value是字串，使用運算子將導致結果被連接，而不是數字相加。您必須先將value變成一個數字，然后再對其加（或減）1：

Number(document.getElementById("TempBox").value)

交替：

parseInt(document.getElementById("TempBox").value)

所以你的addTemp()功能會變成：

function addTemp() {
    document.getElementById("TempBox").value = Number(document.getElementById("TempBox").value)   1;
}

然后剩下的任務是添加事件處理程式。沒有 jQuery，這是一種方法：

document.querySelector('button').click = addTemp;
document.querySelector('button:nth-of-type(2)').click = remTemp;

至于在達到極限時說“MAX”或“MIN”，這可能不是最好的用戶體驗，因為用戶如何知道選擇了最大值還是最小值？此外，通過將字串放在應該包含數字的欄位中，您會更難決議然后轉換為相應的數字。最好將 MIN/MAX 警告放在<input>欄位之外。這是我添加該邏輯的方法：

function addTemp() {
    document.getElementById("TempBox").value = Math.Min(28, Number(document.getElementById("TempBox").value)   1);
    if (document.getElementById("TempBox").value >= 28) {
        // Alert the user that they are at the max
    }
}

uj5u.com熱心網友回復：

使用一些字體很棒的圖示和功能來增加減少度數。

從中獲取值div，然后將限制min. 15和max. 28限制。

使用了一些基本的 JavaScript 。如果您遇到任何問題，請隨時在評論中聯系。

它也可以作業input，如果你想使用input它，它就像div用input標簽和innerHTML值替換標簽一樣簡單。然后根據它重新設計。

document.querySelector(".decTempUnits").addEventListener("click", decreaseUnits);

function decreaseUnits() {
  var units = document.getElementsByClassName("temp")[0].innerHTML
  if (units > 15) {
    units--;
    document.getElementsByClassName("temp")[0].innerHTML = units;
    document.querySelector(".demo").innerHTML = "";
  } else if (units == 15) {
    document.querySelector(".demo").innerHTML = "Minimum limit reached";
  }
}

document.querySelector(".incTempUnits").addEventListener("click", increaseUnits);

function increaseUnits() {
  var units = document.getElementsByClassName("temp")[0].innerHTML
  if (units < 28) {
    units  ;
    document.getElementsByClassName("temp")[0].innerHTML = units;
    document.querySelector(".demo").innerHTML = "";
  } else if (units == 28) {
    document.querySelector(".demo").innerHTML = "Maximum limit reached";
  }
}

.contaitner {
  user-select: none;
  width: 120px;
  height: 120px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.tempContaitner {
  font-size: 55px;
  position: relative;
}

.degree {
  position: absolute;
}

.units {
  font-size: 24px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="contaitner">
  <span class="incTempUnits units"><i class="fa fa-chevron-up"></i></span>
  <div class="tempContaitner"><span class="temp">20</span><span class="degree">°</span></div>
  <span class="decTempUnits units"><i class="fa fa-chevron-down"></i></span>
</div>
<div class="demo"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/341608.html

標籤：javascript html 查询 css

上一篇：無法使用Flask和JQuery上傳影像

下一篇：Javascript：我正在嘗試在用戶在頁面上滾動時創建滾動，但我一直遇到“moveImaeCalc”的NaN錯誤