Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Progress</title>
- <script type="text/javascript" rel="script" src="javascript/jquery-3.3.1.js"></script>
- <style>
- .container{
- width: 500px;
- margin: auto;
- }
- .progress{
- margin: 0;
- padding: 0 ;
- background: red;
- width: 0;
- height: 30px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div>
- <button id="minus" style="padding-right: 10px">-10</button>
- <button id="plus">+10</button>
- </div>
- <div id="full-progress" style="padding: 0; width: 500px">
- <div class="progress">
- </div>
- </div>
- </div>
- <script>
- $(document).ready(function () {
- $('#plus').click(function () {
- let progress = $('.progress');
- let fullProgress = $('#full-progress');
- if(!(progress.css('width') == fullProgress.css('width'))){
- progress.css('width', '+=10%');
- }
- });
- $('#minus').click(function () {
- let progress = $('.progress');
- let fullProgress = $('#full-progress');
- if(!(progress.css('width') == "0px")){
- progress.css('width', '-=10%');
- }
- });
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement