使用js写的一个简易的投票


Posted in Javascript onNovember 27, 2013

大家直接自己看吧,请多多指教,这个是几个月前写的,现在全部整理一下。

<!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>
Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
Javascript 实用小技巧
Apr 07 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
juery框架写的弹窗效果适合新手
Nov 27 #Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 #Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 #Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 #Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 #Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 #Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 #Javascript
You might like
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
高级护理专业毕业生推荐信
2013/12/25 职场文书
七年级政治教学反思
2014/02/03 职场文书
促销活动方案模板
2014/02/24 职场文书
聚美优品的广告词
2014/03/14 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
个人培训总结
2015/03/05 职场文书
处罚决定书范文
2015/06/24 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers