Javascript表格計算輸出

-1

我有一個表格來計算每平方米天花板的價格。並將離子範圍滑塊作爲輸入，然後計算價格並將數據輸出到輸入。但我需要改變輸入span或div。有什麼建議麼？Javascript表格計算輸出

下面是HTML：

<form id="calc"> 
    <div id="1"> 

    <p> 
    <input id="rel" oninput=" 
    var v = this.value; 
    this.form.new.value = isNaN(v) ? '' : (v * 450).toFixed (0); 
    var v = this.value; this.form.new2.value = isNaN(v) ? '' : (v * 650).toFixed (0)" 
    style="display: none;"> 
    </p> 

    <p><p> 
    <span class="small">from </span> 
<span class="new"></span> 
    <input type="text" disabled="disabled" name="new" size="2" maxlength="4" value="0" > 
    <span class="small">to </span><input type="text" disabled="disabled" name="new2" size="2" maxlength="4" value="0"> 
    <div class="result" id="result"> 

    </div> 
    </p> 

    </div> 
</form>

，在這裏你可以找到它是如何工作http://jsfiddle.net/khvoroffski/50apyyr5/

來源

2017-08-30 kh1

你想本地JS的例子嗎？ –

這將是很好。我想要關於當前代碼的建議，也許在jsfiddle中進行一些編輯。 – kh1

請在這個例子很好看，我給你做FUNC你做的設計（CSS）。

/*Chrome*/ 
 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
 
    input[type='range'] { 
 
     overflow: hidden; 
 
     width: 10px; 
 
     -webkit-appearance: none; 
 
     background-color: #9a905d; 
 
    } 
 
    
 
    input[type='range']::-webkit-slider-runnable-track { 
 
     height: 10px; 
 
     -webkit-appearance: none; 
 
     color: #13bba4; 
 
     margin-top: -1px; 
 
    } 
 
    
 
    input[type='range']::-webkit-slider-thumb { 
 
     width: 10px; 
 
     -webkit-appearance: none; 
 
     height: 10px; 
 
     cursor: ew-resize; 
 
     background: #434343; 
 
     box-shadow: -10px 0 0 0px #43e5f7; 
 
    } 
 

 
} 
 
/** FF*/ 
 
input[type="range"]::-moz-range-progress { 
 
    background-color: #43e5f7; 
 
} 
 
input[type="range"]::-moz-range-track { 
 
    background-color: #9a905d; 
 
} 
 
/* IE*/ 
 
input[type="range"]::-ms-fill-lower { 
 
    background-color: #43e5f7; 
 
} 
 
input[type="range"]::-ms-fill-upper { 
 
    background-color: #9a905d; 
 
}

<script> 
 

 
function E (ele) {return document.getElementById(ele)} 
 
function CALC (value_) { 
 

 
    var SPAN = E("SliderValue") 
 
    var FROM = E("FROM") 
 
    var TO = E("TO") 
 
    var currentValue = E("SliderValue") 
 
    
 
    var WIDTH_OF_SLIDER = E("rel") 
 
    
 
    var positionInfo = WIDTH_OF_SLIDER.getBoundingClientRect(); 
 
    var width_IN_PIX = positionInfo.width; 
 

 
    FROM.value = isNaN(value_) ? '' : (value_ * 450).toFixed (0); 
 
    TO.value = isNaN(value_) ? '' : (value_ * 650).toFixed (0); 
 
    
 
    currentValue.innerHTML = value_ + "" 
 
    
 
    var COEFICIJENT = width_IN_PIX/100 
 
    
 
    currentValue.style.left = (value_ * COEFICIJENT) + "px" 
 
    
 
    
 
} 
 
</script> 
 

 
<form id="calc" 
 
> 
 
    <div id="1"> 
 

 
    <p> 
 
    <input id="rel" 
 
    oninput="CALC(this.value)" 
 
    type="range" 
 
    maxValue="50" 
 
    minValue="5" 
 
    value="0" 
 
    step="1" 
 
    style="width:100%;background-color:red;" > 
 
    
 
    </p> 
 

 
    
 
    
 
    <span class="small" >from </span> 
 
    <span id="SliderValue" style="position:absolute;left:0;" > </span> 
 
    
 
    <input type="text" id="FROM" value="0" /> 
 
    <span class="small">to </span> 
 
    <input type="text" id="TO" value="0" /> 
 
    <div class="result" id="result" > </div> 
 
    
 
    
 
    </div> 
 
    
 
</form>

來源

2017-08-31 19:27:33

Javascript表格計算輸出

回答

相關問題