在不使用任何庫的情況下，將溫度計上顯示的攝氏溫度更改爲華氏溫度

我想製作一個攝氏溫度計，當按下溫度計時，將顯示相應的溫度（°F）。在不使用任何庫的情況下，將溫度計上顯示的攝氏溫度更改爲華氏溫度

我做了一個指針和一個溫度計，但我不知道該怎麼做才能在按下按鈕時獲得正確的溫度。

我不想利用任何外部庫。以下是我試過到目前爲止：

const temperatureChange = (celsius) => { 
 
    return celsius * (9/5); 
 
}; 
 

 
const getFahrenheit = (celsius) => { 
 
    return temperatureChange(celsius) + 32; 
 
}; 
 

 
console.log(+ getFahrenheit(15) + '°F');

html { 
 
    background: #a4b6d3; 
 
} 
 
    
 
.thermometer { 
 
width: 25px; 
 
height: 215px; 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
margin-top: -107px; 
 
margin-left: -22px; 
 
background: #fff; 
 
border: 10px solid #333; 
 
border-bottom: 0; 
 
-webkit-border-top-left-radius: 60px; 
 
-webkit-border-top-right-radius: 60px; 
 
-moz-border-radius-topleft: 60px; 
 
-moz-border-radius-topright: 60px; 
 
border-top-left-radius: 60px; 
 
border-top-right-radius: 60px; 
 
} 
 
    
 
.thermometer::before { 
 
    content: " "; 
 
    position: absolute; 
 
    z-index: 0; 
 
    bottom: -56px; 
 
    left: -18px; 
 
    width: 40px; 
 
    border: 10px solid #fff; 
 
    height: 40px; 
 
    -webkit-border-radius: 30px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
} 
 
    
 
.thermometer::after { 
 
    content: ""; 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    position: absolute; 
 
    bottom: -66px; 
 
    left: -28px; 
 
    background: red; 
 
    border: 10px solid #333; 
 
    -webkit-border-radius: 60px; 
 
    -moz-border-radius: 60px; 
 
    border-radius: 60px; 
 
    z-index: -1; 
 
} 
 
    
 
.thermometer-value { 
 
font-family: Arial,sans-serif; 
 
position: absolute; 
 
display: block; 
 
margin: 0; 
 
border: 0; 
 
width: 8px; 
 
height: 200px; 
 
top: 21px; 
 
left: 8px; 
 
overflow: hidden; 
 
text-indent: -30px; 
 
background: red; 
 
} 
 
.thermometer-cover { 
 
position: absolute; 
 
display: block; 
 
width: 8px; 
 
height: 200px; 
 
border: 0; 
 
left: 0; 
 
bottom: 0%; 
 
background: #ccc; 
 
} 
 
    
 
.pointer { 
 
    position:absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -77px; 
 
    margin-left: -22px; 
 
    width: 45px; 
 
    height: 200px; 
 
    background: none; 
 
    border:none; 
 
}

<!DOCTYPE html> 
 
<html lang="pl"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel="stylesheet" href="termometr.js"> 
 
    
 
    <title>Termometr</title> 
 
    
 
</head> 
 
<body> 
 
         <!-- thermometer --> 
 
    
 
    <div class="thermometer"> 
 
     <div class="pointer"> 
 
      
 
     </div> 
 
    </div> 
 
         <!-- input --> 
 

 
    <div class="input"> 
 
     <form> 
 
      <input type="text" placeholder="°C" onfocus="this.placeholder=''" onblur="this.placeholder=''">    
 
      <input type="submit" value="Run">    
 
     </form>    
 
    </div> 
 
    
 
</body> 
 
</html>

來源

2017-11-10 Nieuport

的可能的複製[我如何使用JavaScript文本輸入字段的值？（https://stackoverflow.com/questions/11563638/how-do-i- get-the-value-of-text-input-field-using-javascript） – Kurt

重新排序了一些概念，並修復了我拼寫。 –

所有你需要一些ID添加到這個需要找到合適的輸入元素，輸入字段<input id='temperature'首先得到輸入值。

之後，您將需要附加一個功能，例如function run(event){}到按鈕，它可以做到多種方式，從document.getElementById("buttonid").onclick=run(event)...開始或使用<input type="submit" value="Run" onclick="run(event)">在剪切我附加函數形成onsubmit事件：<form onsubmit="run(event)">，因爲run是一個提交按鈕，當它被點擊時，一個事件提交表單正在被解僱。該活動正在重新路由到action表單中所述頁面，例如：<form action=actionpage.php >，但是我們尚未填寫任何操作頁面，也就是說，當您單擊該按鈕時，表單將嘗試打開一個不存在的頁面。爲了防止有必要通過在分配給onsubmit事件的run函數中執行event.preventDefault();來防止提交事件的默認行爲。之後，通過使用getElementById()，我們找到我們的輸入元素並將其value存儲爲變量，例如， inputcelcius，這個值我們可以傳遞給你的getFahrenheit()函數以獲得華氏溫度。

正如你可以在代碼片段中看到的，我已經調整了一點你的css並添加了兩行，它們改變了css，以便在-100到100度之間的範圍內以圖形方式顯示華氏溫度攝氏

const temperatureChange = (celsius) => { 
 
    return celsius * (9/5); 
 
}; 
 

 
const getFahrenheit = (celsius) => { 
 
    return temperatureChange(celsius) + 32; 
 
}; 
 

 

 

 
var run = (e) => { 
 
    e.preventDefault(); 
 
    var inputcelcius = document.getElementById('temperature').value; 
 
    var pointer = document.getElementsByClassName('pointer')[0]; 
 
    var fahrenheit = getFahrenheit(inputcelcius) 
 
    pointer.innerHTML = fahrenheit+'°F'; 
 
    pointer.style.marginTop = inputcelcius * -1+5+ 'px'; 
 
    pointer.style.height = inputcelcius*1+100+ 'px'; 
 
    console.log(pointer.style); 
 
}; 
 

 

 
console.log(+ getFahrenheit(15) + '°F');

html { 
 
    background: #a4b6d3; 
 
} 
 
    
 
.thermometer { 
 
width: 25px; 
 
height: 215px; 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
margin-top: -107px; 
 
margin-left: -22px; 
 
background: #fff; 
 
border: 10px solid #333; 
 
border-bottom: 0; 
 
-webkit-border-top-left-radius: 60px; 
 
-webkit-border-top-right-radius: 60px; 
 
-moz-border-radius-topleft: 60px; 
 
-moz-border-radius-topright: 60px; 
 
border-top-left-radius: 60px; 
 
border-top-right-radius: 60px; 
 
} 
 
    
 
.thermometer::before { 
 
    content: " "; 
 
    position: absolute; 
 
    z-index: 0; 
 
    bottom: -56px; 
 
    left: -18px; 
 
    width: 40px; 
 
    border: 10px solid #fff; 
 
    height: 40px; 
 
    -webkit-border-radius: 30px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
} 
 
    
 
.thermometer::after { 
 
    content: ""; 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    position: absolute; 
 
    bottom: -66px; 
 
    left: -28px; 
 
    background: red; 
 
    border: 10px solid #333; 
 
    -webkit-border-radius: 60px; 
 
    -moz-border-radius: 60px; 
 
    border-radius: 60px; 
 
    z-index: -1; 
 
} 
 
    
 
.thermometer-value { 
 
font-family: Arial,sans-serif; 
 
position: absolute; 
 
display: block; 
 
margin: 0; 
 
border: 0; 
 
width: 8px; 
 
height: 200px; 
 
top: 21px; 
 
left: 8px; 
 
overflow: hidden; 
 
text-indent: -30px; 
 
background: red; 
 
} 
 
.thermometer-cover { 
 
position: absolute; 
 
display: block; 
 
width: 8px; 
 
height: 200px; 
 
border: 0; 
 
left: 0; 
 
bottom: 0%; 
 
background: #ccc; 
 
} 
 
    
 
.pointer { 
 
    position:absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -77px; 
 
    margin-left: -13px; 
 
    width: 25px; 
 
    height: 0px; 
 
    background: red; 
 
    border:none; 
 
    font-size: 10px; 
 
}

 
 
    <div class="thermometer"> 
 
     <div class="pointer"> 
 
      
 
     </div> 
 
    </div> 
 

 
    <div class="input"> 
 
     <form onsubmit="run(event)"> 
 
      <input id='temperature' type="text" placeholder="°C" onfocus="this.placeholder=''" onblur="this.placeholder=''">    
 
      <input type="submit" value="Run" >    
 
     </form>    
 
    </div>

來源

2017-11-11 01:48:40

在不使用任何庫的情況下，將溫度計上顯示的攝氏溫度更改爲華氏溫度

回答

相關問題