如何在本地存储中创建和存储进度条的值 [英] How to create and store value of the progress bars in local storage
问题描述
首先，我有一个用于执行任务的文本区域和一个添加按钮.单击该按钮后，它将被存储在数据库中.我要做的就是输出带有进度条和用于递增和递减的按钮的任务.
First,I have a textarea for tasks and an add button. When the button is clicked it will be stored in the database.All I want to do is to output the task with a progress bar and buttons for increment and decrement.
有人知道引导进度条吗?
Does anyone know about bootstrap progress bar?
- 进度栏必须递增和递减.
- 最后一个值必须是用户回到该进度条时的最新值.
我认为jquery和javascript是最好的解决方案.但我不知道该如何做:((有人可以帮忙吗.
I think jquery and javascript is the best solution for this. But I do not know how :( Can someone please help.
此处是输出代码:
<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>
推荐答案
您需要实现如下所示的localStorage.另外，我已将代码转换为jQuery插件，该插件将针对每个小部件进行初始化.当您使用诸如progress_bar = $('.progress-bar')之类的东西时，所有的progressBars都会立即增加，这意味着您要拾取页面上的所有progress_bars，而不是针对单个进度条.我已经在插件代码中创建了一个attachEvent，所以您不需要从dom初始化事件.通常，从脚本中附加事件是一种很好的做法.
You need to implement the localStorage as shown below. Also I have converted the code to a jQuery plugin, which will be initialized per widget. All your progressBars are incremented at once as you are using something like progress_bar = $('.progress-bar') which means you are picking up all the progress_bars on the page, not targetting a single progress bar. I have create an attachEvent inside the plugin code, so you do not need to initialize the events from the dom. In general its a good practice to attach events from the script.
我建议为您的HTML创建添加一个函数createHTML，并在init中调用该代码来创建您的HTML.您可以使用相同的localStorage来跟踪页面上有多少进度条，刷新页面时需要重新创建进度条.
I would suggest adding a function createHTML for your HTML creation and call that code in init to create your HTML. You can use the same localStorage to track how many progress bars you have on page, when you refresh the page, and need to recreate the progress bars.
尝试为html使用模板，因为重复的html并不理想.
Try using templates for the html, as repeated html is not ideal.
<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>
希望对您有所帮助！ :)祝一切顺利！
Hope it helped! :) All the best!
这篇关于如何在本地存储中创建和存储进度条的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
