• 締切済み

指定日時から7日毎にテキストとリンクを繰返す方法

現在、手動でHTMLを毎週更新しています。 URLを含むテキストがA~Dまでありまして、一週間毎に A→B→C→D(→Aへ戻る)と繰り返し更新しています。 <div id="cm1"> □リンクA1  テキストA1 □リンクA2  テキストA2 □リンクA3  テキストA3 </div> このようなセットがDまであります。div idはAから順にcm1~cm4となってます。 javascriptで自動更新にできないかと思い、いろいろ調べ 一定時間で繰り返すというものがあり、以下の時間の部分を変えてみました。 $(function(){ var INTERVAL = 2000; setInterval(function(){ for( $i=1; $i<5; $i++ ){ if( $i == 4 ){ $j = 1; } else{ $j = $i + 1; } if( $( "#cm" + $i ).css( "display" ) != "none" ){ $( "#cm" + $i ).hide(); $( "#cm" + $j ).show(); break; } } },INTERVAL); }); 上記の時間の部分を var INTERVAL = 604800000; に変えてみましたが、7日経っても更新されませんでした。 常にページを更新したりしているからでしょうか。原因はわかりません。 CSSは #cm1{display: block;} #cm2{display: none;} #cm3{display: none;} #cm4{display: none;} javascriptは苦手で、ネットで調べましたが見つけたのは日時を指定するものなどです。 ご教示いただけましたら幸いです。。

みんなの回答

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.3

ごめん、間違えた。 jQuery.now() が返すのはミリ秒単位でした。 var j = Math.ceil( jQuery.now() / 604800000 ) % 4 + 1; 一週間待たなくても、#2さんも指摘してますが、PCのカレンダーを一週間進めてやればすぐに結果がわかりますよ。

yumico7
質問者

お礼

ご教示ありがとうございます。

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.2

こんにちは。 ロードされてから指定された間隔で実行されますので表示してから設定値までブラウザを開いてないと効果が現れません。 またJavaScriptでやるとクライアントの(Webページを見ている)端末の時間設定で動作が変わってしまいます。 (全てのユーザーが同じ状況にならない可能性がある) 表示した人全てのユーザーに同じリンク先を表示したいのであればサーバーサイドで制御したほうが確実です。

yumico7
質問者

お礼

ご回答ありがとうございます。 ほかの方法を探してみます。

関連するQ&A

  • テキストやリンクの表示・非表示

    Javascriptでテキストやリンクの表示や非表示をできるようにしたいです。 基本はテキストやリンクを非表示にして、”表示”リンクを表示させ、 ”表示”リンクをクリックすると、テキストと”非表示”リンクを表示させます。 しかし下のソースで実行をすると 最初、”表示”リンクのみ表示→”表示”リンクをクリック 次、テキストと”非表示”リンクを表示→”非表示”リンクをクリック 次、全て非表示 と、なってしまい、再度表示させることができなくなってしまいます。 よい解決方法があったら教えてください。 よろしくお願いします。 ========================================================== <html> <head> <title>表示・非表示テスト2</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript"> <!--// var typ; var typ2; function setDisplay(typ,typ2){ document.getElementById("myText").style.display = typ; document.getElementById("myText2").style.display = typ2; } //--> </script> </head> <body> <DIV ID="myText" style="display:none"> Display Sample<br> <a href="javascript:setDisplay('none','blcok');">非表示</a><br> </DIV> <br> <DIV ID="myText2"> <a href="javascript:setDisplay('block','none');">表示</a><br> </DIV> <br> </body> </html>

  • JavaScriptを使ってアンカーリンクでテキストを変更したい。

    JavaScriptを使ってアンカーリンクでテキストを変更したい。 JavaScriptを使ってアンカーリンクでテキストを変更したいのですがうまくいかず困っています。 A B C  <div class="A"> ○○○○○ ○○○○○ ← A群 ○○○○○ </div> Bのアンカーリンクを押したら A B C  <div class="B"> □□□□□ □□□□□ ← B群 □□□□□ </div> Cのアンカーリンクを押したら A B C  <div class="C"> △△△△△ △△△△△ ← C群 △△△△△ </div> というように同じページ内の同じ場所にcssのdisplay(none⇔block)で表示を入れ替えるようなスクリプトが書きたいのですがわかりません。 参考URLだけでもいいので宜しくお願いいたします。

  • onclickで表示/非表示させている動きに、別ページからリンクさせるには

    JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01">  ・・・ </div> <div id="test02">  ・・・ </div> <div id="test03">  ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか? 恐れ入りますがよろしくお願い致します。

  • div要素をランダムに表示させたい

    お世話になります。Javascriptについて質問させていただきます。 拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。 javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。 ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。 ご回答頂けたら幸いです。 ■ html <body onLoad="test(no)"> <div id="link"> <div class="link01"> <p>文章1</p> </div> <div class="link02"> <p>文章2</p> </div> <div class="link03"> <p>文章3</p> </div> </div> <ul> <li><a href="#" onclick="showChanger(1);">リンク1</a></li> <li><a href="#" onclick="showChanger(2);">リンク2</a></li> <li><a href="#" onclick="showChanger(3);">リンク3</a></li> </ul> ■javascript function test(no){ var parenObj=document.getElementById("link"); for(var i in parenObj.childNodes){ var childObj=parenObj.childNodes[i]; if(childObj.tagName=="DIV"){ if(no == 1){ if(childObj.className=="link01"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 2){ if(childObj.className=="link02"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } if(no == 3){ if(childObj.className=="link03"){ childObj.style.display = "block"; }else{ childObj.style.display = "none"; } } } } } ■css .link01 { display:block; margin-bottom:10px; } .link02 { display:none; margin-bottom:10px; } .link03 { display:none; margin-bottom:10px; }

  • CSSでテキストリンクの色を複数指定したいのですが・・・

    はじめまして。 CSS勉強中なんですが、今CSSで作ったホームページでわからないことがあります。 テキストリンクの色をa:linkという直接タグにCSSを指定して統一しているんですが、なんとかしてそれぞれの場所にあったテキストリンクの色に指定できないものでしょうか? できればそれぞれを配置してあるdivごとに指定できると楽なんですが・・・

    • ベストアンサー
    • HTML
  • onMouseoverで下線表示したい(リンクではないテキスト)

    リンクではないテキスト部分に <a onMouseover="this.style.textDecoration='underline'" onMouseout="this.style.textDecoration='none'"> を入れるとリンクではないテキスト部分に下線がつくのですが、同じテキストに<onclick="document.all.d.style.display= document.all.d.style.display=='none'?'':'none'"> という別の場所に別のテキストを表示する支持を入れたいのですが、一緒に入れてしまうと動いてくれません…どうしたらよいか教えてください。

    • ベストアンサー
    • HTML
  • テキストノードを非表示にできません

    いつもお世話になります。 <div id="ida"> <div>aaaaaaaaaaaa</div> </div> のとき、 elemDiv=document.getElementById("ida"); var nodes=elemDiv.childNodes; for(i=0;i<nodes.length;i++) {   var node=nodes[i];   if(node.nodeName.toLowerCase()=='div'){     node.style.display='none'   } } とすれば、<div>aaaaaaaaaaaa</div> は、表示されなくなります。 ここで、 <div id="ida"> aaaaaaaaaaaa </div> として、つまり文字列を<div>で囲まないようにして for(i=0;i<nodes.length;i++) {   var node=nodes[i];   if(node.nodeName=='#text'){     node.style.display='none'   } } とすると、「aaaaaaaaaa」が非表示となりません。 テキストノード自体を非表示にすることはできないのでしょうか。 よろしくお願いいたします。

  • animateを使用したマウスオーバー時の反応

    jQuery初心者で、知識が浅いのでご教授頂けると幸いです。 横1列に下記のような順番でテキストや画像を並べています。 ================================= タグ 画像 テキストテキストテキスト          テキスト ================================= このBOX自体に class="top_odai" とつけています。 これが30段程、同じものが繰り返されます。(タグやテキスト内容は変わります。画像は同じものです) .top_odai内のリンクを探して、このBOX全体がリンクになるように設定しています。 マウスオーバー(hover)すると、「画像が少し大きくなる&タグが左にずれる」動作が起きるようにしました。 テキスト自体は、色が変わってシャドウが付きます。 この設定をjQueryで書いてみました。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー $(document).ready(function() { var linkboxes = $('.top_odai'); for (var i=0; i<linkboxes.length; i++){ var readmores = $('div.title'); for (var j=0; j<readmores.length; j++){ $('.top_odai').click(function() { var anchorTags = this.getElementsByTagName("a"); window.location = anchorTags[0].href; }); } } }); $(function(){ $('.top_odai') .each(function(){ $('.top_odai div.headwill img').css({'width':'20px','height':'20px'}); }) .hover(function(){ $(this).addClass('top_odai_hover'); $('div.title a').css({'color':'#FF3300','text-decoration':'none'}); $('.top_odai div.headwill img').stop().animate({'width':'30px','height':'30px','marginTop':'-5px'},'normal'); }, function(){ $(this).removeClass("top_odai_hover"); $('div.title a').css({'color':'#525252','text-decoration':'none'}); $('.top_odai div.headwill img').stop().animate({'width':'20px','height':'20px','marginTop':'0px'},'normal'); } ); }); ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー これで、記述はかなりスマートじゃないと思いますが、、、一応希望通りの動きはします。 ただこれでは全ての「class="top_odai"」に反応してしまいます。 1つのリンクに触れると、他の段の全てのBOXが同じく動いてしまいます。 下記は動作のテストページになります。 http://music333.oops.jp/test/test.html これを1つのリンクに触れたら、そのBOX(.top_odai)だけ上記の動きを させたいのですが、どのようにすれば良いのか、、、かなりハマっております。 各top_odaiに連番のidを割当て指定してみたりと色々試してみましたが全滅でした。 どのように書き換えたら、良いでしょうか? アドバイス・ご教授どうぞ宜しくお願い致します。

  • テキストリンクとテキストで、高さが違ってしまいます。これを直したいのですが…

    左側のテキストリンクは左上に、右側のテキストは右上に表示させたいのですが、FxとIEで高さがずれてしまいます。どちらのブラウザでもIEのように高さが合うようにしたいのですが… 以下、ソースです ---------------------------------------- HTML <div id="footer"> <a href="index.html">左端に揃えたい</a> <p>右端に揃えたい</p> </div> CSS #footer a { float: left; } #footer p { float: right; } ---------------------------------------- 素人質問で申し訳ありません。いろいろ考えた結果、左側はリンクで、右側がテキストだから高さが合わないのではないかと思っているのですが、対策が取れませんでした。

    • ベストアンサー
    • HTML
  • リンクを横に並べるには、どうすればいいですか?

    リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか?    リンク1(中央揃え)   リンク2(右揃え) なぜか、下記のようになってしまいます。 リンク1(中央揃えにしたいのに、左揃え状態)                                リンク2(右揃えになっているけど、改行されてしまう) margineかpaddingで設定するしかないでしょうか? 文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。 よろしくお願いします。 /*---------- CSS部分(外部スタイルシートに記述) ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="~○○">リンク1</a></div> <div id="right"><a href="~○○">リンク2</a></div> </div>

    • ベストアンサー
    • CSS