KRYLOVblog

Метка

javascript

Всего: 139 записей

javascript: date, следующий день

Javascript1 комментарий

Когда нужно получить дату следующего дня в формате
var nextday = new Date("6,30,2011,00:00:00");
например для 30-го июня 2011.
Код:

var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate()+1);
var nextday = new Date((tomorrow.getMonth()+1)+','+tomorrow.getDate()+','+tomorrow.getFullYear()+',00:00:00');

tomorrow.getMonth()+1 — т.к. нумерация месяцев начинается от 0.

javascript: падающий снег

Javascript5 комментариев
var snowmax=35;
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff");
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");
var snowletter="*";
var sinkspeed=0.6; //0.3-2
var snowmaxsize=22;
var snowminsize=8;
var snowingzone=1; //1-4
var snow=new Array();
var marginbottom;
var marginright;
var timer;
var i_snow=0;
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent;
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);
var ns6=document.getElementById&&!document.all;
var opera=browserinfos.match(/Opera/);
var browserok=ie5||ns6||opera;
function randommaker(range) {
	rand=Math.floor(range*Math.random());
	return rand;
}
function initsnow() {
	if (ie5 || opera) {
		marginbottom=document.body.clientHeight;
		marginright=document.body.clientWidth;
	}
	else if (ns6) {
		marginbottom=window.innerHeight;
		marginright=window.innerWidth;
	}
	var snowsizerange=snowmaxsize-snowminsize;
	for (i=0;i<=snowmax;i++) {
		crds[i]=0;
		lftrght[i]=Math.random()*15;
		x_mv[i]=0.03+Math.random()/10;
		snow[i]=document.getElementById("s"+i);
		snow[i].style.fontFamily=snowtype[randommaker(snowtype/length)];
		snow[i].size=randommaker(snowsizerange)+snowminsize;
		snow[i].style.fontSize=snow[i].size+"px";
		snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
		snow[i].sink=sinkspeed*snow[i].size/5;
		if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
		if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
		if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
		if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
		snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);
		snow[i].style.left=snow[i].posx+"px";
		snow[i].style.top=snow[i].posy+"px";
	}
	movesnow();
}
function movesnow() {
	for(i=0;i<=snowmax;i++) {
		crds[i]+=x_mv[i];
		snow[i].posy+=snow[i].sink;
		snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";
		snow[i].style.top=snow[i].posy+"px";
		if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {
			if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
			if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
			if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
			if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
			snow[i].posy=0;
		}
	}
	var timer=setTimeout("movesnow()",50);
}
for (i=0;i<=snowmax;i++) {
	document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px;'>"+snowletter+"</span>");
}
if (browserok) {
	window.onload=initsnow;
}

http://forum.ru-board.com/topic.cgi?forum=31&topic=4208
2011-01-05 обновлено, исправлены ошибки, теперь снег падает во всех браузерах :)

Автоматическая проверка логина на занятость при регистрации без перезагрузки страницы — AJAX

Javascript, PHP3 комментария

Часть формы где у нас инпут для логина:

echo "<input type='text' id='login' name='login' onblur='checkName(this.value, \"\")'/>";
	echo "&nbsp;&mdash;&nbsp;<label for='login'>LOGIN</label><br/>";
	echo "<span class='hidden' id='nameCheckFailed'>NOT AVAILABLE</span>";
	echo "<span class='hidden' id='nameCheckOK'>AVAILABLE</span><br/>";

Яваскрипт, подключенный например где-то в head:

function checkName(input,response) {
	if (response != '') {
		failtext=document.getElementById('nameCheckFailed');
		oktext=document.getElementById('nameCheckOK');
		if (response == '1') {
			failtext.className='failtext';
			oktext.className='hidden';
		}
		else {
			failtext.className='hidden';
			oktext.className='oktext';
		}
	}
	else {
		if (input != '') {
			url='http://hostname/xml/checkUserName.php?q='+input;
			loadXMLDoc(url);
		}
		else {
			failtext.className='hidden';
			oktext.className='hidden';
		}
	}
}
var req;
function loadXMLDoc(url) {
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		req.onreadystatechange=processReqChange;
		req.open("GET",url,true);
		req.send(null);
	}
	else if (window.ActiveXObject) {
		req = new ActiveXObject("Micrisoft.XMLHTTP");
		if (req) {
			req.onreadystatechange=processReqchange;
			req.open("GET",url,true);
			req.send();
		}
	}
}
function processReqChange() {
	if (req.readyState == 4) {
		if (req.status == 200) {
			response=req.responseXML.documentElement;
			method=response.getElementsByTagName('method')[0].firstChild.data;
			result=response.getElementsByTagName('result')[0].firstChild.data;
			eval(method + '(\'\', result)');
		}
		else {
			alert("There was a problem retrieving the XML data:\n"+req.statusText);
		}
	}
}

Файл /xml/checkUserName.php (в первой строчке инклуд подключения к БД, если не знаем что там и как — гуглим, еще конечно должна существовать таблица users с полем username, в которое пишутся логины)

<?php
include ($_SERVER['DOCUMENT_ROOT']."/include/dbconfig.php");
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
function nameInUse($q) {
	$query=mysql_query("SELECT COUNT(*) FROM users WHERE username='".$q."'");
	$result=mysql_fetch_array($query);
	switch($result[0]) {
		case '1' :
			return '1';
			break;
		default:
			return '0';
	}
}
echo '<response>
	<method>checkName</method>
	<result>'.nameInUse($_GET['q']).'</result>
</response>';
?>

И CSS:

span.hidden {
	display:none;
}
span.failtext {
	display: inline;
	background: #ffebea;
}
span.oktext {
	display: inline;
	background-color: #efffea;;
}

На основе: http://wmdn.ru/javascript/example-of-check-login-using-ajax/
Вариант от WMDN: http://wmdn.ru/javascript/example-of-check-login-using-ajax/

javascript: печать определеннного блока страницы

Javascript6 комментариев

Функции:

function printBlock() {
	PrintContent = $('#PrintContent').html();
	$('body').addClass('printSelected');
	$('body').append('<div class="printSelection">'+PrintContent+'</div>');
	window.print();
	window.setTimeout(pageCleaner,0);
	return false;
}
function pageCleaner(){
	$('body').removeClass('printSelected');
	$('.printSelection').remove();
}

Если бы ссылка на печать была внутри блока то:

function printBlock(printLink) {
PrintContent = $(printLink).parents('#PrintContent').html();
...

Ссылка:

<a href="" onclick="printBlock();">Распечатать</a>

Стили:

.printSelected div{display:none}
.printSelected div.printSelection{display:block;}
.printSelected div.printSelection div{display:block;}

По статье:http://htmltricks.ru/archives/77

Javascript: Drag & Drop (перетаскивание элементов)

Javascript2 комментария

Собственно Javascript:

var moveState = false;
var x0, y0;
var divX0, divY0;
function defPosition(event) {
	var x = y = 0;
	if (document.attachEvent != null) {
		x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
		y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	}
	if (!document.attachEvent && document.addEventListener) {
		x = event.clientX + window.scrollX;
		y = event.clientY + window.scrollY;
	}
	return {x:x, y:y};
}
function initMove(div, event) {
	var event = event || window.event;
	x0 = defPosition(event).x;
	y0 = defPosition(event).y;
	//divX0 = parseInt(div.style.left);
	//divY0 = parseInt(div.style.top);
	divX0 = absPosition(div).x;
	divY0 = absPosition(div).y;
	moveState = true;
}
document.onmouseup = function() {
	moveState = false;
}
function moveHandler(div, event) {
	var event = event || window.event;
	if (moveState) {
		div.style.left = divX0 + defPosition(event).x - x0;
		div.style.top = divY0 + defPosition(event).y - y0;
	}
}
function makeFastDrag(div, event) {
	document.onmousemove = function(event) {
		moveHandler(div, event);
	}
}
function absPosition(obj) {
	var x = y = 0;
	while(obj) {
		x += obj.offsetLeft;
		y += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return {x:x, y:y};
}

HTML:

<div class='primer' onmousedown='initMove(this,event);' onmouseup = 'moveState = false;' onmousemove = 'makeFastDrag(this, event);'>Some Text</div>

CSS:

.primer {
	width: 150px;
	height: 100px;
	position: absolute;
	background: #000;
	cursor: move;
}

Использовались статьи:
http://fastcoder.org/articles/?aid=149
http://fastcoder.org/articles/?aid=16