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

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


代码如下:

<!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>

赞 (0)

相关推荐

  • JSP实现的简单Web投票程序代码

    本文实例讲述了JSP实现的简单Web投票程序.分享给大家供大家参考.具体如下: 这里使用文本文件作为数据存储的投票系统. 1. vote.java: package vote; import java.io.*; import java.util.*; public class vote { public String filePath = ""; public int n; private File voteFile; private BufferedReader fileRead;

  • 9个JavaScript评级/投票插件

    9个JavaScript评级/投票插件

    所以,越来越多的门户网站也开始加入评级或投票功能,这里是9个优秀的JavaScript实现的评级投票插件和教材,方便你二次开发和使用. jQuery Start Rating Prototype Starbox Prototype Livepipe Control.Rating Mootool Rabid Rating Favourite rating with jQuery and Ajax How to build a star ratings jQuery Plugin Reddit st

  • 简易的投票系统以及js刷票思路和方法

    简易的投票系统以及js刷票思路和方法

    早就听说有什么刷票脚本,微博投票等等相关的投票都有某些人去刷票. 试一下吧,兴许自己也会刷票呢?捣鼓了几个小时,终于有所眉目. (1)投票系统 要刷票,就得先有个投票界面. 当然,可以直接去各个投票网站就行,不过这里还是自己弄个投票页面,方便自己. 页面大致如下 或者 查看演示 照理,界面很简洁,但也基本有了投票的基本功能. 原始规则是:只能投一次票,然后提示成功,然后按钮不可用. 都是原生JS,DOM操作不灵活的可以借此练练手.当然,用jq将会很便捷. html/css部分 <!DOCTYPE

  • 原生JS实现在线问卷调查投票特效

    原生JS实现在线问卷调查投票特效

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS实现投票效果</title> <link rel="stylesheet" href="http://hovertree.com/texiao/js/24/style.css"

  • JSP生成jpeg图片用于投票

    一.前言 本文原作者为Tony Wang ,该文章涉及到文件的读写和jpg图片的自动生成.利用jsp+servlet的技术,jsp调用servlet生成图片. 二.首文件index.jsp如下: <%-- Author: Tony Wang E-mail: lucky_tony@163.net Date: 2001-01-01 如果对程序有什么疑问,可以和我联系, 另外程序如果有什么bug,麻烦指出!! --%><%@ page contentType="text/html;c

  • 基于js实现投票的实例代码

    基于js实现投票的实例代码

    本文实例讲述了JavaScript实现三种投票方式的实现方法,分享给大家供大家参考.具体如下: 一.js柱状投票图 效果图: 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

  • js脚本编写简单刷票投票系统

    本文实例为大家分享了js刷票投票系统的具体代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta h

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

    大家直接自己看吧,请多多指教,这个是几个月前写的,现在全部整理一下. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" > <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/j

  • 用js写的一个路由(简单实例)

    前几天在网上看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现路由</title> </head> <body> &l

  • 用JS写的一个Ajax库(实例代码)

    myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ <span style="white-space:pre"> </span>data: {}, //参数 url: "", //请求地址 //发生错误是调用 error: function(data) { }, //请求成功调用 success: function(data){ <

  • 用JS写了一个30分钟倒计时器的实现示例

    用JS写了一个30分钟倒计时器的实现示例

    前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下 <!DOCTYPE HTML> <html>     <head>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>         <title>Countdown Tim

  • 纯css+js写的一个简单的tab标签页带样式

    纯css+js写的一个简单的tab标签页带样式

    最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图:  接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b

  • 使用nodejs、Python写的一个简易HTTP静态文件服务器

    日常开发过程中,我们经常需要修改一些放在 CDN 上的静态文件(如 JavaScript.CSS.HTML 文件等),这个过程中,我们希望能有一种方式将线上 CDN 的目录映射为本地硬盘上的某个目录,这样,当我们在本地修改了某个文件时,不需要发布,刷新后马上能看到效果. 比如,我们的 CDN 域名是:http://a.mycdn.com,本地对应的目录是:D:\workassets,我们希望所有对 http://a.mycdn.com/* 的访问被映射到本地的 D:\workassets\* 下

  • 利用node.js如何搭建一个简易的即时响应服务器

    利用node.js如何搭建一个简易的即时响应服务器

    前言 本文默认您已经按照 nodejs 如果没有安装请安装,安装教程可以查看这篇文章,下面废话不多说,下面来看看这篇文章详细的内容介绍吧. 前提需要创建一个 前端项目 1. 创建一个html文件 写入以下内容 需要说明的是  /socket.io/socket.io.js 这个文件 服务器会生成 使用方法在 node_modules\socket.io\lib\socket.js里面 2. 创建一个js文件  (我的文件名字叫sock.js) 这个js文件是需要运行的文件 里面的代码都有注释 3

  • 用js写了一个类似php的print_r输出换行功能

    复制代码 代码如下: <script type="text/javascript"> <!-- var my={ str:'', deep:0, block:' ', get_pre:function(n) { pre=''; for(i=0;i<n;i++) { pre+=this.block; } return pre; }, show_obj:function(obj) { for(k in obj) { if(typeof(obj[k])!='objec

  • 用JS写的一个TableView控件代码

    用JS写的一个TableView控件代码

    请看看编码是否规范,使用是否方便HTML: 代码 复制代码 代码如下: <table id="customTableView"> <thead> <tr> <td>编号</td> <td>姓名</td> </tr> </thead> <tbody><!--template-tbody--> <tr name="" style=&q

  • 使用原生js写的一个简单slider

    复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,div,ul,li { margin: 0; padding: 0; } ul,li { list-style:

随机推荐