<!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. 2016年最新mac下vscode配置golang开发环境支持debug

    网上目前还找不到完整的mac下golang环境配置支持,本人配置成功,现在整理分享出来. mac最好装下xcode,好像有依赖关系安装Homebrew打开终端窗口, 粘贴脚本执行/usr/bin/ru ...

  2. axis2+spring集成

    转载自:http://www.cnblogs.com/linjiqin/archive/2011/07/05/2098316.html 1.新建一个web project项目,最终工程目录如下: 注意 ...

  3. JS获取当前时间

    setInterval("getTime();", 1000); function getTime() { //document.getElementById('linkweb') ...

  4. HTML5新特性之Mutation Observer

    Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动时,Mutation Observer会得到通知. 要概念上,它很接近事件.可以理解为,当DOM发生变 ...

  5. Android Weekly Notes Issue #227

    Android Weekly Issue #227 October 16th, 2016 Android Weekly Issue #227. 本期内容包括: Google的Mobile Vision ...

  6. ButterKnife Zelezny从配置到使用

    插件介绍:ButterKnife是一个专注于Android系统的View注入框架,可以减少大量的findViewById以及setOnClickListener代码,可视化一键生成.又一神器,完美告别 ...

  7. 2-ser2003系统封装实验报告

    Ser2003需要挂载系统镜像 至此,ser2003的母盘制作完成!!! 来自为知笔记(Wiz) 附件列表

  8. Linux之od命令详解

    功能说明:输出文件内容.语 法:od [-abcdfhilovx][-A <字码基数>][-j <字符数目>][-N <字符数目>][-s <字符串字符数&g ...

  9. 安卓虚拟机adb shell sqlite3数据库

    adb shell 连接: //http://www.cnblogs.com/xiaobo-Linux/ Android把数据都存放在data/data目录下. 我们使用cd命令转到data/data ...

  10. Hibernate入门学习-安装hibernate插件

    最近一直在学习ssh框架,为了更方便hibernate的使用,所以在eclipse下载hibernate插件,安装插件有两种方法 第一种:本地安装 1).插件的官网下载地址:http://tools. ...