// Поиск всех вхождений
input2.oninput = function(){
let target = this.value;
let targetLength = target.length;
let marker = '<span class="marked">' + target + '</span>';
let markerLength = marker.length + 1;
let searchText = text2;
let pos = -1, idx;
if(targetLength) while((idx = searchText.indexOf(target, pos)) != -1) {
searchText = searchText.slice(0, idx) + marker + searchText.slice(idx + targetLength);
pos = idx + markerLength;
};
result2.innerHTML = searchText;
};window.onload = function() {
var input = document.querySelector("input");
var button = document.querySelector("button");
var inputlength = document.querySelector("#length");
var syb = document.querySelector("#syb");
button.addEventListener("click", function() {
var str = "";
var symbols = syb.value.split("");
var len = +inputlength.value || symbols.length;
for (var i = 0; i < len; i++) {
symbols.length || (symbols = syb.value.split(""));
str += symbols.splice(Math.floor(Math.random() * symbols.length), 1);
}
input.value = str;
})
};function fetch_highest_res(videoid) {
var resolutions = ["maxresdefault", "sddefault", "hqdefault", "mqdefault"];
var counter = resolutions.length,
img_max = new Image;
return new Promise(function(resolve, reject) {
resolutions.forEach(function(resolution) {
var img = new Image;
img.onerror = function() {
--counter || resolve(img_max)
};
img.onload = function() {
if (img.width > img_max.width) img_max = img;
img.onerror()
};
img.src = "https://i.ytimg.com/vi/" + videoid + "/" + resolution + ".jpg"
})
})
};
fetch_highest_res('eei-soH5Gx8').then(function(img_max) {
console.log(img_max)
});<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
position: relative;
}
.target {
position: absolute;
top: 190px; left: 190px;
width: 60px; height: 60px;
border-radius: 50%;
background-color: red;
text-align: center;
line-height: 60px;
color: #FFFFFF;
}
.line {
position: absolute;
top: 220px;
left: 220px;
width: 100px;
height: 4px;
background-color: red;
transform-origin: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const target = document.querySelector('.target');
const line = document.querySelector('.line');
const pos = {left : 190, top : 190, width : 60, height : 60};
const lft = pos.left + pos.width / 2;
const tp = pos.top + pos.height / 2;
document.addEventListener('mousemove',
function(event) {
let x = event.pageX - lft - 8;
let y = event.pageY - tp - 8;
let r = Math.sqrt(x * x + y * y);
let deg = 180 / Math.PI * Math.atan2(y, x);
if(deg < 0) deg += 360;
target.innerHTML = (deg|0) + ' deg'
line.style.transform = "rotate(" + deg + "deg)";
line.style.width = r + 'px'
})
});
</script>
</head>
<body>
<div class="line"></div>
<div class="target"></div>
</body>
</html>$.fn.oldtoggle = function () {
var b = arguments;
return this.each(function (i, el) {
var a = function () {
var c = 0;
return function () {
b[c++ % b.length].apply(el, arguments)
}
}();
$(el).click(a)
})
};
$('#btn').oldtoggle(function(){
$('#id1, #id4, id5, #id8').hide();
}, function() {
$('[id^=id]').show();
);$('.nav_btn').click(function() {
navBtnId = $(this).index();$('.nav_btn').on("click", "label", function() {
navBtnId = $('.nav_btn label').index(this);var data = [
["1", "2", "", "3", ""],
["2", "2", "", "", ""],
["3", "1", "", "", ""],
["1", "1", "", "1", ""],
["", "", "", "2", ""]
],
obj = {};
data.forEach(function(el) {
el.forEach(function(a, i) {
a.trim() || (obj[i] = (obj[i] || 0) + 1)
})
});
data = data.map(function(el) {
return el.filter(function(a, i) {
return obj[i] != data.length
})
});
console.log(data)const filters = {
byName: optionName == undefined ? () => undefined : (actualName, optionName) => actualName === optionName,
byCount: optionCount == undefined ? () => undefined : new Function("actualName, optionName", "return actualName " +optionCount),
byPrice: optionPrice == undefined ? () => undefined : new Function("actualName, optionName", "return actualName " +optionPrice)
};$(function() {
var nice = $(".r").niceScroll({
cursorcolor: "yellow",
cursorwidth: "10px",
cursorborder: "1px solid red",
cursorborderradius: "15",
autohidemode: false,
cursorminheight: 32
});
$(".click-more-info").click(function() {
$(this).siblings(".more-info-block").slideToggle(800, function() {
nice.resize()
})
});
});var a = document.querySelector("#flat_ads_block_id_1");
a && window.setTimeout(function() {
a.classList.add("right_slide_flat_panel");
var b = document.createElement("div");
b.classList.add("flat_slide_cross");
b.addEventListener("click", function() {
a.classList.remove("right_slide_flat_panel");
});
a.insertBefore(b, a.firstChild);
}, 3000);<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: rgba(216, 191, 216, 1);
}
.hide{
display: none;
}
</style>
</head>
<body>
<p>Отобразить только имеющие отношение к</p>
<input type="checkbox" name="1" id="zel" value="001"><label for="zel" style="color: green">Зеленым</label>
<input type="checkbox" name="2" id="kras" value="010"><label for="kras" style="color: red">Красным</label>
<input type="checkbox" name="3" id="zhelty" value="100"><label for="zhelty" style="color: yellow">Желтым</label>
<ul>
<li data-color="001"><a style="color: green" href="">зеленый</a></li>
<li data-color="001"><a style="color: green" href="">зеленый</a></li>
<li data-color="001"><a style="color: green" href="">зеленый</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="010"><a style="color: red" href="">красный</a></li>
<li data-color="100"><a style="color: yellow" href="">желтый</a></li>
<li data-color="100"><a style="color: yellow" href="">желтый</a></li>
<li data-color="100"><a style="color: yellow" href="">желтый</a></li>
</ul>
<script>
window.addEventListener("DOMContentLoaded", function() {
var c = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(c, function(a) {
a.addEventListener("change", function() {
var a = [].reduce.call(c, function(b, a) {
return a.checked ? b | a.value : b
}, 0);
[].forEach.call(document.querySelectorAll("[data-color]"), function(b) {
b.dataset.color & a ? b.classList.remove("hide") : b.classList.add("hide")
})
})
})
});
</script>
</body>
</html>window.addEventListener("DOMContentLoaded", function() {
function scrollToElement(element, duration) {
var to = element.getBoundingClientRect().top;
var from = window.pageYOffset;
var start = performance.now();
requestAnimationFrame(function animate(time) {
var progress = (time - start) / duration;
1 <= progress && (progress = 1);
window.scrollTo(0, from + to* progress | 0);
1 > progress && requestAnimationFrame(animate)
})
}
var nav = document.querySelector(".nav"),
button = nav.querySelectorAll(".nav__link"),
block = document.querySelectorAll(".content .block");
nav.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest(".nav__link")) {
event.preventDefault();
var indx = [].indexOf.call(button, target);
if (indx !== -1) scrollToElement(block[indx], 800)
}
})
});<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,html{
height:100%;
}
#slider>div{
position:absolute;
background-size:cover;
width:20%;
height:50%;
transition:all 1s;
text-align:center;
line-height:20em;
background-color: rgba(51, 102, 0, 1);
}
#slider>div span{
opacity:0;
font-size:72px;
color:rgba(255,255,255,1);
}
#slider{
position:relative;
overflow:hidden;
width:100%;
height:100%;
}
#slider>div:nth-child(1){
left:-20%;
top:-50%;
}
#slider>div:nth-child(2){
left:0;
top:0;
}
#slider>div:nth-child(3){
left:0%;
top:50%;
}
#slider>div:nth-child(4){
left:20%;
top:0%;
width:60%;
height:100%;
}
#slider>div:nth-child(4) span{
opacity:1;
transition:.8s 1.4s;
}
#slider>div:nth-child(5){
left:80%;
top:0%;
}
#slider>div:nth-child(6){
left:80%;
top:50%;
}
#slider>div:nth-child(7){
left:100%;
top:0%;
}
#slider>div:nth-child(6)~div{
visibility:hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
(function fn()
{
$("#slider > div:nth-child(1)").appendTo("#slider");
window.setTimeout(fn,3000)
}())
});
</script>
</head>
<body>
<div id="slider">
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=1)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=2)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=3)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=4)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=5)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=6)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=7)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=8)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=9)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=10)"><span>paris</span></div>
</div>
</body>
</html>$(function() {
(function short_link() {
var result = '0,01';
var words = '0123456789';
var max_position = words.length - 1;
for( i = 0; i < 4; ++i ) {
position = Math.floor ( Math.random() * max_position );
result = result + words.substring(position, position + 1);
}
$("#short_link").val(result);
window.setTimeout(short_link,1000)
}())
});