2016-04-06 17 views
0

Sitemin bir yıl boyunca bir üstbilgisini gizlemeye çalışıyorum ve belirli bir tarihe dayalı olarak dört hafta boyunca yeniden görünmesini sağlıyorum.Javascript Tarihi Nesnesiyle HTML'de Metni Gizle/Devre Dışı Bırak Nesnesi

Bunun nasıl yapılacağına dair birkaç öneride bulundum, ancak web programlamada yeni başladığımdan boş geliyor.

Ben de senin Yardım büyük takdir

jsfiddle.net

gibi bir şey kodu test etmek istiyorum. [Bugün 29 Nisan gösterisi metne 1 Nisan ise] [bugün ise 30 Nisan gizlemek metin]

Tatil Fırsatları

+1

Şimdiye kadar neler denediniz, hangi problemlerle karşılaşıyorsunuz? Lütfen kodunuzu ve probleminizin nerede olduğunu gösterin ve yardımcı olabiliriz. – Matthew

+1

StackOverflow'a Hoş Geldiniz! Bulunduğunuz programlama problemlerinin cevaplarını bulacaksınız ve en iyi sorularınızda sorun yaşadığınız örnek kodunuz var. En iyi vuruşunuzu verin ve çalışmazsa ve yardım isteyince geri gelin. Ayrıca http://stackoverflow.com/help/mcve –

+0

okumak isteyebilirsiniz JS tarih nesneleri ve jquery denedim. Bir noob olmak js muhtemelen test etmek için yüklü olmalıdır ama jsfiddle bunu hallettiğini düşündüm. İsterseniz kodun snippet'lerini gönderebilirim. – chrish

cevap

0

tarih biçimlendirme nahoş olabilir javascript: Örnek için

. Kullanılabilir bir biçime bir tarih almak için genellikle birden fazla yöntem kullanmanız gerekir.

başka sorudan this cevabı kullanarak, aşağıdaki jsfiddle

https://jsfiddle.net/pkbnok8o/

$(document).ready(function() { 
 
    dateMethod(); 
 
}); 
 

 
function dateMethod() { 
 
    var today = new Date(); 
 
    var dd = today.getDate(); 
 
    var mm = today.getMonth() + 1; //January is 0! 
 
    var yyyy = today.getFullYear(); //You won't need this for this question, but I kept it in for knowledge. 
 

 
    if (dd < 10) { //Won't need this logic either. 
 
    dd = '0' + dd 
 
    } 
 

 
    if (mm < 10) { //Also will not need this logic 
 
    mm = '0' + mm 
 
    } 
 
    
 
    if (mm == 4 && dd >= 1 && dd <= 29){ //This will show the text any year between 4/1 and 4/29 (including both of those days) 
 
    \t $("#txt").show(); //This uses jQuery 
 
    } else{ //Otherwise, the text will be hidden 
 
    \t $("#txt").hide(); //This is also jQuery 
 
    } 
 

 
    today = mm + '/' + dd + '/' + yyyy; //Probably don't need/want this 
 
    $("#currentDate").text(today); //or this. 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Today is: 
 
<label id="currentDate"></label> 
 
<br /> 
 
<label id="txt">Test Text</label>

W3Schools javascript süre farklı get yöntemlerle bazı oldukça iyi bilgi vardır oluşturduk & tarihleri. Bu bağlantıda Tarih Nesnesi Yöntemlerine ilerleyin.

+0

https://jsfiddle.net/pkbnok8o/1/ adresini güncelledim ve aradığımı gerçek bir örnek olarak verdim ve metninizin ilk bölümünü sakladım. Bu, 30 Nisan'da kapanacak ve 1 Nisan ile 29 Nisan arasında gelecek sene tekrar başlayacak mı? Yardım için teşekkürler – chrish

+0

Neden bir Tarih nesnesi oluşturun ve parçaları ayrı ayrı karşılaştırın? Neden olmasın (yeni Tarih()> yeni Tarih (2016,3,1)) {/ * 1 Nisan'dan sonra * /} '. – RobG

+0

@chrish Kurma şekli şu anda sadece 4/30 herhangi bir yıl saklar. Eğer sadece 4/1 ve 4/29 arasında göstermek istiyorsanız, 'dır (mm == 4 && dd> = 1 && DD = = 29) {$ (" # txt ").); } else {$ ("# txt"). } ' Bu, tüm yıl boyunca 4 (Nisan) ve gün 1 ile 29 arasında olan gün boyunca gizleyecektir ve 1 ve 29'da da görüntülenir. –

0

jQuery efektleri kullanarak bilgileri gösterir/gizleyebilirsiniz

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script> 
<script> 
$(document).ready(function(){ 
$("#hide").click(function(){ 
    $("p").hide(); 
}); 
$("#show").click(function(){ 
    $("p").show(); 
}); 
}); 
</script> 
</head> 
<body> 

<p>If you click on the "Hide" button, I will disappear.</p> 

<button id="hide">Hide</button> 
<button id="show">Show</button> 

</body> 
</html> 

Kaynak: http://www.w3schools.com/jquery/jquery_hide_show.asp

+0

Bu soruya cevap vermiyor, kullanıcı tarihe göre bazı içerik göstermek istiyor. –

0

HTML

<div id='april_holiday_specials'> 
    <h2>April Specials<h2> 
</div> 
<div id='other_specials'> 
    <h2>Other Specials<h2> 
</div> 

JS

$(function() { 
    var today = new Date(); 

if (today.getMonth() == 3 && today.getDate() > 0 && today.getDate() < 30) { 

    $("#april_holiday_specials").show(); 
    $("#other_specials").hide(); 

} else { 

    $("#april_holiday_specials").hide(); 
    $("#other_specials").show(); 
} 
}); 

W3C d başvurun http://www.w3schools.com/jsref/jsref_obj_date.asp

JSFiddle: js tarihte daha fazla bilgi için yedi https://jsfiddle.net/Lcb4tyxm/4/

+0

Teşekkür ederim, ama açıklamaya çalıştığım şey bu değildi. Görüntülenecek "Tatil Özel" lerine sahip olmak istiyorum. 1 Nisan'dan 29 Nisan'a kadar görünür ve daha sonra 30 Nisan'da, bir sonraki yıl 1 Nisan'dan 29 Nisan'a kadar tekrar ortaya çıkacaktır. – chrish

+0

@chrish Cevabım gereksinimlerinize göre düzenlendi. – Dizgot

0

varsayılan olarak eleman gizlemek ve kullanabilir ve tarihini sayfa yukarı yüklendiğinde her zaman kontrol etmek için bir komut dosyası kullanmak mümkün olacaktır.

Geçerli tarih belirtilen ay içinde olduğunda, öğeyi gösterir. İstemci sistem saatinin her zaman ve saat dilimine ayarlanabilir, böylece dolandırıcılık veya güvenlik umurumda bile, önemli bir şey için istemci sistemine dayanmayan gerektiğini

// @param selector <String> 
function showElement(selector) { 
    document.querySelector(selector).style.display = "block" 
} 

/** 
    @param startDate <Integer> 
    @param startMonth <Integer> 
**/ 
function isInFourWeekPeriod(startDate, startMonth) { 
    var d = new Date() 
    var currentDate = d.getDate() 
    var currentMonth = d.getMonth() + 1 

    if (currentMonth !== startMonth || currentMonth !== startMonth + 1) 
    return false 

    if ((currentDate < startDate) && (currentMonth === startMonth)) 
    return false 

    if ((currentDate > startDate) && (currentMonth === startMonth + 1)) 
    return false 

    return true 
} 

if (isInFourWeekPeriod()) 
    showElement("#my-banner-text") 

// HTML file 
<style> 
    #my-banner-text { 
    display: none; 
    } 
</style> 
<header> 
    <div id="my-banner-text"> 
    my text 
    </div> 
</header> 
0

Not.

Aksi takdirde, Tarih nesnelerini doğrudan karşılaştırabilirsiniz, böylece bir tarihin belirli bir tarihten önce mi, sonra mı, yoksa tarih nesnelerinin mi kullanıldığını görmek için, örn.

// Create Dates for specific local dates 
 
var startDate = new Date(2016,3,1); 
 
var endDate = new Date(2016,3,30); 
 

 
// Create a Date for the current local time 
 
var now  = new Date(); 
 

 
// Do some comparisons 
 
if (now > startDate) { 
 
    show(now + ' is after ' + startDate); 
 
} 
 
if (now < endDate) { 
 
    show(now + ' is before ' + endDate); 
 
} 
 
show('Today is ' + (now.setHours(0,0,0,0) == endDate? '' : 'not ') + 'the last day'); 
 
     
 

 
    
 
function show(s) { 
 
    document.write('<br>' + s); 
 
}

Yani o zaman bu güvenilir olmadığını yukarıdaki ihtar çekerek (şimdiki zaman için bir tarih oluşturmak için istemci sistemi kullanmak, başlangıç ​​ve bitiş tarihleri ​​için parametreleri gönderebilir). Daha sonra, tarihleri, daha büyük, daha büyük ve eşit operatörleri kullanarak karşılaştırın.

İlgili konular