使用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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JavaScript入门基础
Aug 12 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
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生成带有雪花背景的验证码
2008/09/28 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python类的继承和多态代码详解
2017/12/27 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python版大富翁源代码分享
2018/11/19 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python3使用GUI统计代码量
2019/09/18 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
毕业自我鉴定怎么写
2014/03/25 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
校本研修个人总结
2015/02/28 职场文书
学习经验交流会总结
2015/11/02 职场文书