个人中心
gpt4 book ai didi

javascript - 将文本值保存到 ListView 并开始计时

转载 作者：行者123 更新时间：2023-11-28 20:04:33 25 4
gpt4 key购买 nike

我有两个主要问题需要帮助。我已经用谷歌搜索了一天，没有任何帮助，但如果你知道我可能没有看过的任何链接或任何有帮助的网站，请给我。我将不胜感激，或者如果您已经有了代码/示例代码，将会有所帮助:-)

我现在使用 PhoneGap 和 JQuery Mobile，事情是这样的。我有一个“文本区域”，您可以在那里写一些东西，然后是一个保存按钮，我想要它做的是，当我按下保存按钮时，我在文本区域中写入的文本值将保存在另一页的 ListView 中应用程序。我查看了“localstorage”，但没有任何效果正常。

(此外，如果您在文本区域中写入内容并按下取消按钮，则下次进入该页面时文本区域中的文本应该会被删除。)

第二个问题是:当我按下保存按钮时，它应该开始以秒、分钟、小时、天为单位计数。这样想吧。我在文本区域中写“牙刷”并按保存，现在当我进入 ListView 页面时，我可以看到 ListView 中显示“牙刷”，在文本旁边显示“1m、5m、1h”，它只是在上次更新时更新我购买或更换牙刷的时间，所以下次我打开应用程序时，我可以看到“TOOTHBRUSH:4天，16小时，52分钟前”。这样我就可以检查我什么时候买了什么东西，什么时候改变了什么东西。

这是我的代码，包括 html 和 .js，我应该做什么才能让这个任务成功。你们有什么可以帮助的建议、网站或代码吗？

非常感谢。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Last Time I Did It!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib/jquery-1.6.4.js"></script>
    <script src="lib/jquery.mobile-1.1.0.js"></script>
    <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
    <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
        <div data-role="header">            
            <h1>Last time I did it</h1>
        </div>
        <div data-role="content"></div>
        <div data-role="footer">
        <div data-role="navbar">
            <ul>
               <li>
                  <a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
               </li>
               <li>
                  <a data-role="button" href="#page2" data-transition="slide" id="show" data-rel="page">SHOW</a>
               </li>
            </ul>
        </div>
        </div>
   </div>
   <div data-role="page" id="page2">
       <div data-role="header">            
           <h1>Add event</h1>
       </div>
       <div data-role="content">
       <textarea></textarea>
       </div>
       <div data-role="footer">
          <div data-role="navbar">
              <ul>
                 <li>
                    <a data-role="button"  href="#page3" data-transition="slide" id="save">SAVE</a>
                 </li>
                 <li>
                    <a data-role="button" href="#page1" id="cancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
                 </li>
              </ul>
          </div>
      </div>
   </div>
   <div data-role="page" id="page3">
      <div data-role="header">
        <a href="#page2"  class="ui-btn-left" data-rel="back" data-transition="slide">Back</a>
        <h1>Events</h1>
      </div>
      <div data-role="content">
        <ol data-role="listview" id="orderedList" data-inset="true"></ol>
      </div>
      <div data-role="footer">
         <div data-role="navbar">
          <ul>
            <li>
                <a data-role="button" id="edit">EDIT</a>
            </li>
            <li>
                <a data-role="button" id="delete">DELETE</a>
            </li>
          </ul>
         </div>
      </div>
      </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

和我几乎空的 -js 代码。

$(document).on('pagebeforeshow', '#index', function(){ 
  $(document).on('click', '#add', function(){        
    $.mobile.navigate( "#page2", { transition : "slide", info: "info about the #bar hash" });
  });   
});

function save ()
{
   var fieldValue = document.getElementById('textarea').value;
   localStorage.setItem('content', orderedList);

}

编辑:

这是我的新 html 和 js 文件，在查看了您很棒的代码示例后，但是当我使用phonegap在手机上运行它时，保存、取消、时间甚至保存的文本都不会显示.

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Last Time I Did It!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib/jquery-1.6.4.js"></script>
    <script src="lib/jquery.mobile-1.1.0.js"></script>
    <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
    <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">            
    <h1>Last time I did it</h1>
</div>
<div data-role="content"></div>
<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li>
                <a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
            </li>
            <li>
                <a data-role="button" href="#page3" data-transition="slide" id="show" data-rel="page">SHOW</a>
            </li>
        </ul>
    </div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">            
    <h1>Add event</h1>
</div>
<div data-role="content">
    <textarea id="newItemText"></textarea>
</div>
<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li>
                <a data-role="button"  href="#" data-transition="slide" id="btnSave">SAVE</a>
            </li>
            <li>
                <a data-role="button" href="#page1" id="btnCancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
            </li>
        </ul>
    </div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
    <a href="#page2" class="ui-btn-left" data-rel="back" data-transition="slide">Back</a>
    <h1>Events</h1>
</div>
<div data-role="content">
    <ul data-role="listview" id="orderedList" data-inset="true">
    </ul>
</div>
<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li>
                <a data-role="button" id="edit">EDIT</a>
            </li>
            <li>
                <a data-role="button" id="delete">DELETE</a>
            </li>
        </ul>
    </div>
</div>
</div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

还有 JS 文件。

$(document).on('pagebeforeshow', '#page3', function(){ 
//setup the current list

if(localStorage.getItem('TaskList')){
    var TheList = [];
    TheList = JSON.parse(localStorage.getItem('TaskList'));
    var items = '';

    for (var i = 0; i < TheList.length; i++) {
        items += '<li><h3>' + TheList[i].text + '</h3><p>' + timeAgo( (new Date(TheList[i].time).getTime())/1000) + ' ago<p></li>';
    }

    $('#orderedList').empty().append($(items)).listview('refresh');

}

});


$(document).on('pageinit', '#page2', function(){ 

$('#btnCancel').on("click", function(){
    $('#newItemText').val(''); //CLEAR TEXT AREA
});

$('#btnSave').on("click", function(){

    var TheList = [];
    if(localStorage.getItem('TaskList')){
        TheList = JSON.parse(localStorage.getItem('TaskList'));
    }
    var newitem = $('#newItemText').val(); 
    var task = {text: newitem, time: new Date() };
    TheList.push(task);
    localStorage.setItem('TaskList', JSON.stringify(TheList));

    $('#newItemText').val(''); //CLEAR TEXT AREA
    $.mobile.navigate( "#page3", { transition : "slide" });

});

});

function timeAgo(time){
var units = [
{ name: "second", limit: 60, in_seconds: 1 },
{ name: "minute", limit: 3600, in_seconds: 60 },
{ name: "hour", limit: 86400, in_seconds: 3600  },
{ name: "day", limit: 604800, in_seconds: 86400 },
{ name: "week", limit: 2629743, in_seconds: 604800  },
{ name: "month", limit: 31556926, in_seconds: 2629743 },
{ name: "year", limit: null, in_seconds: 31556926 }
];
var diff = (new Date() - new Date(time*1000)) / 1000;
if (diff < 5) return "now";

var i = 0;
while (unit = units[i++]) {
if (diff < unit.limit || !unit.limit){
  var diff =  Math.floor(diff / unit.in_seconds);
  return diff + " " + unit.name + (diff>1 ? "s" : "");
}
};
}

解决方案:

JSFiddler 代码示例，演示非常完美，基于 jQuery 1.9.1 和 jQuery Mobile 1.3.0b1，我使用了 1.6.4 和 1.1.0。更新这两个 .js 文件后，PhoneGap 上一切正常!

最佳答案

Here is a DEMO

您的问题中有很多问题，所以我可能无法回答所有问题。要将 localStorage 与“任务”数组一起使用，您可以在保存时使用 JSON.stringify，在检索时使用 JSON.parse。

因此，每次显示 page3 时，您都会从 localStorage 检索当前项目列表，创建列表项目，清空列表，然后附加创建的项目:

$(document).on('pagebeforeshow', '#page3', function(){ 
    //setup the current list    
    if(localStorage.getItem('TaskList')){
        var TheList = [];
        TheList = JSON.parse(localStorage.getItem('TaskList'));
        var items = '';
        for (var i = 0; i < TheList.length; i++) {
            items += '<li><h3>' + TheList[i].text + '</h3><p>' + TheList[i].time + '<p></li>';
        }

        $('#orderedList').empty().append($(items)).listview('refresh');    
    }    
});

当输入一个新项目时，您想要存储文本和当前时间，因此使用一个对象。首先从 localStorage 获取当前列表，然后创建新项目并将其添加到列表中，最后保存回 localStorage 清除文本区域并导航到 page3。取消按钮只是清除文本区域:

$(document).on('pageinit', '#page2', function(){ 

    $('#btnCancel').on("click", function(){
        $('#newItemText').val(''); //CLEAR TEXT AREA
    });

    $('#btnSave').on("click", function(){            
        var TheList = [];
        if(localStorage.getItem('TaskList')){
            TheList = JSON.parse(localStorage.getItem('TaskList'));
        }
        var newitem = $('#newItemText').val(); 
        var task = {text: newitem, time: new Date() };
        TheList.push(task);
        localStorage.setItem('TaskList', JSON.stringify(TheList));

        $('#newItemText').val(''); //CLEAR TEXT AREA
        $.mobile.navigate( "#page3", { transition : "slide" });    
    });    
});

关于javascript - 将文本值保存到 ListView 并开始计时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21062107/

25 4 0
文章推荐： ios - 无法在 performSelectorInBackground 中调用实例方法
文章推荐： ios - 重新加载 UITableView 数据后，indexPathForCell 返回 null
文章推荐： ios - UICollectionView 数据源理解问题
文章推荐： javascript - javascript中的多个 anchor 标记href值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com