zoukankan      html  css  js  c++  java
  • 进度条投票-W

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    padding: 0;
    margin: 0;
    }
    body{
    background-color: #eee;
    }
    .max-box{
    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;
    0%;
    border-radius: 50px;
    border: 1px solid #ccc;
    padding: 5px;
    }
    .vote{
    300px;
    margin:50px auto;
    }
    .percent{
    300px;
    margin:0 auto;
    margin-top: 50px;
    text-align: center;
    }
    .vote p{
    float: left;
    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>

  • 相关阅读:
    leetCode 116.Populating Next Right Pointers in Each Node (为节点填充右指针) 解题思路和方法
    最终考过了驾照考试,如今就=驾照下来了
    JSON.parseObject的几种用法
    mybatisplus构造器 condition
    MyBatis中jdbcType=INTEGER、VARCHAR作用
    mybatis动态sql
    数据库表可以没有外键
    msyql的子查询,或者叫嵌套查询
    mysql 的编写顺序和执行顺序
    StringUtils的isBlank()方法
  • 原文地址:https://www.cnblogs.com/ZH1132672711/p/6249319.html
Copyright © 2011-2022 走看看