読んでみてください。いくつかアドバイスをください。これは数か月前に書きました。今、すべてを整理します。
次のようにコードをコピーします。
<!doctype html>
<html>
<頭>
<meta charset="utf-8" >
<タイトル></タイトル>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
body,div,a,span{マージン:0;パディング:0;}
.g-pt-10{ パディングトップ:10px }
.g-ta-c{ テキスト整列:センター }
.g-fz-16{ フォントサイズ:16px }
.gdb{ 表示:ブロック }
.gfl{ フロート:左 }
.gcw{ カラー:#fff }
.g-fz-18{ フォントサイズ:18px }
.gd-ib{ 表示:インラインブロック }
.g-cf:after {コンテンツ:"";
.g-cf { ズーム:1 }
a:hover{ テキスト装飾: なし;
.box{ 幅:705px; 高さ:242px; 背景:#f5f9fe; 1px ソリッド #6888a1;
div.mid{幅:330px;自動;
a.support{ 幅:124px; 高さ:73px; 背景:#008DCA URL("support.png");
a.oppose{ 幅:124px; 高さ:73px; 背景:#F78106 url("oppose.png");
.g-mt-45{ マージントップ:45px }
スパン.ライン{幅:380ピクセル;高さ:0自動;
スパン.ライン2{幅:80ピクセル;背景:#F78106;
</スタイル>
</head>
<本文>
<div>
<h3>WeChat に料金が請求されたらどうしますか? </h3>
<div>
<a onclick="support();">
<p id="supamount">0</p>
</a>
<a onclick="oppose();">
<p id="oppamount">0</p>
</a>
</div>
<div>
<p id="suppercent">0</p>%
<span><span id="supline"></span></span>
<p id="opppercent">0</p>%
</div>
</div>
<script type="text/javascript">
var sup=parseInt($('#supamount').text());
var opp=parseInt($('#oppamount').text());
関数サポート(){
sup+=1;
$('#supamount').text(sup.toString());
$('#suppercent').text(((sup/(sup+opp))*100).toFixed(0).toString());
$('#opppercent').text((100-(sup/(sup+opp))*100).toFixed(0).toString());
$('#supline').attr("style","width:"+380*(sup/(sup+opp))+"px");
}
関数反対(){
opp+=1;
$('#oppamount').text(opp.toString());
$('#suppercent').text(((sup/(sup+opp))*100).toFixed(0).toString());
$('#opppercent').text((100-(sup/(sup+opp))*100).toFixed(0).toString());
$('#supline').attr("style","width:"+380*(sup/(sup+opp))+"px");
}
</script>
</body>