Question

Here是该网站的链接。

页面布局由＆＃34;固定＆＃34;侧边栏（左侧），当用户点击＆＃34;添加＆＃34;按钮，伴随着他们选择的标题和按钮值的点数。然后，当单击按钮时，按钮消失，并且点被添加到＆＃34;点＆＃34;价值，在中间＆＃34; div＆＃34;的页面。

在最右边有一个空的div，我试图做同样的事情，除了我永远不能让它工作。我想要的是创建另一个类似的动态创建按钮或＆＃34; span＆＃34;某种类型，当用户点击它时，分配给所述按钮/跨度的点数从总点数中扣除。我认为它是一个救赎系统，如果这是有道理的。使用硬币，我只需将其分配为点数的一半。

另外，我能够简单地将点数和级别存储在localStorage中，但我不确定如何存储创建的按钮，因此每次刷新后它们都会消失，我无法理解弄清楚如何做到这一点，因为他们没有特别编码？

此外，如果可能的话，我将如何进行通知div，为每个单击的按钮创建警报。警报会说出＆＃34;您已完成任务名称＆＃34;，它会将其存储在localStorage中，因此用户可以看到在通知中单击的按钮形式。

还有一件事，在创建按钮时，有一个标题和用户必须分配的点数，在第二个输入文本框下，有5个不同颜色的＆＃34;跨度＆＃34;，每个代表一个不同的领域＆＃34;您可能会说，在这种情况下它是不同的主题，我将如何制作它，以便当用户点击其中一个＆＃34; Spans＆＃34;时，创建的按钮将与跨度相同的颜色点击？

我知道我要求很多，但我已经尝试过所有我要求的并且遇到了大麻烦。如果有人认为他们可以帮助我，我将不胜感激。提前谢谢。

这是代码，html和javascript。 CSS是bootstrap。

HTML

  <div >


      <div id='header'>

        <h2 style='font-size:71px'>Reward System</h2>

        <div>
            <ol class="breadcrumb" style="width:58%">
                <li class="active">
                   <center> <a href="#">Home</a> 
                </li>

                <li>
                   <a href="#">About</a> 
                </li>

                <li>
                  <a href="#">Refresh</a> </center>
                </li>
            </ol>
        </div></div><center>
 <div id='main'>
<div id='rightSide' class='well'>




</div>



        <div class='well' id="addc" style='width:520px'>
            <div id="addc">
                <input class='form-control' maxlength="15" id="btnName" placeholder="New Task"
                style='width:480px' type="text"><br>
                <input maxlength="3" class='form-control' id="btnPoints" placeholder="Points"
                style='width:480px' type="text"><br>



              <span class="label label-danger">Mathematics EX1</span>
        <span class="label label-primary">Mathematics EX2</span>
              <span class="label label-success">Physics</span> 
              <span class="label label-info">Chemistry</span> 
              <span class=
        "label label-warning">English Advanced</span><br>
        <br>
                <button id="addBtn" >Add</button>  

            </div>
        </div>



        <div class='panel panel-default' style='width:520px;height:100px'>
            <h3><Strike>z</strike> Points</span></h3>


            <div class='badge' id="result">
                0
            </div>
        </div>
        <hr style="width:520px;">

        <div class='panel panel-default' style="width:520px;">
            <h3>Level</h3>

            <p class='badge' style='width:50px' id='lvl'>0</p>

            <div class="progress" style='width:300px'>
                <div class="progress-bar progress-bar-success" id='perce'
                style="width;"></div>
            </div>
        </div><br>
    </div>


<div id='leftSide' class='well'>
  <center>  <h3> Tasks </h3> </center>

   <div class='well' id="container" style='width:260px;height:85%'>
        </div>

  <div id='reset'>
        <button class='btn btn-warning' onclick='clearme()'>Reset</button>
    </center>
    </div>

</div>

的JavaScript

var resDiv = document.getElementById('result');
resDiv.innerText = localStorage.getItem('myResult');

var levelDiv = document.getElementById('lvl');
levelDiv.textContent = localStorage.getItem('myLevel');


var btns = document.querySelectorAll('.btn');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
        addToResult(this.getAttribute('data-points'));
        this.parentNode.removeChild(this.nextElementSibling);
        this.parentNode.removeChild(this);
    });
}


var addBtn = document.getElementById('addBtn');
addBtn.className = "btn btn-default";
addBtn.addEventListener('click', function() {
    var container = document.getElementById('container');
    var objDiv = document.getElementById("container");
    objDiv.scrollTop = objDiv.scrollHeight;


    var btnName = document.getElementById('btnName').value;
    var btnPoints = parseInt(document.getElementById('btnPoints').value);
    if (!btnName)
        btnName = "Button ?";
    if (!btnPoints)
        btnPoints = 50;
    var newBtn = document.createElement('button');
    var newPnt = document.createElement('span');

    newBtn.className = 'btn btn-info';


    newBtn.innerText = btnName;
    newBtn.setAttribute('data-points', btnPoints);
    newBtn.addEventListener('click', function() {
        addToResult(this.getAttribute('data-points'));
        this.parentNode.removeChild(this.nextElementSibling);
        this.parentNode.removeChild(this);
    });
    newPnt.className = 'label label-default';
    newPnt.innerText = "+" + btnPoints;
    container.appendChild(newBtn);
    container.appendChild(newPnt);
});


function addToResult(pts) {
    // NaN is falsy, so you can just use || to make a fall-back to 0
    var result = parseInt(resDiv.innerText, 10) || 0,
        lvl = 0,
        a = 100;
    result = result + parseInt(pts, 10) || 0;



  var pen = (result/500)*100;

    while (result > (5 * a)) {
        lvl += 1;
        a += 100;
        pen -= 100; 

    }





    document.getElementById('perce').style.width = pen +"%";



    resDiv.innerText = result;
    levelDiv.innerText = lvl;
    localStorage.setItem("myResult", result);
    localStorage.setItem("myLevel", levelDiv.textContent);


}





function clearme() {
  localStorage.clear();
}

Answer 1

要将按钮保留在localStorage中，您需要创建自己的对象，其中包含按钮的名称和点，然后使用JSON.stringify将这些对象的数组转换为字符串。该字符串可以与localStorage.setItem

一起使用

function MyButtonObject(name,points){
    this.name=name;
    this.points=points;
}

var list=[new MyButtonObject('example',100)];

localStorage.setItem( 'btnList' , JSON.stringify(list) );

接下来我将通过分离将新按钮添加到其自己的函数中的代码进行处理，以便在页面加载时调用它并且您想要重建按钮元素。

var listJSON=localStorage.setItem( 'btnList' );
var list= listJSON?JSON.parse(listJSON ):[];

list.forEach(function(btn){
    makeButtonElements(btn);
});

function makeButtonElements(btn){
    var btnName=btn.name, btnPoints=btn.points;

    var newBtn = document.createElement('button');
    var newPnt = document.createElement('span');

....etc....

创建按钮的现有函数会调用此函数，并创建一个新的MyButtonObject，将其添加到所述对象的数组中，并使用localStorage.setItem存储该数组。删除按钮的功能需要更新才能从数组中删除正确的对象并调用localStorage.setItem以及添加计划的通知消息（并存储它们）。

您可能需要一些时间来计划您可能需要的其他功能（例如删除按钮而不对其得分，显示通知等）并考虑如何将这些流程分解为可在不同点重用的功能在你的程序中（例如创建新按钮/通知，从存储加载现有按钮/通知）

这是一个方便的函数，它将样式属性从一个元素复制到另一个元素，这可以帮助您按照自己的方式设置按钮颜色。

function copyStyle(prop,fromEl,toEl){
    toEl.style[prop]=window.getComputedStyle(fromEl)[prop];
}

注意：我没有检查或测试过这些代码，因此请确保在开始复制并粘贴到自己的程序之前仔细阅读并了解它的用途。

如何在用户点击按钮时动态添加不同的元素

1 个答案: