Fatal编程技术网
  • javascript/
  • Javascript 如何在本地存储中创建和存储进度条的值

Javascript 如何在本地存储中创建和存储进度条的值

javascript jquery

Javascript 如何在本地存储中创建和存储进度条的值,javascript,jquery,Javascript,Jquery,首先，我有一个任务文本区和一个添加按钮。当点击按钮时，它将被存储在数据库中。我只想用一个进度条和递增和递减按钮输出任务 有人知道引导进度条吗 进度条必须递增和递减 最后一个值必须是用户返回进度条时的最新值 我认为jquery和javascript是最好的解决方案。但我不知道有谁能帮忙 以下是输出代码： <html> <head> <title> Customize Bootstrap progressbar </tit

首先，我有一个任务文本区和一个添加按钮。当点击按钮时，它将被存储在数据库中。我只想用一个进度条和递增和递减按钮输出任务

有人知道引导进度条吗

  • 进度条必须递增和递减
  • 最后一个值必须是用户返回进度条时的最新值
我认为jquery和javascript是最好的解决方案。但我不知道有谁能帮忙

以下是输出代码：

<html>
<head>
    <title>
        Customize Bootstrap progressbar
    </title>
    <link href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

</head>
<body style="margin-top: 100px">
    <div class=" col-sm-6 col-sm-offset-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Customize Bootstrap progressbar
                </h3>
            </div>
            <div class="panel-body" style="padding-top: 50px">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0 %" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" onclick="progress.increment(10)">
                        Increment
                    </button>
                    <button type="button" class="btn btn-default" onclick="progress.decrement(10)">
                        Decrement
                    </button>
                    <button type="button"  class="btn btn-default"onclick="progress.reset()">
                        Reset
                    </button>
                    <button type="button"  class="btn btn-default"onclick="progress.complete()">
                        Complete
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="jquery/jquery.min.js">
</script>
<script>
    var progress = (function ($) {
        var progress = $('.progress'),
            progress_bar = $('.progress-bar'),
            total_width = progress.width();
        function calculatePercentage(increment_by,is_increment) {
            var progress_percentage;
            if (is_increment == true) {
                progress_percentage = Math.round((progress_bar.width() / total_width) * 100 + increment_by) ;
                progress_percentage = (progress_percentage > 100) ? 100 : progress_percentage;
            } else {
                progress_percentage = Math.round((progress_bar.width() / total_width) * 100 - increment_by) ;
                progress_percentage = (progress_percentage < 0) ? 0 : progress_percentage;
            }
            return progress_percentage;
        }
        return{
            increment: function (increment_by) {
                var progress_percentage = calculatePercentage(increment_by, true);
                progress_bar.css('width',progress_percentage + '%').attr('aria-valuenow', progress_percentage + ' %');
            },
            decrement: function (decrement_by) {
                var progress_percentage = calculatePercentage(decrement_by, false);
                progress_bar.css('width',progress_percentage+'%').attr('aria-valuenow', progress_percentage + ' %');
            },
            reset: function () {
                progress_bar.css('width',0 + '%').attr('aria-valuenow', 0 + ' %');
            },
            complete: function () {
                progress_bar.css('width',100 + '%').attr('aria-valuenow', 100 + ' %');
            }
        };
    })( jQuery);
</script>


自定义引导进度条
自定义引导进度条
增量
减量
重置
完成
变量进度=（函数（$）{
变量进度=$（'.progress'），
进度条=$（'.progress bar'），
总宽度=进度。宽度（）；
函数计算百分比（增量，是增量）{
风险价值百分比；
if（is_increment==true）{
进度百分比=数学舍入（（进度条宽度（）/总宽度）*100+增量）；
进度百分比=（进度百分比>100）？100：进度百分比；
}否则{
进度百分比=数学四舍五入（（进度条宽度（）/总宽度）*100-增量单位）；
进度百分比=（进度百分比<0）？0：进度百分比；
}
返回进度百分比；
}
返回{
增量：函数（增量由）{
var progress\u percentage=calculatePercentage（增量，真）；
进度条.css（'width'，进度百分比+'%'）.attr（'aria-valuenow'，进度百分比+'%'）；
},
减量：功能（减量）{
var progress\u percentage=calculatePercentage（递减率，false）；
进度条.css（'width'，进度百分比+'%'）.attr（'aria-valuenow'，进度百分比+'%'）；
},
重置：功能（）{
进度条.css（'width'，0+'%'）.attr（'aria-valuenow'，0+'%'）；
},
完成：函数（）{
进度条.css（'width'，100+'%'）.attr（'aria-valuenow'，100+'%'）；
}
};
})（jQuery）；

您需要实现如下所示的本地存储。此外，我已将代码转换为jQuery插件，该插件将在每个小部件上初始化。当您使用类似于
progress\u bar=$（'.progress bar'）的内容时，所有进度条都会立即递增
这意味着您将拾取页面上的所有进度条，而不是单个进度条。我已在插件代码中创建了一个attachEvent，因此您不需要从dom初始化事件。通常，从脚本中附加事件是一种很好的做法

我建议为HTML创建添加一个函数createHTML，并在init中调用该代码来创建HTML。刷新页面时，您可以使用相同的本地存储来跟踪页面上有多少进度条，并且需要重新创建进度条

尝试为html使用模板，因为重复的html并不理想

<html>
    <head>
        <title>
            Customize Bootstrap progressbar
        </title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>


    </head>

     <body style="margin-top: 100px">
        <div class=" col-sm-6 col-sm-offset-3">
            <div class="panel panel-default">
                 <div class="panel-heading">
                     <h3 class="panel-title">
                         Customize Bootstrap progressbar
                     </h3>
                 </div>
                 <div id="progress-bar-1" class="progress-bar-widget">
                      <div class="panel-body" style="padding-top: 50px">
                          <div class="progress">
                              <div class="progress-bar" role="progressbar" aria-valuenow="0 %" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                              </div>
                          </div>
                      </div>
                      <div class="panel-footer">
                           <div class="btn-group" role="group" aria-label="...">
                                 <button type="button" class="btn btn-default increment">
                                       Increment
                                 </button>
                                 <button type="button" class="btn btn-default decrement" >
                                        Decrement
                                  </button>
                                  <button type="button"  class="btn btn-default reset">
                                       Reset
                                   </button>
                                   <button type="button"  class="btn btn-default complete">
                                         Complete
                                    </button>
                                 </div>
                             </div>
                         </div>
                        <div id="progress-bar-2" class="progress-bar-widget">
                             <div class="panel-body" style="padding-top: 50px" class="progress-bar-widget">
                              <div class="progress">
                                   <div class="progress-bar" role="progressbar" aria-valuenow="0 %" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                    </div>
                              </div>
                              </div>
                              <div class="panel-footer">
                                    <div class="btn-group" role="group" aria-label="...">
                                     <button type="button" class="btn btn-default increment" >
                                           Increment
                                     </button>
                                     <button type="button" class="btn btn-default decrement" ">
                                           Decrement
                                     </button>
                                     <button type="button"  class="btn btn-default reset">
                                            Reset
                                      </button>
                                      <button type="button"  class="btn btn-default complete">
                                             Complete
                                      </button>
                                </div>
                           </div>
                       </div>
                   </div>
              </div>
        </body>
<script>
(function ($) {
 $.fn.progressBar = function( ) {
        var widget = $(this),
            progress = $(this).find('.progress'),
            progress_bar = $(this).find('.progress-bar'),
            total_width = progress.width();

        function init() {
            var curr_progress = getLocalStorage();
            if(curr_progress) {
                progress_bar.css('width',curr_progress + '%').attr('aria-valuenow', curr_progress + ' %');
            }
            attachEvents();
        }

        function attachEvents() {
            widget.find('.increment').on("click", function(){increment(10);});
            widget.find('.decrement').on("click", function(){decrement(10);});
            widget.find('.reset').on("click", reset);
            widget.find('.complete').on("click", complete);
        }
        function calculatePercentage(increment_by,is_increment) {
            var progress_percentage;
            if (is_increment == true) {
                progress_percentage = Math.round((progress_bar.width() / total_width) * 100 + increment_by) ;
                progress_percentage = (progress_percentage > 100) ? 100 : progress_percentage;
            } else {
                progress_percentage = Math.round((progress_bar.width() / total_width) * 100 - increment_by) ;
                progress_percentage = (progress_percentage < 0) ? 0 : progress_percentage;
            }
            return progress_percentage;
        }
        function getLocalStorage() {
            return localStorage.getItem(widget.attr('id'));
        }
        function setLocalStorage(val) {
            localStorage.setItem(widget.attr('id'), val);
        }

        function increment(increment_by) {
            var progress_percentage = calculatePercentage(increment_by, true);
            setLocalStorage(progress_percentage);
            progress_bar.css('width',progress_percentage + '%').attr('aria-valuenow', progress_percentage + ' %');
        };
        function decrement (decrement_by) {
            var progress_percentage = calculatePercentage(decrement_by, false);
            setLocalStorage(progress_percentage);
            progress_bar.css('width',progress_percentage+'%').attr('aria-valuenow', progress_percentage + ' %');
        };
        function reset () {
            setLocalStorage(0);
            progress_bar.css('width',0 + '%').attr('aria-valuenow', 0 + ' %');
        };
        function complete () {
            setLocalStorage(100);
            progress_bar.css('width',100 + '%').attr('aria-valuenow', 100 + ' %');
        }

        init();
    }

    $('.progress-bar-widget').each(function(index, elem){
        $(elem).progressBar();
    });

})( jQuery);
</script>


自定义引导进度条
自定义引导进度条
增量
减量
重置
完成
增量

您需要实现如下所示的localStorage。此外，我已将代码转换为jQuery插件，该插件将在每个小部件上初始化。当您使用类似
progress\u bar=$（'.progress bar'）的内容时，您的所有ProgressBar都会一次递增
这意味着您将拾取页面上的所有进度条，而不是单个进度条。我已在插件代码中创建了一个attachEvent，因此您不需要从dom初始化事件。通常，从脚本中附加事件是一种很好的做法

我会苏