将文本值保存到listview&开始计数时间 [英] save text value to listview & start count the time

查看：201 发布时间：2017/1/9 15:45:57 javascript jquery html jquery-mobile cordova

本文介绍了将文本值保存到listview&开始计数时间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个主要问题，我真的会有帮助。
我已经google和搜索一天，现在没有任何帮助，但如果你知道任何链接，我可能没有看过或任何网站的帮助，然后给我。
我会感激它，或者如果你已经有代码/示例代码，将有帮助： - ）

我使用PhoneGap& JQuery Mobile现在，事情是这样的。
我有一个'textarea'在那里你写的东西，然后一个保存按钮，我想要它做的是，当我按保存按钮，textvalue我写在textarea将被保存在listview中应用程序的另一个页面。我已经看过localstorage，但没有正确的工作。

此外，如果你在textarea写一个东西，你按取消按钮，）

第二个问题是：
当我按下保存按钮时，应开始计数，以秒，分，小时，天。
想象这样。我在textarea写牙刷，然后按保存，现在当我去listview页面，我可以看到它说的牙刷在列表视图，旁边的文本，它说1m，5m，1h，它只是更新时，它是最后时间我买或更换牙刷，所以下次我打开应用程序，我可以看到TOOTHBRUSH：4天，16HRS，52MINS AGO。

这是我的代码，都是html& .js，我该怎么做这个任务会工作。
任何建议，网站或代码你们都有帮助吗？

非常感谢。

 <！DOCTYPE html> 
 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =format-detectioncontent =telephone = no/> 
< link rel =stylesheettype =text / csshref =css / index.css/> 
< title>上次我做了！< / title> 
< meta name =viewportcontent =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 =stylesheet> 
< link href =src / css / jquery.mobile.theme-1.1.0.css =stylesheet> 
< / head> 
< body> 
< div data-role =pageid =page1> 
< div data-role =header> 
< h1>上次我做了< / h1> 
< / div> 
< div data-role =content>< / div> 
< div data-role =footer> 
< div data-role =navbar> 
< ul> 
< li> 
< a data-role =buttonhref =＃page2data-transition =slideid =adddata-rel =page> ADD< / a> 
< / li> 
< li> 
< a data-role =buttonhref =＃page2data-transition =slideid =showdata-rel =page> SHOW< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< div data-role =pageid =page2> 
< div data-role =header> 
< h1>添加活动< / h1> 
< / div> 
< div data-role =content> 
< textarea>< / textarea> 
< / div> 
< div data-role =footer> 
< div data-role =navbar> 
< ul> 
< li> 
< a data-role =buttonhref =＃page3data-transition =slideid =save> SAVE< / a> 
< / li> 
< li> 
< a data-role =buttonhref =＃page1id =canceldata-transition =slidedata-direction =reversedata-rel =page> CANCEL< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< div data-role =pageid =page3> 
< div data-role =header> 
< a href =＃page2class =ui-btn-leftdata-rel =backdata-transition =slide>后退< / a> 
< h1>活动< / h1> 
< / div> 
< div data-role =content> 
< ol data-role =listviewid =orderedListdata-inset =true>< / ol> 
< / div> 
< div data-role =footer> 
< div data-role =navbar> 
< ul> 
< li> 
< a data-role =buttonid =edit> EDIT< / a> 
< / li> 
< li> 
< a data-role =buttonid =delete> DELETE< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< script type =text / javascriptsrc =phonegap.js>< / script> 
< script type =text / javascriptsrc =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'，sortedList）; 
 
}

EDIT： >

这是我的新html& js文件后，看了你的令人敬畏的代码示例，但是当我在phonegap运行它的电话，仍然，保存，取消，时间甚至保存的文本将不会显示。

 <！DOCTYPE html> 
 
< html> 
< head> 
< meta charset =utf-8/> 
< meta name =format-detectioncontent =telephone = no/> 
< link rel =stylesheettype =text / csshref =css / index.css/> 
< title>上次我做了！< / title> 
< meta name =viewportcontent =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 =stylesheet> 
< link href =src / css / jquery.mobile.theme-1.1.0.css =stylesheet> 
< / head> 
< body> 
< div data-role =pageid =page1> 
< div data-role =header> 
< h1>上次我做了< / h1> 
< / div> 
< div data-role =content>< / div> 
< div data-role =footer> 
< div data-role =navbar> 
< ul> 
< li> 
< a data-role =buttonhref =＃page2data-transition =slideid =adddata-rel =page> ADD< / a> 
< / li> 
< li> 
< a data-role =buttonhref =＃page3data-transition =slideid =showdata-rel =page> SHOW< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< div data-role =pageid =page2> 
< div data-role =header> 
< h1>添加活动< / h1> 
< / div> 
< div data-role =content> 
< textarea id =newItemText>< / textarea> 
< / div> 
< div data-role =footer> 
< div data-role =navbar> 
< ul> 
< li> 
< a data-role =buttonhref =＃data-transition =slideid =btnSave> SAVE< / a> 
< / li> 
< li> 
< a data-role =buttonhref =＃page1id =btnCanceldata-transition =slidedata-direction =reversedata-rel =page> CANCEL< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< div data-role =pageid =page3> 
< div data-role =header> 
< a href =＃page2class =ui-btn-leftdata-rel =backdata-transition =slide>后退< / a> 
< h1>活动< / h1> 
< / div> 
< div data-role =content> 
< ul data-role =listviewid =orderedListdata-inset =true> 
< / ul> 
< / div> 
< div data-role =footer> 
< div data-role =navbar> 
< ul> 
< li> 
< a data-role =buttonid =edit> EDIT< / a> 
< / li> 
< li> 
< a data-role =buttonid =delete> DELETE< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< script type =text / javascriptsrc =phonegap.js>< / script> 
< script type =text / javascriptsrc =js / index.js>< / script> 
< script type =text / javascript> 
 app.initialize（）; 
< / script> 
< / body> 
< / html>

和JS文件。

  $（document）.on（'pagebeforeshow'，'＃page3'，function（）{
 //设置当前列表
 
 if（localStorage。 getItem（'TaskList'））{
 var TheList = []; 
 TheList = JSON.parse（localStorage.getItem（'TaskList'））; 
 var items =''; 
 
 for（var i = 0; 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'）; 
 
} 
 $ b b}）; 
 
 
 $（document）.on（'pageinit'，'＃page2'，function（）{
 
 $（'＃btnCancel'）。 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，时间：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：分钟，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：年，limit：null，in_seconds：31556926} 
]; 
 var diff =（new Date（） -  new Date（time * 1000））/ 1000; 
 if（diff< 5）returnnow; 
 
 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上了！

解决方案

是 DEMO

问题中有很多问题，所以我可能不会回答所有问题。要使用localStorage和一个'tasks'数组，在保存时使用JSON.stringify，在检索时使用JSON.parse。

因此，每次显示page3时，创建列表项，清空列表，然后附加创建的项目：

  $（document）。 on（'pagebeforeshow'，'＃page3'，function（）{
 //设置当前列表
 if（localStorage.getItem（'TaskList'））{
 var TheList = [] ; 
 TheList = JSON.parse（localStorage.getItem（'TaskList'））; 
 var items =''; 
 for（var i = 0; i  items + ='< li>< h3>'+ TheList [i] .text +'< / h3>< p>'+ TheList [i] .time +'< p& ;< / li>'; 
} 
 
 $（'＃orderedList'）。empty（）。append（$（items））listview（'refresh'）; 
} 
}）;

输入新项目时，要存储文本和当前时间，。首先从localStorage获取当前列表，然后创建新项目并将其添加到列表，最后保存回localStorage清除textarea并导航到page3。取消按钮只是清除textarea：

  $（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 （'＃page3'，{transition：'＃'）; 
 $ b（b）; 
 
 $（'＃newItemText'）。val（''）; // CLEAR TEXT AREA 
 $ .mobile.navigate slide}）; 
}）; 
}）;

I have TWO main questions that I really would have help with. I have googled and searched for some day now without any help, but if you know any links that I maybe haven't watched or any site with help, then give me. I would appreciated it, OR if you already have the code/sample code, would help :-)

I work with PhoneGap & JQuery Mobile right now, and the thing is this. I have a 'textarea' there you write something, then a save button, what I want it to do is that when I press the save-button, the textvalue I wrote in the textarea would get saved in a listview in another page of the app. I have looked at "localstorage" but nothing works correctly.

(Also, if you write something in textarea and you press the cancel button, the text in the textarea should be deleted next time you go in to that page.)

The second question is: When I press the save button, it should begin to count, in seconds, minutes, hours, days. Think of it like this. I write "toothbrush" in the textarea and press save, now when I go to the listview-page, I can see it says toothbrush in the listview, beside the text it says 1m, 5m, 1h, it just update when it was last time I bought or changed the toothbrush, so next time I open the app, I can see "TOOTHBRUSH: 4Days, 16HRS, 52MINS AGO". In that way I can check when I bought something, or changed something.

This is my codes, both html & .js, what should I do so this mission will work. Any suggestions, sites, or code you guys have that would help?

Thank you so much.

<!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>

and my almost empty -js code.

$(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);

}

EDIT:

Here is my new html & js file, after looked at your awesome code-example, but when I run it on my phone with phonegap, still, the save, cancel, the time and even the saved text will not show up.

<!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>

And the JS file.

$(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" : "");
}
};
}

SOLUTION:

The JSFiddler code-example, the demo is perfect and are based on jQuery 1.9.1 & jQuery Mobile 1.3.0b1, I used 1.6.4 & 1.1.0. After updating this two .js files, everything worked on PhoneGap!

解决方案

Here is a DEMO

There are many questions within your problem, so I will probably not manage to answer all of them. To use localStorage with an array of 'tasks' you use JSON.stringify when saving and JSON.parse when retrieving.

So, each time page3 is displayed, you retrieve the current list of items from localStorage, create list items, empty the list and then append the created items :

$(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');    
    }    
});

When entering a new item, you want to store the text and the current time, so use an object. First get the current list from localStorage, then create the new item and add it to the list, finally save back to localStorage clear the textarea and navigate to page3. The cancel button just clears the textarea:

$(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" });    
    });    
});

这篇关于将文本值保存到listview&开始计数时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

将文本值保存到listview&开始计数时间 [英] save text value to listview & start count the time

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

将文本值保存到listview&amp;开始计数时间 [英] save text value to listview &amp; start count the time

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

将文本值保存到listview&开始计数时间 [英] save text value to listview & start count the time

登录关闭