设计图如下：

1 .可扩展的超文本标记语言复制代码代码如下： div id=' mometer ' div id=' hot '/div span div id=' Hg header ' 0/div div id=' Hg '/div/span/div输入名称='aa '类型='text '值='请输入0-100的数值id='num'/输入名称类型='按钮' id='风险'值='查看度数/2.css复制代码代码如下： # num { color : # 999 } # mometer { position : relative；高度：100 px宽度：15 px背景-颜色： # CCC余量：50px}跨度{位置：绝对值显示：块；底部：0像素宽度：40 px} # Hgheader { height:15px线高：15 pxcolor : # ff 0000 font-size :14 px；字体系列Helvetica阿里亚尔：无衬线；边框-底部：#f00 1px实心；左侧：-40px；位置：相对；} # Hg { height :0 px font-size :0 px；背景-颜色： # C00宽度：15 px} # hot { height:100px宽度：15 px背景-颜色： # FF0位置：绝对；top:0left:0} 3.js复制代码代码如下：美元（文件)。ready(function(){ $('#hot ')).fadeTo(0，0)；//初始透明度为0;$('#num ').单击(function(){ this。select()；})$(“# Risk”).单击(function(){ input value=$(“# num”)).val()；//val()获取投入元素的值，另外还可以用attr('值)来获取；var输入数=Parseint(输入值)；if($('#num ').val().search('^-？\d $ ')！=0){ alert('请输入一个0-100的整数!');返回false}else{ $('#Hgheader ').html(输入值'')；if(输入数=100){输入数=100；$('#num ').val(100) $('#Hgheader ').html(100 '')；} else if(input num=0){ input num=0；$('#num ').val(0) $('#Hgheader ').html(0 '')；} } var列he=input num/100；$('#Hg ').动画({height:inputnum}，“show”)；$('#hot ').“fadeTo(”慢，列他)；//在这里把超文本标记语言换成文本效果也是一样的；});});将代码一一拷贝到页面相应的位置，然后记得调用框架框架，展示条件有限，所以效果跟设计图有出入，但实现原理是一样的，欢迎大家多多交流！