라이브러리를 사용하지 않고 온도계에 표시된 섭씨 온도를 화씨로 변경하십시오.

누르면 섭씨 온도계가 표시되는 섭씨 온도계를 만들고 싶습니다.라이브러리를 사용하지 않고 온도계에 표시된 섭씨 온도를 화씨로 변경하십시오.

나는 포인터와 온도계를 만들었지 만 버튼을 눌러 올바른 온도를 얻으려면 어떻게해야할지 모르겠다.

외부 라이브러리를 사용하고 싶지 않습니다. 여기에 지금까지 시도한 작업은 다음과 같습니다

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>

이 적절한 입력 요소를 찾아하는 데 필요한 입력 필드 <input id='temperature' 일부 ID를 추가해야합니다 모든

출처

2017-11-10 Nieuport

가능한 복제 [I 자바 스크립트를 사용하여 텍스트 입력 필드의 값을 어떻게합니까?] (https://stackoverflow.com/questions/11563638/how-do-i- get-the-value-of-text-input-field-javascript) – Kurt

일부 개념을 재정렬하고 그렇게 고정했습니다. 나 맞춤법. –

먼저를 얻을 수 입력 값.

그 후에는 함수를 첨부해야합니다. 버튼에 function run(event){} 버튼을 입력하면 document.getElementById("buttonid").onclick=run(event)... 또는 <input type="submit" value="Run" onclick="run(event)">을 사용하여 잘라 내기에서 여러 가지 방법으로 수행 할 수 있습니다. 이벤트를 작성하는 기능을 첨부합니다. <form onsubmit="run(event)"> : 실행 버튼은 제출 버튼이며 클릭하면 양식을 제출하는 이벤트입니다. 해고 중입니다. 이벤트가 action 양식 (예 : <form action=actionpage.php >) 속성에 명시된 페이지로 경로 변경 중입니다. 그러나 어떤 액션 페이지도 채우지 않았습니다. 즉, 버튼을 클릭하면 양식이 기존 페이지를 열려고 시도합니다. onsubmit 이벤트에 할당 된 run 함수에서 event.preventDefault();을 실행하여 전송 이벤트의 기본 동작을 방지해야합니다. getElementById()을 사용하여 입력 요소를 찾고 value을 변수에 저장합니다. inputcelcius은 화씨 온도를 얻기 위해 getFahrenheit() 함수에 전달할 수있는 값입니다.

스 니펫 코드에서 볼 수 있듯이 CSS를 약간 조정하고 화씨 -100도에서 100도 사이의 온도에서 그래픽으로 온도를 그래픽으로 표시하기 위해 CSS를 변경하는 두 줄을 추가했습니다. 섭씨

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

라이브러리를 사용하지 않고 온도계에 표시된 섭씨 온도를 화씨로 변경하십시오.

답변

관련 문제