Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<input name="" id="tst" /> <br />
<input type="button" name="" value="Warmer" onmouseup="heater.heat('tst',1);"/>
<input type="button" name="" value="Colder" onmouseup="heater.heat('tst',-1);"/>
<input type="button" name="" value="Set Min" onmouseup="heater.setmin('tst',0);"/>
<input type="button" name="" value="Set Max" onmouseup="heater.setmax('tst',300);"/>
<script type="text/javascript">
/*<![CDATA[*/
var heater={
init:function(o){
heater[o.id]={
obj:document.getElementById(o.id),
temp:o.temperature,
min:o.min,
max:o.max,
i:o.increment
}
},
heat:function(id,ud){
var o=heater[id],ud=typeof(ud)=='number'&&ud==0?0:ud<0?-1:1;
if (o){
o.obj.value=Math.min(Math.max(o.temp+=(ud*o.i),o.min),o.max);
}
},
setmin:function(id,nu){
var o=heater[id];
if (o&&typeof(nu)=='number'){
o.min=Math.min(nu,o.max);
this.heat(id,0);
}
},
setmax:function(id,nu){
var o=heater[id];
if (o&&typeof(nu)=='number'){
o.max=Math.max(nu,o.min);
this.heat(id,0);
}
}
}
heater.init({
id:'tst',
temperature:100,
min:10,
max:200,
increment:2
});
/*]]>*/
</script>
</body>
</html>