// Поиск всех вхождений
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)
    }())
});var obj = {"-KtuKxTh0lS1VWqn8tCb" : { commission: 1000, created: 1505287287 },
"-KtuLJGRoP1MtBvLkSR9": { commission: 1200, created: 1505287352 },
"-KtuP6g0rtvJMQ2YVcHC": { commission: 1500, created: 1505288361 }};
function fn(c) {
    return Object.keys(c).sort(function(a, b) {
        return c[b].created - c[a].created
    }).reduce(function(a, b) {
        b = c[b];
        var d = (new Date(1000 * b.created)).toLocaleString("ru", {
            year: "numeric",
            month: "long",
            day: "numeric"
        });
        a.date[0] != d && (a.date.unshift(d), a.sum.unshift(0));
        a.sum[0] += b.commission;
        return a
    }, {
        sum: [],
        date: []
    })
};
 console.log(fn(obj))