0
我想获得一个JQuery滑块来使用简单的计算函数。JQuery滑块可以使用简单的计算函数吗？
我有滑块使用输入文本框，它显示用户选择的值。
我还有另一个简单计算的例子，当用户在输入文本框中输入一个值并点击一个计算按钮。
我想要发生的事情是 - 当用户拖动滑动条时 - 不仅显示来自滑动条（它当前所做的）的值，而且将该值带入计算器框中（并且理想地在用户拖动栏，而不是当他们点击按钮时）。
我不知道如何做到这一点。任何人有任何想法吗？
这与文本框的值所示的滑块：
<html lang="us">
<head>
\t <title>jQuery Example slider2</title>
\t
\t <!--uses these local .js and css files for the main slider-->
\t <link href="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.css" rel="stylesheet">
\t <script src="http://www.sypensions.org.uk/webcomponents/test/calc/external/jquery/jquery.js"></script>
\t <script src="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.js"></script>
\t </head>
<body>
Slider
<div id="slider"></div>
<!--result box-->
<input id="slidervalue" type="text"> (min: 100, max: 5000)<br />
<!--main slider function-->
<script type="text/javascript">
$(function() {
$("#slider").slider({
min: 100, max: 5000, step: 50, value: 100,
slide: function(event, ui) {
$("#slidervalue").val(ui.value);
}
});
var initialValue = $("#slider").slider("option", "value");
$("#slidervalue").val(initialValue);
$("#slidervalue").change(function() {
var oldVal = $("#slider").slider("option", "value");
var newVal = $(this).val();
if (isNaN(newVal) || newVal < 10 || newVal > 100) {
$("#slidervalue").val(oldVal);
} else {
$("#slider").slider("option", "value", newVal);
}
});
});
</script>
</body>
</html>计算的实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function doMath() {
//variable = value (declare all variables)
var userInput = eval(document.myform.userInput.value)
var testLump = eval(document.myform.testLump.value)
//output box = variable
var testLump_ans = testLump;
//put maths calcs here
if (userInput>10) {
\t testLump = (userInput*10)/5 ;
\t }
\t else {
\t testLump = (userInput*2)/5 ;
\t }
//round off calc to 2 dec places
document.myform.testLump.value=custRound(testLump,2);
document.myform.userInput.value=custRound(userInput,2);
}
//round off function
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}
</script>
</HEAD>
<BODY>
<FORM NAME="myform">
<table>
<tr>
<td>User Input</td>
<td><input type="text" name="userInput" size="10" value="0" style="text-align:right "> </td>
\t </tr>
\t <tr>
\t \t <td>testLump
\t \t <div align="right"></div></td>
\t \t <td>
\t \t <input type="text" name="testLump" size="10" value="0" style="text-align:right "> <br />
\t \t </td>
\t </tr>
\t
\t <tr>
\t <td>
\t <input name="reset" type="reset" value="Reset" >
<input type="button" value="Calculate" onClick="doMath()">
</td>
\t </tr>
</table>
</FORM>Ť汉克斯。