<!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. java.lang.Class.isPrimitive()用法解析

    一.概述: 此方法主要用来判断Class是否为原始类型(boolean.char.byte.short.int.long.float.double). 二.格式: Class.isPrimitive( ...

  2. Maven自定义绑定插件目标：创建项目的源码jar

    <build> <plugins> <!-- 自定义绑定,创建项目的源码jar --> <plugin> <groupId>org.apac ...

  3. 什么是WebPack，为什么要使用它？

    1.什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等) ...

  4. ExtPB.Net：窗体应用技巧（2）在树形导航下打开弹出的win窗口

    ExtPB.Net的demo程序有个树形导航菜单,里面的菜单打开的窗口放在右边的TabStrip控件中.我们可以设计win通过导航打开,但有时我们希望以弹出窗口的形式打开它,但怎么办呢?现在可以这样修 ...

  5. Android设置图片内存溢出（OOM）问题——Android开发进阶之路6

    ImageView设置图片必备常识技术: Android设备会给每个应用分配16M的内存空间,如果你设置的图片的比较大且同一个页面有多个时,经常会报OOM错误导致程序奔溃.所以在这种情况下我们必须要对 ...

  6. QService 服务容器

    原理 服务容器 服务主体,反射执行业务类 管理器 对服务容器进行控制 测试服务 向一个文件写入内容 启用一个HTTP服务 以下为日志: 2015-06-15 11:50:47.5313 Info QS ...

  7. JavaScript线程机制

    浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:JS引擎线程(用于处理JS).GUI渲染线程(用于页面渲染).浏览器事件触发线程(用于控制交互). 除此之外 ...

  8. 机器学习实战笔记(Python实现)-07-分类性能度量指标

    1.混淆矩阵 下图是一个二类问题的混淆矩阵,其中的输出采用了不同的类别标签 常用的衡量分类性能的指标有: 正确率(Precision),它等于 TP/(TP+FP) ,给出的是预测为正例的样本中的真正 ...

  9. 存储过程 保存 xml 数据

    示例: .net DataSet ds=.... string xml = ds.GetXml();xml = xml.Replace("'","''"); S ...

  10. OSI七层模型详解 TCP/IP协议

      总结 OSI中的层 功能 TCP/IP协议族 应用层 文件传输,电子邮件,文件服务,虚拟终端 TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 等等 表示层 数据格式化,代码转 ...