使用js寫的一個簡易的投票
更新時間：2013年11月27日 17:40:59 作者：
投票想必大家并不陌生吧，下面為大家介紹下使用js是如何寫一個簡易的投票
大家直接自己看吧，請多多指教，這個是幾個月前寫的，現(xiàn)在全部整理一下。
<!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:380px; 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">如果微信將會進行收費，你將會怎么辦？</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>
復制代碼 代碼如下:
<!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:380px; 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">如果微信將會進行收費，你將會怎么辦？</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>
相關文章
JS實現(xiàn)對中文字符串進行utf-8的Base64編碼的方法(使其與Java編碼相同)
這篇文章主要介紹了JS實現(xiàn)對中文字符串進行utf-8的Base64編碼的方法,對比java的base64編碼程序,分析了javascript實現(xiàn)base64編碼的相關技巧,需要的朋友可以參考下2016-06-06
驗證javascript中Object和Function的關系的三段簡單代碼
今天重溫經典書籍。這一次看的是博客園李戰(zhàn)老師寫的<<悟透JavaScript>>，也是被樓豬翻看最多的技術書籍之一。2010-06-06
JavaScript觸發(fā)器詳解...2007-03-03
本文主要介紹了js實現(xiàn)樓層導航功能的示例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
用js來獲取上傳的文件名其實純粹是為了美化，友好。但是，可不是網上流傳的那樣，用 path.substring()的方法，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
JS中IP地址與整數(shù)相互轉換的實現(xiàn)代碼
這篇文章主要介紹了JS中IP地址與整數(shù)相互轉換的實現(xiàn)代碼,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了js對象繼承之原型鏈繼承,以實例形式分析了原型鏈繼承的實現(xiàn)方法與注意事項,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
javascript 用原型繼承來實現(xiàn)對象系統(tǒng)
對象系統(tǒng)中的繼承特性有三種方式:基于類，基于原型，基于元類2010-03-03
這篇文章主要介紹了js實現(xiàn)匹配時換色的輸入提示特效代碼,涉及javascript針對頁面元素的匹配及鼠標事件的相關使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
bluidea論壇的腳本板塊的版主寫的，不錯，轉到這！2008-07-07