Let's take a look at it for yourself. Please give me some advice. I wrote it a few months ago. Now I want to sort it all out.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<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 {margin: 0; padding: 0 ;}
. G-pt-10 {padding-top: 10px ;}
. G-ta-c {text-align: center ;}
. G-fz-16 {font-size: 16px ;}
. G-d-B {display: block ;}
. G-f-l {float: left ;}
. G-c-w {color: # fff ;}
G-fz-18 {font-size: 18px ;}
. G-d-ib {display: inline-block ;}
. G-cf: after {content: ""; clear: both; display: table ;}
. G-cf {zoom: 1 ;}
A: hover {text-decoration: none; color: # ff0000 ;}
. Box {width: 705px; height: 242px; margin: 50px auto; background: # f5f9fe; border: 1px solid #6888a1 ;}
Div. mid {width: 330px; margin: 20px auto ;}
A. support {width: 124px; height: 73px; background: # 008DCA url ("support.png"); margin-right: 80px ;}
A. oppose {width: 124px; height: 73px; background: # F78106 url ("oppose.png ");}
G-mt-45 {margin-top: 45px ;}
Span. line {width: pixel PX; height: 17px; margin: 0 auto; background: # 008DCA ;}
Span. line2 {width: 80px; height: 17px; background: # F78106 ;}
</Style>
</Head>
<Body>
<Div class = "box">
<H3 class = "g-pt-10 g-ta-c g-fz-16"> what do you do if you will be charged? </H3>
<Div class = "mid g-cf">
<A class = "support g-d-B g-f-l" onclick = "support ();">
<P class = "g-ta-c g-c-w g-fz-18 g-mt-45" id = "supamount"> 0 </p>
</A>
<A class = "oppose g-d-B g-f-l" onclick = "oppose ();">
<P class = "g-ta-c g-c-w g-fz-18 g-mt-45" id = "oppamount"> 0 </p>
</A>
</Div>
<Div class = "g-ta-c">
<P class = "g-d-ib" id = "suppercent"> 0 </p> %
<Span class = "line g-d-ib g-cf"> <span class = "line2 g-d-ib g-f-l" id = "supline"> </span> </span>
<P class = "g-d-ib" id = "opppercent"> 0 </p> %
</Div>
</Div>
<Script type = "text/javascript">
Var sup = parseInt ($ ('# supamount'). text ());
Var opp = parseInt ($ ('# oppamount'). text ());
Function support (){
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 ");
}
Function oppose (){
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>