2010-01-20 14 views
7

नीचे jQuery के लिए वास्तव में एक अच्छा समय पहले प्लगइन है, जो कि वे SO पर यहां उपयोग किए जाने के समान ही हैं। मेरे लिए समस्या यह है कि यह समय को बदलने के लिए इसका उपयोग करता है।jQuery समय पहले एक टाइमस्टैम्प से?

<time class="timeago" datetime="2008-07-17T09:24:17Z">July 17, 2008</time> 

कि यूटीसी टाइमस्टैम्प में और एक स्वरूपित समय नहीं के रूप में अपनी साइट पर है कि मैं दुकान समय को छोड़कर बहुत अच्छा होगा, वहाँ एक रास्ता कुछ इस तरह परिवर्तित करने के लिए एक टाइमस्टैम्प उपयोग करने के लिए है? मैं PHP में जानता हूं कि मैं अपने टाइमस्टैम्प को इस प्रारूप में परिवर्तित कर सकता हूं लेकिन यह PHP में 1 पृष्ठ पर कई बार परिवर्तित करने के साथ ओवरकिल जैसा लगता है। मैं गलत हो सकता हूं, कोई और jquery में लेकिन असली टाइमस्टैम्प से ऐसा करता है?

इसके अलावा मैं वर्तमान में "2 घंटे 4 मिनट पहले" दिखाने के लिए साइट पर PHP में ऐसा करता हूं लेकिन wou7ld PHP के बजाय जावास्क्रिप्ट का उपयोग करना बेहतर होगा?

/* 
* timeago: a jQuery plugin, version: 0.8.1 (2010-01-04) 
* @requires jQuery v1.2.3 or later 
* 
* Timeago is a jQuery plugin that makes it easy to support automatically 
* updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). 
* 
* For usage and examples, visit: 
* http://timeago.yarp.com/ 
* Copyright (c) 2008-2010, Ryan McGeary (ryanonjavascript -[at]- mcgeary [*dot*] org) 
*/ 
(function($) { 
    $.timeago = function(timestamp) { 
    if (timestamp instanceof Date) return inWords(timestamp); 
    else if (typeof timestamp == "string") return inWords($.timeago.parse(timestamp)); 
    else return inWords($.timeago.datetime(timestamp)); 
    }; 
    var $t = $.timeago; 

    $.extend($.timeago, { 
    settings: { 
     refreshMillis: 60000, 
     allowFuture: false, 
     strings: { 
     prefixAgo: null, 
     prefixFromNow: null, 
     suffixAgo: "ago", 
     suffixFromNow: "from now", 
     ago: null, // DEPRECATED, use suffixAgo 
     fromNow: null, // DEPRECATED, use suffixFromNow 
     seconds: "less than a minute", 
     minute: "about a minute", 
     minutes: "%d minutes", 
     hour: "about an hour", 
     hours: "about %d hours", 
     day: "a day", 
     days: "%d days", 
     month: "about a month", 
     months: "%d months", 
     year: "about a year", 
     years: "%d years" 
     } 
    }, 
    inWords: function(distanceMillis) { 
     var $l = this.settings.strings; 
     var prefix = $l.prefixAgo; 
     var suffix = $l.suffixAgo || $l.ago; 
     if (this.settings.allowFuture) { 
     if (distanceMillis < 0) { 
      prefix = $l.prefixFromNow; 
      suffix = $l.suffixFromNow || $l.fromNow; 
     } 
     distanceMillis = Math.abs(distanceMillis); 
     } 

     var seconds = distanceMillis/1000; 
     var minutes = seconds/60; 
     var hours = minutes/60; 
     var days = hours/24; 
     var years = days/365; 

     var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) || 
     seconds < 90 && substitute($l.minute, 1) || 
     minutes < 45 && substitute($l.minutes, Math.round(minutes)) || 
     minutes < 90 && substitute($l.hour, 1) || 
     hours < 24 && substitute($l.hours, Math.round(hours)) || 
     hours < 48 && substitute($l.day, 1) || 
     days < 30 && substitute($l.days, Math.floor(days)) || 
     days < 60 && substitute($l.month, 1) || 
     days < 365 && substitute($l.months, Math.floor(days/30)) || 
     years < 2 && substitute($l.year, 1) || 
     substitute($l.years, Math.floor(years)); 

     return $.trim([prefix, words, suffix].join(" ")); 
    }, 
    parse: function(iso8601) { 
     var s = $.trim(iso8601); 
     s = s.replace(/-/,"/").replace(/-/,"/"); 
     s = s.replace(/T/," ").replace(/Z/," UTC"); 
     s = s.replace(/([\+-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400 
     return new Date(s); 
    }, 
    datetime: function(elem) { 
     // jQuery's `is()` doesn't play well with HTML5 in IE 
     var isTime = $(elem).get(0).tagName.toLowerCase() == 'time'; // $(elem).is('time'); 
     var iso8601 = isTime ? $(elem).attr('datetime') : $(elem).attr('title'); 
     return $t.parse(iso8601); 
    } 
    }); 

    $.fn.timeago = function() { 
    var self = this; 
    self.each(refresh); 

    var $s = $t.settings; 
    if ($s.refreshMillis > 0) { 
     setInterval(function() { self.each(refresh); }, $s.refreshMillis); 
    } 
    return self; 
    }; 

    function refresh() { 
    var data = prepareData(this); 
    if (!isNaN(data.datetime)) { 
     $(this).text(inWords(data.datetime)); 
    } 
    return this; 
    } 

    function prepareData(element) { 
    element = $(element); 
    if (element.data("timeago") === undefined) { 
     element.data("timeago", { datetime: $t.datetime(element) }); 
     var text = $.trim(element.text()); 
     if (text.length > 0) element.attr("title", text); 
    } 
    return element.data("timeago"); 
    } 

    function inWords(date) { 
    return $t.inWords(distance(date)); 
    } 

    function distance(date) { 
    return (new Date().getTime() - date.getTime()); 
    } 

    function substitute(stringOrFunction, value) { 
    var string = $.isFunction(stringOrFunction) ? stringOrFunction(value) : stringOrFunction; 
    return string.replace(/%d/i, value); 
    } 

    // fix for IE6 suckage 
    document.createElement('abbr'); 
    document.createElement('time'); 
})(jQuery); 

उत्तर

8

मुझे एक ही समस्या थी। मैं यूनिक्स टाइमस्टैम्प का उपयोग कर रहा हूं जो PHP से उत्पन्न होते हैं, इसलिए मैंने एक त्वरित हैक करने का फैसला किया और टाइमस्टैम्प को अतिरिक्त रूप से संभालने के लिए jQuery टाइमगो के पार्सिंग फ़ंक्शन का विस्तार किया। एक जादू की तरह काम करता है। बस jquery.timeago.js फ़ाइल में लगभग 7 9 पर पार्स फ़ंक्शन की तलाश करें, और निम्न के साथ प्रतिस्थापित करें:

parse: function(iso8601) { 
    if ((iso8601 - 0) == iso8601 && iso8601.length > 0) { // Checks if iso8601 is a unix timestamp 
    var s = new Date(iso8601); 
    if (isNaN(s.getTime())) { // Checks if iso8601 is formatted in milliseconds 
     var s = new Date(iso8601 * 1000); //if not, add milliseconds 
    } 
    return s; 
    } 

    var s = $.trim(iso8601); 
    s = s.replace(/-/,"/").replace(/-/,"/"); 
    s = s.replace(/T/," ").replace(/Z/," UTC"); 
    s = s.replace(/([\+-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400 
    return new Date(s); 
}, 
+0

बिल्कुल वही जो मैं धन्यवाद के लिए देख रहा था। –

+0

यह कमाल है, ठीक वही है जो मैं करना चाहता था। साझा करने के लिए धन्यवाद! –

+0

+1 यह किसी अन्य उत्तर से अधिक उल्टा होना चाहिए! –

-1

यह दोनों का उपयोग बेहतर होगा, लेकिन जेएस के साथ इसे गतिशील बनाना आवश्यक नहीं है।

वास्तव में, मैंने केवल फेसबुक में यह व्यवहार देखा है।

इसके अलावा, क्या आप अच्छी तरह से जानते हैं कि <time> टैग HTML5 है? यह कुछ असंगतताओं को पैदा कर सकता है।

+0

क्या इसे स्वत: अद्यतन करने का कोई तरीका है? – Antonio

2

मुझे DateJS.com का उपयोग करना पसंद है जो एक दिनांक/समय जावास्क्रिप्ट लाइब्रेरी है। आप इस तरह से आकर्षक उत्पाद कर सकते हैं (प्रदर्शन 2 घंटे पहले एक <span id='myfield'></span> में):

$('#myfield').text((2).hours().ago().toString("HH:mm")); 
+0

ईश्वर के लिए, उसे "यूनिक्स टाइमस्टैम्प" का उपयोग करने में सक्षम होना चाहिए, टाइमगो पहले से ही पर्याप्त है और तारीखों का उपयोग करना चाहते हैं तो तारीख से बेहतर है। –

3

यहाँ जावास्क्रिप्ट में कुछ लेकिन यूनिक्स टाइमस्टैम्प कुछ भी नहीं का उपयोग कर रहा है।

var d1; 
var d2; 
d1 = (new Date()).getTime(); setTimeout(function() { d2 = (new Date()).getTime(); }, 5000); 
var secondsElapsed = (d2 - d1)/1000; 
secondsElapsed; // 5 seconds 

अब, आप या तो JavaScript वैरिएबल में समय स्टांप एक ही दायरे में अपने "TIMEAGO" समारोह के रूप में स्टोर कर सकते हैं, या अपने किसी HTML तत्व में संग्रहीत कर सकते हैं। जैसा कि बताया गया है, time तत्व एक HTML 5 तत्व है।


<p class="timestamp" style="display: none;">123456</p> 
तो शायद

आप एक टिप्पणी आइटम की तरह: तुम कुछ की तरह कर सकता है


<div class="comment"> 
    <p>Lorem ipsum et dolor...</p> 
    <p class="timestamp" style="display: none;">123456</p> 
</div> 

फिर आप (jQuery संभालने के बाद से आप यह उल्लेख किया) द्वारा एक टिप्पणी के लिए टाइमस्टैम्प मिल सकता है:


var tstamps = $('.comment .timestamp'); // array of comment timestamps 
var timeago = ((new Date()).getTime() - tstamps[0].html())/1000; 

यह थोड़ा हैकिश है, लेकिन यह काम करेगा (अगर मैंने इसे सही किया)।

संबंधित मुद्दे