Jquery_jquery に基づく温度計アニメーション効果

スパン{位置:絶対;表示:ブロック;下:0px;幅: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;位置:相対;}
#Hg{高さ:0px;フォントサイズ:0px;背景色:#C00;幅:15px;}
#hot{高さ:100px;幅:15px; -color:#FF0; 位置:絶対; 上:0; 左:0;}



3.js

$('#Risk ').click(function(){
inputvalue =$('#num').val();//val() は入力要素の値を取得します。また、attr("value") を使用することもできます取得するには;
var inputnum=parseInt(inputvalue);
if($('#num').val().search("^-?\d $"){
alert("0 から 100 までの整数を入力してください!");
return false;
$("#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);
//ここで HTML をテキストに置き換えても同じです。
});
コードをページ上の対応する場所に 1 つずつコピーし、忘れずに呼び出してください。jquery フレームワークには表示条件が限られているため、効果は設計図とは異なりますが、実装の原則は同じです。皆さん、ようこそ。コミュニケーションするために！