【JavaScript】変数を外部JSファイルで利用する

htmlファイル本体で宣言した変数を外部JSファイルでも利用できるかテストしたら、あっけなくできたのでメモ。

<script type="text/javascript">
	var aaa = 123;
	var bbb = 'abc';
</script>
<script type="text/javascript" src="sample.js"></script>

もちろん、PHPで出力した値を外部JSファイルで利用する事もできる。

<?php
	$abc = "abc";
?>
<script type="text/javascript">
	var abc = "<?php echo $abc; ?>"; 
</script>
<script type="text/javascript" src="sample.js"></script>

外部スクリプトがhtmlファイル本体に読み込まれた時点で変数に値がセットされている為、特別な処理をする必要は無い。

【PHP】本日の日付を基準に、5,10日を締切とした画像を動的に出力

本日の日付を基準に、5,10日を締切とした画像を動的に出力したい。

1~5日→5日、6~10日→10日、25~31日→末日の画像が出力される処理を考えてみた。

日付画像出力クラス

class ImgPass{	

	private $month;
	private $day;
	private $arr_pass;
	private $arr_num;
	private $deadline;
	 
	public function ImgPass(){
		$day_max = 5;
		// 月日取得
		$this->month = date('n');
		$this->day = floor(((date('j')-1)/5));
		if($this->day > $day_max){
			$this->day = $day_max;
		}
	
		// 画像パス・画像番号配列
		$this->arr_pass = array('m' => 'm', 'd' => 'd');
		$this->arr_num = array('m' => $this->month, 'd' => $this->day);
	
		$this->datePass($this->arr_pass, $this->arr_num);
	}
 
	public function datePass($p, $n){
		$arr_keys = array_keys($p);
		
		foreach($arr_keys as $key){
			$this->deadline[$key] = $p[$key].$n[$key].'.png';
		}
	}
 
	public function getPass(){
		return $this->deadline;
	}
}

実行例

$psss = new ImgPass();
print_r($psss->getPass());

‘m1.png’~’m12.png’と’d0.png’~’d5.png’の画像を準備すれば完成!!

【手続型】

// 月日取得
$month = date('n');
$day = floor(((date('j')-1)/5));
$day_max = 5;
if($this->day > $day_max){
	$this->day = $day_max;
}

// 画像パス・画像番号配列
$arr_pass = array('m' => 'm', 'd' => 'd');
$arr_num = array('m' => $month, 'd' => $day);

$deadline = passPut($arr_pass, $arr_num);

print_r($deadline);

function passPut($p, $n){
	$arr_keys = array_keys($p);
	
	foreach($arr_keys as $key){
		$deadline[$key] = $p[$key].$n[$key].'.png';
	}
	return $deadline;
}

手続型のコードも書いてみたのでサービス!

【jQuery】リンクテキストがアニメーションするサンプル

めんまのお願いを叶えました。

danceText

⇒デモ

【JS】

$(document).ready(function(){
	var cnt_list;
	var arr_list = new Array();
	var arr_str = new Array();
	var txt_list = "*";
	var txt_return;
	var block_name = '#danceTextBlock ul li';
	
	cnt_list = $(block_name).children('a').length;
	for (var i=0; i<cnt_list; i++){
		arr_list[i] = $(block_name).find('a').eq(i).text();
		
		$(block_name).eq(i).find('a').html(function(){
			for (var j=0; j<arr_list[i].length; j++){
				if(txt_list == "*"){
					txt_list = '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}else{
					txt_list = txt_list + '<span>'+arr_list[i].substr(j, 1)+'</span>';
				}
			}
			txt_return = txt_list;
			txt_list = "*";
			return txt_return;
		});
	}
	
	$(block_name).find('a').mouseover(function(){
		// 要素個数を取得
		var elem = $(this).find('span');
		var n = elem.length;

		// アニメーション
		var c = 0;
		var id = setInterval(function(){
			if(c <= (n-1)){
				elem.eq(c).stop(true, false).animate({'marginTop':'-4px'},'fast').animate({'marginTop':'0px'},'fast');
				c++;
			}else{
				c = 0;
				clearInterval(id);
			}
		}, 80);
	});
});

【HTML】

<div id="conteiner"> 
	<div id="danceTextBlock">
		<ul>	
			<li><a href="#">じんたん</a></li>
			<li><a href="#">めんま</a></li>
			<li><a href="#">あなる</a></li>
			<li><a href="#">ゆきあつ</a></li>
			<li><a href="#">つるこ</a></li>
			<li><a href="#">ぽっぽ</a></li>
		</ul>
	</div>
</div>

【CSS】

#danceTextBlock ul{
	width: 200px;
	list-style: none;
}

#danceTextBlock ul li{
	height: 42px;
	background: #000000;
	line-height: 42px;
}

#danceTextBlock ul li a{
	display: block;
	width: 200px;
	height: 42px;
	color: #ffffff;
	text-decoration: none;
}

#danceTextBlock ul li a span{
	display: block;
	float: left;
}

⇒デモ

【JavaScript】setInterval()関数の引数で関数が使えない問題について

setInterval()に実行したい関数を引数として渡したい場合、

var test = setInterval(aaa(), 1000);

function aaa(){
	alert('test');
}

としてもうまくいかない。

無名関数内に直接実行したい処理を書くと実行できたので、

var test = setInterval(function(){
	alert('test');
}, 1000);

無名関数内にコチラで定義した関数を記述してみたらうまくいった。

var test = setInterval(function(){aaa();}, 1000);

function aaa(){
	alert('test');
}

無名関数内で関数を実行するとうまくいったのでメモ。