CSS(スタイルシート)ごとランダムに読み込む
先日ご紹介しました、「CSSのバックグラウンド画像をランダムに表示してみる」では、個々のスタイルの背景画像をランダムに表示することが可能になりました。
っちゅうことは。。。CSSを何種類か用意しておいて、読み込んでるCSS(スタイルシート)を丸ごとランダムに読み込むことができたら。。。
こりゃぁ、アクセスされるたびにサイトのデザインをガラっと変えることも可能なのでは?
っと。。。思ってしまいまして。。探してみたら。。。やっぱりございました。
とりあえず、サンプルはこちらからじゃ↓
このサンプルページではどんなことをやってるかといいますと。。。
htmlはそのままで、ページが読み込まれるたびに、あらかじめ用意しておいた数種類のCSS(スタイルシートを)をJavaScriptでランダムに読み込んでおります。
っちゅうわけで、アクセスされるたびにサイトのデザインをガラっと変えることに成功!
ではでは、肝心のやり方のご説明。
1. 以下のコードをコピーして、適当に名前をつけてjsで保存。(わたくしはrandom-css.jsと名前付けました。)
2. で、3行目の
var ranCssNum= Math.floor(Math.random()*3);
の数字を用意するスタイルシートの数に書き換えます。
同様に12行目の
var cssName=new Array(3)
の数字も用意するスタイルシートの数に書き換えます。
で、14行目からの
cssName[0]=”




2月 9th, 2007 at 11:24 PM
こんにちは!
こちらのスクリプトが大変参考になり、本当に助かっています。
感謝!
初心者ながら作ってみたのですが、
アクセス時間によって、いくつかのスタイルシートを固定し、その中でランダムにCSSを表示する、いわゆる、
CSS random script by time
を書いてみたのですが、
文法上の誤りなどありますでしょうか?
ぶしつけで恐縮ですが、
軽く目を通していただけると嬉しいです。
アクセス時間を4つの時間帯に分けています。
myTime=(new Date()).getHours();
if(myTime>=5 && myTime”;
cssName[1]=”";
cssName[2]=”";
return cssName[whichCss]
}
document.write(getaCss());
}else if(myTime>=10 && myTime=5 && myTime”;
cssName[1]=”";
cssName[2]=”";
return cssName[whichCss]
}
document.write(getaCss());
}else if(myTime>=17 && myTime”;
cssName[1]=”";
cssName[2]=”";
return cssName[whichCss]
}
document.write(getaCss());
}else if(myTime=23){
function get_randomCssNum()
{
var ranCssNum= Math.floor(Math.random()*3);
return ranCssNum;
}
function getaCss()
{
var whichCss=get_randomCssNum();
var cssName=new Array(3)
cssName[0]=”";
cssName[1]=”";
cssName[2]=”";
return cssName[whichCss]
}
document.write(getaCss());
}
2月 10th, 2007 at 4:30 AM
むっほさん
時間帯で読み込むCSSを変更する。。。なかなか面白いアイデアですね!朝はさわやかに、昼は元気に、夜はムーディ(勝山ではありませんよ。。)なイメージでサイトを作ってみても面白いかもって。。文法上の誤りは。。。わたくしJSはぶっちゃけ分かりません。ごめんなさいです。。
7月 8th, 2008 at 7:00 PM
14行目からの…なんですか?
途中で切れちゃっててわかりません><