The design diagram is as follows:
1.XHML
Copy Code code as follows:
<div id= "Mometer" >
<div id= "Hot" ></div>
<span>
<div id= "Hgheader" >0℃</div>
<div id= "Hg" ></div>
</span>
</div>
<input name= "AA" type= "text" value= "Please enter a value of 0-100" id= "num"/>
<input name= "" "type=" button "id=" Risk "value=" View Degrees "/>
2.css
Copy Code code as follows:
#num {color: #999;}
#mometer {position:relative; Height:100px;width:15px;background-color: #CCC; margin:50px;}
span{position:absolute;display:block;bottom:0px;width:40px;}
#Hgheader {height:15px;line-height:15px;color: #FF0000; font-size:14px;font-family:arial, Helvetica, Sans-serif;
Border-bottom: #f00 1px solid;left:-40px;position:relative;}
#Hg {height:0px; Font-size:0px;background-color: #C00; width:15px;}
#hot {height:100px;width:15px; Background-color: #FF0; position:absolute; top:0; left:0;}
3.js
Copy Code code as follows:
$ (document). Ready (function () {
$ ("#hot"). Fadeto (0,0);//initial transparency is 0;
$ (' #num '). Click (function () {this.select ();})
$ (' #Risk '). Click (function () {
inputvalue=$ (' #num '). Val ();//val () Gets the value of the INPUT element, in addition to attr ("value");
var inputnum=parseint (Inputvalue);
if ($ (' #num '). Val (). Search ("^-?\\d+$")!= 0) {
Alert ("Please enter an integer of 0-100!");
return false;
}else{
$ ("#Hgheader"). HTML (inputvalue+ "℃");
if (inputnum>=100) {
inputnum=100;
$ (' #num '). Val (100)
$ ("#Hgheader"). HTML (100+ "℃");
}else if (inputnum<=0) {
inputnum=0;
$ (' #num '). Val (0)
$ ("#Hgheader"). HTML (0+ "℃");
}
}
var columnhe=inputnum/100;
$ ("#Hg"). Animate ({height:inputnum}, ' Show ');
$ ("#hot"). Fadeto (' slow ', columnhe);
Here to change the HTML text effect is the same;
});
});
Copy code one by one to the appropriate location of the page, and then remember to call the jquery framework, the display of limited conditions, so the effect is different from the design diagram, but the principle is the same, welcome you to communicate a lot!
