<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #eee;
}
.max-box{
width: 300px;
height: 25px;
background-color: #fff;
border-radius: 50px;
border: 1px solid #ccc;
margin:10px auto;
position: relative;
overflow: hidden;
}
.min-box{
position: absolute;
top:0;
background-color: yellow;
height: 14px;
width: 0%;
border-radius: 50px;
border: 1px solid #ccc;
padding: 5px;
}
.vote{
width: 300px;
margin:50px auto;
}
.percent{
width: 300px;
margin:0 auto;
margin-top: 50px;
text-align: center;
}
.vote p{
float: left;
width: 150px;
cursor: pointer;
}
.vote-x{
text-align: right;
}
</style>
</head>
<body>
<div class="percent"><span class="figure">0</span> <i>%</i></div>
<div class="max-box">
<div class="min-box">

</div>
</div>
<div class="vote">
<p class="vote-v">支持</p>
<p class="vote-x">反对</p>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function () {

$(".vote-v").click(function () {
var $stripBox = $('.min-box');
var $stripW = $('.min-box').width();
var $num = 30;
var $figure = $('.figure').text();//百分数统计
var $figureR = $('.figure');
var $stripnum = $stripW+ $num +'px';
var $figureNum = parseInt($figure)+10;
$figureR.text($figureNum);

if($stripW >= 300){
$figureR.text(100);
}else {
$stripBox.css({
'width': $stripnum
});
}
});
$(".vote-x").click(function () {
var $stripBox = $('.min-box');
var $stripW = $('.min-box').width();
var $num = 30;
var $stripnum = $stripW- $num +'px';
var $figure = $('.figure').text();//百分数统计
var $figureR = $('.figure');
var $figureNum = parseInt($figure)-10;
$figureR.text($figureNum);

if($stripW <= 20){
$figureR.text(0);
}else {
$stripBox.css({
'width': $stripnum
})
}
});
})();

</script>
</html>

进度条投票-W的更多相关文章

  1. jquery——彩色投票进度条

    一.需求 如下图 重点是要实现进度条. 二.分析 html5新增及删除标签一文中提到过html5新增了progress标签.但是肯定有兼容性问题.生成环境不适用,所以要模拟实现. 原理:动态设置< ...

  2. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  3. PHP上传实现进度条

    Web上传文件的三种解决方案

  4. Android -- 自定义带进度条的按钮

    1. 实现了一个带进度条的按钮,完成后显示提示信息,并设置按钮为不可再次被点击

  5. Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  6. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  7. iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. 进度条，随机数---demo笔记【原创】

    本人学习笔记,参考网上代码完成 makefile TEST_OBJ := rng_app MAKEOPT := ARCH=arm CROSS_COMPILE=arm-none-linux-gnueab ...

  9. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

随机推荐

  1. 《连载 | 物联网框架ServerSuperIO教程》1.4种通讯模式机制。附小文：招.NET开发，结果他转JAVA了，一切都是为了生活

    参考文章: 1.SuperIO通讯框架介绍,含通信本质 2.C#跨平台物联网通讯框架ServerSuperIO(SSIO) 一.感慨 上大学的时候,没有学过C#,花了5块钱在地坛书市买了一本教程,也就 ...

  2. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  3. 开发属于自己的yeoman脚手架（generator-reactpackage）

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  4. Web报表工具FineReport填报界面键盘操作

    对于一张填报数据较多的报表,需要用户频繁地操作鼠标.而FineReport填报界面除去按钮类型的控件,其余可以完全使用键盘而不需要用鼠标操作,对于用户而言,这将极大的节省信息录入的时间. 这里我们对填 ...

  5. ArcGIS Engine开发前基础知识（1）

    ArcGIS二次开发是当前gis领域的一项重要必不可少的技能.下面介绍它的基本功能 一.ArcGIS Engine功能 在使用之前首先安装和部署arcgis sdk,(在这里不在赘述相关知识)可以实现 ...

  6. Linux Distribution / ROM

    Linux发行版 http://unix.stackexchange.com/questions/87011/how-to-easily-build-your-own-linux-distro 这个文 ...

  7. Android Stuido 常用快捷键

    Android Stuido 常用快捷键 Ctrl + Z : 撤消 Ctrl + G : 定位行 Ctrl + / : 单行注释 Ctrl + Shift + Z : 恢复 Ctrl + J : 快 ...

  8. Event Handler

    在Event Handler中,有一种特殊的Event Handler,称之为Synchronizer或者Denormalizer,其作用就是为了同步“Query Database”.Query Da ...

  9. 如何利用mount命令将另外一个linux服务器上的目录挂在到本机？

    你先要在192.168.1.100上开启NFS服务并编辑/etc/exports文件: chkconfig --level 35 nfs on service nfs start vi /etc/ex ...

  10. C#中DateTime.Ticks属性及Unix时间戳转换

    1.相关概念 DateTime.Ticks:表示0001 年 1 月 1 日午夜 12:00:00 以来所经历的 100 纳秒数,即Ticks的属性为100纳秒(1Ticks = 0.0001毫秒). ...