使用js写的一个简易的投票
2013-11-27 00:00
746 查看
大家直接自己看吧,请多多指教,这个是几个月前写的,现在全部整理一下。
<!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写的一个简易的投票
- 使用angular.js开发的一个简易todo demo
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(二)
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
- 一个简易的js图片轮播效果
- 使用node.js快速搭建简易本地HTTP服务
- JS学习之一个简易的日历控件
- 菜鸟,自己写着玩的一个投票js
- 全站的所有资源通用一个css 样式 边框大小 css使用js
- 在jsp的c标签循环后台对象属性的情况下,使用js提取其中一个id属性使用ajax传到后台删除
- 使用 Node.js 搭建一个 API 网关
- GridView其实是一个table,这里使用js循环table,代码如下:
- 使用Node.js开发一个在线聊天应用——编写后台
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 使用JS实现将GridView中的TextBox列的值博给GridView外的一个文本筐
- 如何发布一个自定义Node.js模块到NPM(详细步骤,附Git使用方法)
- 使用node.js ,Express, 和Mongodb 简历一个简单的Restful 网页服务-part1
- 使用Vue.js创建一个时间跟踪的单页应用
- 例子:使用Grunt创建一个Node.js类库