JAvascript実用小例まとめ

注意:不明な関数がある場合は、javascript共通関数で探してください.
1.虹文字効果

/*
    ： 
rainbowText("   A*      ",20);
*/
function rainbowText(text,size){
	function createHexArray(n) {
		var arr=new Array(n);
		
		for (var i = 1; i <= n; i++)
		arr[i] = i - 1;
		
		arr[11] = "A";
		arr[12] = "B";
		arr[13] = "C";
		arr[14] = "D";
		arr[15] = "E";
		arr[16] = "F";
		return arr;
	}
	
	function convertToHex(x) {
		var hx = createHexArray(16);
		if (x < 17) x = 16;
		var high = x / 16;
		var s = high+"";
		s = s.substring(0, 2);
		high = parseInt(s, 10);
		var left = hx[high + 1];
		var low = x - high * 16;
		if (low < 1) low = 1;
		s = low + "";
		s = s.substring(0, 2);
		low = parseInt(s, 10);
		var right = hx[low + 1];
		var string = left + "" + right;
		return string;
	}
	
	text = text.substring(0, text.length);
	color_d1 = 255;
	mul = color_d1 / text.length;
	for(var i = 0; i < text.length; i++) {
		color_d1 = 255*Math.sin(i / (text.length / 3));
		color_h1 = convertToHex(color_d1);
		color_d2 = mul * i;
		color_h2 = convertToHex(color_d2);
		
		k = text.length;
		j = k - i;
		if (j < 0) j = 0;
		color_d3 = mul * j;
		color_h3 = convertToHex(color_d3);
		
		document.write("" + text.substring(i, i + 1) + "");
	}
}

2.canvas内のマウスの位置(ピクセル)を取得
注意:canvasのheight、widthとstyleを保証します....widthは一致する.つまり、修正するときに同時に修正します.
関数mousePositionはjs関数を参照してブログをまとめます.

function canvasMouseClick(event){
    var canvas=document.getElementById("myCanvas");
    var bbox =canvas.getBoundingClientRect();
    var x=event.clientX;
    var y=event.clientY;
    var pos=mousePosition(event);
    x=x-bbox.left *(canvas.width / bbox.width);
    y=y - bbox.top  * (canvas.height / bbox.height);
	return {x:x,y:y};
}

3.jaカスタムmap関数(他の人の)

/* **************************************** map bg*/
/*
 * map    

 var map = new Map();
 map.put("a", "aaa");
 map.put("b","bbb");
 map.put("cc","cccc");
 map.put("c","ccc");
 map.remove("cc");
 map.clear();
 var array = map.keySet();
 for(var i in array) {
 document.write("key:(" + array[i] +") 
value: ("+map.get(array[i])+") 
");
}
*/


function Map(){
this.container = new Object();
}


Map.prototype.put = function(key, value){
this.container[key] = value;
}


Map.prototype.get = function(key){
return this.container[key];
}


Map.prototype.keySet = function() {
var keyset = new Array();
var count = 0;
for (var key in this.container) {
//   object extend  
if (key == 'extend') {
continue;
}
keyset[count] = key;
count++;
}
return keyset;
}


Map.prototype.size = function() {
var count = 0;
for (var key in this.container) {
//   object extend  
if (key == 'extend'){
continue;
}
count++;
}
return count;
}


Map.prototype.remove = function(key) {
delete this.container[key];
}
Map.prototype.clear=function(){
	var array = this.keySet();
	var n=array.length;
	for(var i=0;i

4.js簡単なページ切り替え効果.
注意:私のデータ構造の説明を書くのに使います.すべては1つのページで、divでいくつかの部分に分けて、コードを見てから分かります.

var saveId=new Array(),oldSelId=0;
saveId[0]="#demo_one";
saveId[1]="#demo_two";
saveId[2]="#demo_three";
function choose(n)
{
	if(oldSelId==n) return ;
	$(saveId[oldSelId]).fadeOut(500,function(){
	    switch(n){
	        case 0:
	        break;
	        case 1:
	        break;
	        case 2:
	           if($.trim($("#BSM_ini_3").html())==""){ //.trim IE   
                    demo_three_init();
                }
	        break;
	    }
		
		$(saveId[n]).fadeIn(500,function(){//        ，         。
		});
		
	});
	oldSelId=n;
}

5.懸濁層効果(ここではhtmlの部分のみ)

6.日からフォーマット(ネットで探したもの)

//  Date   ，  Date         String
//  (M)、 (d)、  (h)、 (m)、 (s)、  (q)     1-2     ， 
//  (y)    1-4     ，  (S)    1     (  1-3     ) 
//   ： 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //   
        "d+": this.getDate(), //  
        "h+": this.getHours(), //   
        "m+": this.getMinutes(), //  
        "s+": this.getSeconds(), //  
        "q+": Math.floor((this.getMonth() + 3) / 3), //   
        "S": this.getMilliseconds() //   
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");
	alert(time1);

7.ページをロードした後、middleの内容の高さに応じてレイアウトのサイズを再調整します.

function changeHeight()
{
	var ht=document.getElementById("middle").offsetHeight;
	document.getElementById("md_left").style.height=ht+"px";
	document.getElementById("md_right").style.height=ht+"px";
	//document.getElementById("md_left").style.background="repeat-y url(../../images/userBg/left.gif)";
	//document.getElementById("md_left").style.backgroundRepeat="repeat-y";
	//document.getElementById("md_left").style.backgroundImage="../../images/userBg/left.gif";
	
}
window.οnlοad=changeHeight;

8.変数が定義されているかどうかを判断する

if ( typeof(callbackfun) != "undefined" ) {
    callbackfun();
}