KRYLOVblog

Метка

javascript

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

javascript change get parameter

JavascriptНет комментариев
function replaceSearchParam(href,param,value){
	var url=new URL(href);
	var search_params=url.searchParams;
	search_params.set(param,value);
	url.search=search_params.toString();
	var new_url=url.toString();
	return new_url;
}
$('.catalog .item .time input').on('change',function(){
	var id=$(this).closest('.values').find('input:checked').val();
	var buy_link=$(this).closest('.item').find('.buy a')
	buy_link.attr('href',replaceSearchParam(buy_link.attr('href'),'m',id));
});

javascript идущие часы с определением timezone

JavascriptНет комментариев
function current_time(){
	let bangkok_datetime_str=new Date().toLocaleString("en-US",{timeZone:"Asia/Bangkok"});
	var date=new Date(bangkok_datetime_str);
	var hours=date.getHours();
	var minutes=date.getMinutes();
	var seconds=date.getSeconds();
	if(hours<10)hours="0"+hours;
	if(minutes<10)minutes="0"+minutes;
	if(seconds<10)seconds="0"+seconds;
	document.getElementById('current_time').innerHTML='<span class="number">'+hours+'</span><span class="dot">:</span><span class="number">'+minutes+'</span><span class="dot">:</span><span class="number">'+seconds+'</span>';
}
$(document).ready(function(){
	setInterval(current_time,1000);
});
<div id="current_time"></div>

jquery блок полностью в зоне видимости

JavascriptНет комментариев

Когда каждый элемент .block полностью показан (прокручен до конца) добавляем блоку .bullet класс .active

$(document).ready(function(){
	$(window).scroll(function(){
		var scroll=parseInt($(window).scrollTop())+parseInt($(window).height());
		$('.block').each(function(){
			var offset=parseInt($(this).offset().top)+parseInt($(this).height());
			if(scroll>offset){
				$(this).find('.bullet').addClass('active');
			}
		});
	});
});

jquery each timeout

JavascriptНет комментариев
$(window).load(function(){
	var index=0;
	if(index>=$('img.loading').length){
		clearInterval(intrvl);
	}
	intrvl=setInterval(function(){
		$('img.loading').eq(index).attr('src',$('img.loading').eq(index).attr('data-src'));
		index++
	},10);
});
<img data-src="/resize/icons/auto/228/228/icon274.png" class="loading" src="/assets/images/ajax_loader.gif" alt=""/>

Загрузка iframe YouTube по клику

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

Вместо iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/<?=$item['youtube_id']?>?autoplay=0" allowfullscreen></iframe>

отображаем div

<div class="youtube" id="<?=$item['youtube_id']?>"></div>

css:

.youtube{
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	display:inline-block;
	overflow:hidden;
	transition:all 200ms ease-out;
	cursor:pointer;
	height:360px;
}
.youtube .play{
	background:url('../images/youtube-play-btn.png') no-repeat;
	background-position:0 -50px;
	-webkit-background-size:100% auto;
	background-size:100% auto;
	position:absolute;
	height:50px;
	width:69px;
	transition:none;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	cursor:pointer;
}
.youtube:hover .play{
	background-position:0 0;
}

javascript:

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
	if(!document.getElementsByClassName){
		var getElementsByClassName=function(node, classname){
			var a=[];
			var re=new RegExp('(^| )'+classname+'( |$)');
			var els=node.getElementsByTagName("*");
			for(var i=0,j=els.length;i<j;i++)
				if(re.test(els[i].className))a.push(els[i]);
			return a;
		}
		var videos=getElementsByClassName(document.body,"youtube");
	}
	else{
		var videos=document.getElementsByClassName("youtube");
	}
	var nb_videos=videos.length;
	for (var i=0;i<nb_videos;i++){
		videos[i].style.backgroundImage='url(https://i.ytimg.com/vi/'+videos[i].id+'/sddefault.jpg)';
		var play=document.createElement("div");
		play.setAttribute("class","play");
		videos[i].appendChild(play);
		videos[i].onclick=function(){
			var iframe=document.createElement("iframe");
			var iframe_url="https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1";
			if(this.getAttribute("data-params"))iframe_url+='&'+this.getAttribute("data-params");
			iframe.setAttribute("src",iframe_url);
			iframe.setAttribute("frameborder",'0');
			iframe.style.width=this.style.width;
			iframe.style.height=this.style.height;
			this.parentNode.replaceChild(iframe,this);
		}
	}
});

Картинка: youtube-play-btn.zip
На основе: https://sitehere.ru/uskorit-zagruzku-stranic-sajta

js copy

JavascriptНет комментариев

В примере по клику на i в блоке .link скопировать ссылку внутри этого блока

function copyToClipboard(textToCopy){
	if(navigator.clipboard&&window.isSecureContext){
		return navigator.clipboard.writeText(textToCopy);
	}
	else{
		let textArea=document.createElement("textarea");
		textArea.value=textToCopy;
		textArea.style.position="fixed";
		textArea.style.left="-999999px";
		textArea.style.top="-999999px";
		document.body.appendChild(textArea);
		textArea.focus();
		textArea.select();
		return new Promise((res,rej)=>{
			document.execCommand('copy')?res():rej();
			textArea.remove();
		});
	}
}
$(document).ready(function(){
	$('.link i').on('click',function(){
		var link=$(this).closest('.link').find('a').attr('href');
		copyToClipboard(link).then(()=>console.log('copied')).catch(()=>console.log('not copied'));
	});
});