JQuery 滑块可以与简单的计算函数一起使用吗?
Posted
技术标签:
【中文标题】JQuery 滑块可以与简单的计算函数一起使用吗?【英文标题】:Can a JQuery slider work with a simple calculation function? 【发布时间】:2016-12-29 16:45:51 【问题描述】:我正在尝试让一个 JQuery 滑块与一个简单的计算函数一起工作。
我有一个使用输入文本框的滑块,它显示用户选择的值。
我还有一个简单计算的例子,当用户在输入文本框中输入一个值并单击一个计算按钮时。
我希望发生的事情是 - 当用户拖动滑动条时 - 不仅显示滑动条中的值(它当前所做的),而且将该值带入计算器框(理想情况下,当用户拖动栏而不是当他们单击按钮时)。
我不知道该怎么做。请问大家有什么想法吗?
这是显示文本值框的滑块:
<html lang="us">
<head>
<title>jQuery Example slider2</title>
<!--uses these local .js and css files for the main slider-->
<link href="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.css" rel="stylesheet">
<script src="http://www.sypensions.org.uk/webcomponents/test/calc/external/jquery/jquery.js"></script>
<script src="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.js"></script>
</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)
testLump = (userInput*10)/5 ;
else
testLump = (userInput*2)/5 ;
//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>
</tr>
<tr>
<td>testLump
<div align="right"></div></td>
<td>
<input type="text" name="testLump" size="10" value="0" style="text-align:right "> <br />
</td>
</tr>
<tr>
<td>
<input name="reset" type="reset" value="Reset" >
<input type="button" value="Calculate" onClick="doMath ()">
</td>
</tr>
</table>
</FORM>
谢谢。
【问题讨论】:
【参考方案1】:不确定您的 doMath
函数究竟应该做什么,但在 slider
的 slide
函数内,您可以运行此函数并确保它完成您需要的所有更改。
这是一个例子:
function doMath()
//variable = value (declare all variables)
var userInput = $("#slidervalue").val();
var testLump = $("#calcvalue").val();
//output box = variable
var testLump_ans = testLump;
//put maths calcs here
if ( userInput>10)
testLump = (userInput*10)/5 ;
else
testLump = (userInput*2)/5 ;
//round off calc to 2 dec places
$("#calcvalue").val(custRound(testLump,2));
//round off function
function custRound(x,places)
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
$(function ()
$("#slider").slider(
min: 100, max: 5000, step: 50, value: 100,
slide: function( event, ui )
$("#slidervalue").val(ui.value);
doMath()
);
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);
);
);
<html lang="us">
<head>
<title>jQuery Example slider2</title>
<!--uses these local .js and css files for the main slider-->
<link href="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.css" rel="stylesheet">
<script src="http://www.sypensions.org.uk/webcomponents/test/calc/external/jquery/jquery.js"></script>
<script src="http://www.sypensions.org.uk/webcomponents/test/calc/jquery-ui.js"></script>
</head>
<body>
Slider
<div id="slider"></div>
<!--result box-->
<input id="slidervalue" type="text"> (min: 100, max: 5000)<br /><br />
calc value: <input id="calcvalue" type="text"><br /><br />
<!--main slider function-->
<script type="text/javascript">
</script>
</body>
</html>
【讨论】:
【参考方案2】:使用幻灯片功能。下面的示例使用从 0 到 100 的范围,步长为 1,从 100 初始值开始。每次用户滑动滑块时,doTheCalc() 函数都会运行并传入当前滑块值。
$("#theSelector").slider(
min: 0,
max: 100,
step: 1,
value: 100,
slide: function(e, ui)
$('#inputElement").value(ui.value)
doTheCalc(ui.value)
);
【讨论】:
以上是关于JQuery 滑块可以与简单的计算函数一起使用吗?的主要内容,如果未能解决你的问题,请参考以下文章