Question

我在这个页面上：http://teamtreehouse.com/library/build-a-simple-iphone-app-ios7-2#getting-started

目标

如果声明如果它是一个匹配[0-9]|[0-9]:[0-9][1-9]的值，则将其与其余时间一起添加，并在HH：MM：SS中吐出最后一次。我可以手动添加所有这些时间，但后来我记得我是程序员，所以现在我正在尝试编写脚本。

我试过了：

if this.val() == ...

但它给了this一个错误，所以我不知道从哪里开始。

基本上我想写一个脚本来计算总时间。

$('.achievement-steps ul li a p').each(function(index){

})

返回：

[
<p>2:13</p>
, 
<p>1 objective</p>
, 
<p>7:23</p>
, 
<p>5 questions</p>
, 
<p>6:19</p>
, 
<p>5 questions</p>
, 
<p>7:05</p>
, 
<p>10:12</p>
, 
<p>5 questions</p>
, 
<p>5:27</p>
, 
<p>2 objectives</p>
, 
<p>1:16</p>
, 
<p>1:20</p>
, 
<p>5 questions</p>
, 
<p>12:25</p>
, 
<p>1 objective</p>
, 
<p>6:58</p>
, 
<p>5:47</p>
, 
<p>3 objectives</p>
, 
<p>3:24</p>
, 
<p>5 questions</p>
, 
<p>6:00</p>
, 
<p>5:42</p>
, 
<p>8:25</p>
, 
<p>3 objectives</p>
, 
<p>8:27</p>
, 
<p>4 questions</p>
, 
<p>7:18</p>
, 
<p>1 objective</p>
, 
<p>5:53</p>
, 
<p>2:11</p>
, 
<p>5 questions</p>
, 
<p>18:02</p>
, 
<p>5 questions</p>
, 
<p>7:49</p>
, 
<p>5 questions</p>
, 
<p>7:55</p>
, 
<p>5 questions</p>
, 
<p>11:27</p>
, 
<p>3 objectives</p>
, 
<p>6:11</p>
, 
<p>5 questions</p>
, 
<p>7:30</p>
, 
<p>5 questions</p>
, 
<p>7:37</p>
, 
<p>11:19</p>
, 
<p>5 questions</p>
, 
<p>7:08</p>
, 
<p>5 questions</p>
]

Answer 1

代码：

// get texts
var textList = $('.achievement-steps ul li a p').map(
        function(index,element){return $(element).html();});
// filter by regex
var timeList = $.grep(textList,
        function(element,index){return element.match(/^\d{1,2}:\d{1,2}$/)!=null;});
// split by ":"
var tmp = timeList.map(
        function(element){return element.split(":")});
// mins and secs
var mins = tmp.map(function(element){return element[0];}),
    secs = tmp.map(function(element){return element[1];});
// sum
var totalMins =  mins.reduce(function(a,b){return +a+(+b);});
var totalSeconds = totalMins * 60 + secs.reduce(function(a,b){return +a+(+b);});

console.log(Math.floor(totalSeconds/60) + 'Mins,' + totalSeconds % 60 + 'secs');
// 198Mins,43secs

我正在尝试学习jQuery.map，jQuery.grep，Array.prototype.reduce()，所以这个答案可能会比它应该更复杂。

Answer 2

您可以使用此脚本将小数位的值合计为HH：MM：SS。

我意识到目标只是总计价值。希望有人可以扩展我的答案，对不起，如果它没用。

var total = 0;
$('p').each(function(index){
    if($(this).text().length <= 5){
        total += parseFloat($(this).text().replace(':', '.'));
    }
});

//convert total to time value
var hours = Math.floor ( total );
var minutes = ((total - Math.floor ( total )) * 60);
var seconds = ((minutes - Math.floor ( minutes )) * 60);
var time = hours.toString() + ':' + 
           Math.floor (minutes).toString() + ':' + 
           Math.floor(seconds).toString();

$('div').text('Total ' + time);

<强> Demo

Answer 3

我创建了一个书签来查找时间。该模板来自此网站：http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/

创建timer.js

(function(){

    // the minimum version of jQuery we want
    var v = "1.3.2";

    // check prior inclusion and version
    if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
        var done = false;
        var script = document.createElement("script");
        script.src = "http://ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
        script.onload = script.onreadystatechange = function(){
            if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
                done = true;
                initMyBookmarklet();
            }
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    } else {
        initMyBookmarklet();
    }

    function initMyBookmarklet() {
        (window.myBookmarklet = function() {
            $(".achievement-steps").find('p').filter(function() {
                return $(this).text().match(/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/);
            }).each(function() {

                alert($(this).text());
            });
        })();
    }

})();

使用此位置向您的浏览器添加书签，替换为＆lt; #YOURDOMAINHERE＃＆gt;与您将放置文件的位置。目前，您可以使用我的域http://scripts.snappersworld.com/timer.js上的文件来查看它的工作情况。

javascript:(function(){var b=document.createElement("script");b.type="text/javascript";b.src="<#YOURDOMAINHERE#> /timer.js?"+Math.random();document.getElementsByTagName("head")[0].appendChild(b)})();

加载要解析的页面，然后单击您创建的书签。它将为每一行提供一次警报。其余的实施由您决定

从div中获取值的脚本，比较它是否为时间值，然后添加它

3 个答案: