<!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. Delphi_04_Delphi_Object_Pascal_基本语法_02

    这里简单的描述Object的语法中的基本内容,数据类型.因为代码是自描述的所以不废话,直接贴代码. { 用户自定义类型 1.数组 2.动态数组 3.记录 4.集合 } program UserDefi ...

  2. 关于i++引出的线程不安全性的分析以及解决措施

    Q:i++是线程安全的吗? A:如果是局部变量,那么i++是线程安全. 如果是全局变量,那么i++不是线程安全的. 理由:如果是局部变量,那么i++是线程安全:局部变量其他线程访问不到,所以根本不存在 ...

  3. [连载]《C#通讯（串口和网络）框架的设计与实现》- 6.通讯控制器的设计

    目       录 第六章           通讯控制器的设计... 2 6.1           控制器接口... 2 6.2           串口控制器... 3 6.3          ...

  4. 国外远控软件DarkComet-RAT

    下载地址:[点此下载] 使用步骤: 注册noip.org账号创建主机地址. 安装并配置DUC. 配置监听端口 配置NO-IP Updater 然后点击Update ,配置成功则会提示Success. ...

  5. Android 手机卫士--9patch图

    本文主要介绍9patch图 *.9.png:android手机上,可以按需求自动拉伸的图片 本文地址:http://www.cnblogs.com/wuyudong/p/5947195.html,转载 ...

  6. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  7. 自动化集成部署udeployer 批量统一安装一键部署

    通过jenkins构建项目:version版本控制:udployer自动化集成:ucop业务巡检做到高效高可用的自动化体系.   1.0版本: 逻辑与业务分离,完美实现逻辑与业务分离,业务实现统一sh ...

  8. yii2 RESTful api的详细使用

    作者:白狼 出处:http://www.manks.top/yii2-restful-api.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则 ...

  9. ambari2.4.2_centos7 学习全纪录

    目录: 为什么要用Ambari 概念概述 原理简介 安装 创建集群 创建集群 手动修改配置 NameNode HA 安装SmartSense 二次开发 为什么要用Ambari Ambari 是 Apa ...

  10. MySQL的查询计划中ken_len的值计算

    本文首先介绍了MySQL的查询计划中ken_len的含义:然后介绍了key_len的计算方法:最后通过一个伪造的例子,来说明如何通过key_len来查看联合索引有多少列被使用. key_len的含义 ...