Полезные простые js-скрипты

Здесь приведены несколько примеров js-скриптов, которые я часто использую.

1. domReady() - Обработчик готовности дерева DOM

domReady(handler)

handler - обработчик события

Описание функции domReady() приведено на странице Javascript без JQuery

2. topoltip() - Всплывающая подсказка

tooltip(elementr,text)

Всплывающая подсказка представляет собой короткое текстовое сообщение (text) с пояснением, возникающие в результате наведения курсора мышки на элемент (element) страницы.

CSS

.tooltip {
   position: fixed;
   padding: 4px 10px;
   border: 1px solid #b3c9ce;
   border-radius: 4px;
   text-align: center;
   font: italic 14px/1.3 sans-serif;
   color: #333;
   background: #fff;
   white-space: nowrap;
   box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
   left:-1000px; top:0px;
 }

HTML

<tag ... onmouseover = "tooltip(this,'всплывающая подсказка'" ... >
                   или
<tag ... tooltip = "всплывающая подсказка" ... >

JavaScript

var tooltipElem = null;
function tooltip(obj,txt) {
  if (tooltipElem==null) {
    tooltipElem = document.createElement('div'); 
    tooltipElem.className="tooltip";
    document.body.appendChild(tooltipElem);
   }
  if (!obj.onmouseout) 
     obj.onmouseout = function () {tooltipElem.style.top='-1000px';tooltipElem.innerHTML='';};
  var w = document.documentElement.clientWidth  || document.body.clientWidth; // Размер рабочей области браузера
  var t = obj.getBoundingClientRect(); // объект координат obj
  tooltipElem.innerHTML = txt;
  var left = t.left-5;
  if (left < 0) left=0;
  else if (left+window.pageXOffset+tooltipElem.offsetWidth > w ) left=(w-tooltipElem.offsetWidth-5);
  var top = t.top - tooltipElem.offsetHeight - 5;
  if (top < 0) { // если подсказка не помещается сверху, то отображать её снизу
        top = t.top + obj.offsetHeight + 5;}
  tooltipElem.style.left = left + 'px';
  tooltipElem.style.top = top + 'px';
 };

domReady(function() { 
  var list = document.querySelectorAll('[tooltip]');
  var fshow = function(a,b) {tooltip(a,b);};
  for (var i=0;i < list.length;i++) 
    { list[i].addEventListener('mouseover',fshow.bind(null,list[i],list[i].getAttribute('tooltip')),false); }
 });

3. Простая кнопка Наверх

CSS

.goTop {
   position: fixed;
   right: 8px;
   bottom: 16px;
   width: 22px;
   height: 22px;
   background: rgba(153,141,194,0.6) 
     url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAUUlEQVR42s2TQQoAIAgE2/8/ukQoOuiqBNUec2cQJLTD4G9Bl2hJcl8w4VV0JMjATAIGT8B6MwWs6M2QgVknXDGSoAKbksytmUQFVXiXvP9MAwWqSAXNzzb3AAAAAElFTkSuQmCC) 
     no-repeat 50% 50%;
   cursor: pointer;
   z-index: 9999;
   display: none;
   border-radius: 12px;
   border: 1px solid #7777cc;
}

.goTop:hover  {background-color:rgba(0,255,255,0.6);}

JavaScript

var goTop;
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) 
         { goTop.style.display = "block"; } 
    else { goTop.style.display = "none"; }  
 }

domReady(function() {
  goTop=document.createElement('div'); 
  goTop.className="goTop"; 
  goTop.addEventListener('click',
    function()  {window.scrollTo(0,0);},
    false);
  document.body.appendChild(goTop);
  window.addEventListener('scroll',scrollFunction,false); scrollFunction();
});

Пример

В Этом примере демонстрируются все три вышеуказанные скрипта. CSS и JS минимизированы

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Демо</title>
 <style>
.tooltip{position:fixed;padding:4px 10px;border:1px solid #b3c9ce;border-radius:4px;text-align:center;font:italic 14px/1.3 sans-serif;color:#333;background:#fff;white-space:nowrap;box-shadow:3px 3px 3px rgba(0,0,0,.3);left:-1000px;top:0px}
.goTop{position:fixed;right:8px;bottom:16px;width:22px;height:22px;background:rgba(153,141,194,0.6) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAUUlEQVR42s2TQQoAIAgE2/8/ukQoOuiqBNUec2cQJLTD4G9Bl2hJcl8w4VV0JMjATAIGT8B6MwWs6M2QgVknXDGSoAKbksytmUQFVXiXvP9MAwWqSAXNzzb3AAAAAElFTkSuQmCC) no-repeat 50% 50%;cursor:pointer;z-index:9999;display:none;border-radius:12px;border:1px solid #77c}.goTop:hover{background-color:rgba(0,255,255,0.6)}
table{width:100%}h1{text-align:center;width:}img{display:block;max-height:400px;margin:30px auto 900px auto}
</style>
<script>
(function(){var readyBound=false;var bindReady=function(){if(readyBound)return;readyBound=true;if(document.addEventListener)document.addEventListener("DOMContentLoaded",function(){document.removeEventListener("DOMContentLoaded",arguments.callee,false);ready()},false);if(window.addEventListener)window.addEventListener("load",ready,false);else window.onload=ready};var isReady=false;var readyList=[];var ready=function(){if(!isReady){isReady=true;if(readyList){var fn_temp=null;while(fn_temp=readyList.shift())fn_temp.call(document);
readyList=null}}};domReady=function(fn){bindReady();if(isReady)fn.call(document);else readyList.push(fn);return this}})();

var tooltipElem=null;function tooltip(obj,txt){if(tooltipElem==null){tooltipElem=document.createElement('div');tooltipElem.className="tooltip";document.body.appendChild(tooltipElem);} if(!obj.onmouseout) obj.onmouseout=function(){tooltipElem.style.top='-1000px';tooltipElem.innerHTML='';};var w=document.documentElement.clientWidth||document.body.clientWidth;var t=obj.getBoundingClientRect();tooltipElem.innerHTML=txt;var left=t.left-5;if(left<0)left=0;else if(left+window.pageXOffset+tooltipElem.offsetWidth>w)left=(w-tooltipElem.offsetWidth-5);var top=t.top-tooltipElem.offsetHeight-5;if(top<0){top=t.top+obj.offsetHeight+5;} tooltipElem.style.left=left+'px';tooltipElem.style.top=top+'px';};
domReady(function(){var list=document.querySelectorAll('[tooltip]');var fshow=function(a,b){tooltip(a,b);};for(var i=0;i<list.length;i++) {list[i].addEventListener('mouseover',fshow.bind(null,list[i],list[i].getAttribute('tooltip')),false);}});

var goTop;function scrollFunction(){if(document.body.scrollTop>20||document.documentElement.scrollTop>20) {goTop.style.display="block";} else{goTop.style.display="none";}}
domReady(function(){goTop=document.createElement('div');goTop.className="goTop";goTop.setAttribute('title','Наверх');goTop.addEventListener('click',function(){window.scrollTo(0,0);},false);document.body.appendChild(goTop);window.addEventListener('scroll',scrollFunction,false);scrollFunction();});
</script>
</head>
<body>
<h1 style="text-align:center">Демо</h1>
<table><tr>
<td style="text-align:left">
  <button tooltip="Используется атрибут <b>tooltip</b>">Кнопка 1</button>
</td>
<td style="text-align:center">
  <button onmouseover="tooltip(this,'Используется атрибут onmouseover = tooltip(this,text)')">Кнопка 2</button>
</td>
<td style="text-align:right">
  <button tooltip="Используется атрибут <b>tooltip</b>">Кнопка 3</button>
</td>
</table>
<p>Прокрутите страницу, чтобы кнопки оказались у верхнего края, а затем проверьте, правильно ли выводятся подсказки.</p>
<img src="images/cat.png" tooltip="Это просто красивый котик" />
</body></html>

Случайное перемешивание массива

function shuffle(arr){
  var j, temp;
  for(var i = arr.length - 1; i > 0; i--){
    j = Math.floor(Math.random()*(i + 1));
    temp = arr[j];
    arr[j] = arr[i];
    arr[i] = temp;
   }
  return arr;
}

ИЛИ

function fisherYates( array ){
 var count = array.length,
 randomnumber, temp;
 while( count ){
   randomnumber = Math.random() * count-- | 0;
   temp = array[count];
   array[count] = array[randomnumber];
   array[randomnumber] = temp
  }
 return array;
}

var a = [1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];
alert(a+'\n'+shuffle(a)+'\n'+fisherYates(a));

А для получения случайного целого числа можно воспользоваться функцией getRandomInt

function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));}
alert(getRandomInt(128));

• • •

Разделить нули тысяч пробелом возможно одной строчкой кода:

var num = '12345678';
var str = num.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1  ');
alert(num+'\n'+str);

*****

Рассмотрим интересный пример

CSS

* { margin: 0; padding: 0;}

body {background: url('fon.jpg') 
   no-repeat center center fixed; 
  background-size: cover;}

#inkwell1 {
    bottom: 150px;
    left: 150px;
    position: fixed;
}
#inkwell2 {
    bottom: 150px;
    left: 150px;
    position: fixed;
    visibility: hidden;
}
#letter {
    font-family: Comic Sans MS;
    font-size: 18px;
    font-weight: bold;
    margin: 20px auto 0 220px;
    position: relative;
    width: 70%;
}
#letter_src {
    display: none;
}

JavaScript

window.onload = function(){
    // Переменные 
    var vLetter = document.getElementById('letter');
    var iSpeedInk = 5;
    
    var sText = document.getElementById('letter_src').innerHTML;
    var iCurChar = 0;
    var sChars = '<span>';
    var iCurInk = 0;
    var sCurCaret = '';
    var sCaret = " <img src='pen.gif' style='position:absolute' />";
    
    var scrol = true;

    var doStep = function () {
        // текущий символ 
        var sChar = sText.charAt(iCurChar);

        // задержка символа по умолчанию
        var iDelay = 32;

        if (sChar == '') {
            sCurCaret = '';
        } else if (sChar == '|') { // мы используем символ | для эмуляции символа «ошибка»
            sChar = '';
            sChars = sChars.substring(0, sChars.length-1);
            iDelay = 64;
        } else if (sChar == '<') { // пропустить теги 
            var iPos = sText.indexOf('>', iCurChar);
            sChar = sText.substring(iCurChar, iPos + 1);
            iCurChar = iPos;
        } else if (sChar == '&') { // пропустить объекты html
            var iPos = sText.indexOf(';', iCurChar);
            sChar = sText.substring(iCurChar, iPos + 1);
            iCurChar = iPos;
        } else if (sChar == '.') { // настраиваемая задержка для символа .
            iDelay = 300;
        } else if (sChar == ',') { // настраиваемая задержка для символа ,
            iDelay = 100;
        } else if (sChar == ' ') { // настраиваемая задержка для символа space
            iDelay = 32;
        } else if (iCurChar > 5) {
            sCurCaret = sCaret;
        }

        // расход чернил 
        if (sChar == ' ') {
            iCurInk += iSpeedInk;
            sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar;
        }

        if (document.getElementById('inkwell2').style.visibility == 'visible') {
            sCurCaret = sCaret;
            document.getElementById('inkwell2').style.visibility = 'hidden';
            sChar = '</span><span style="color:RGB(0,0,0)">' + sChar;
        }

        // обновить чернила 
        if (iCurInk > 150) {
            iCurInk = 0;
            document.getElementById('inkwell2').style.visibility = 'visible';
            iDelay = 1000;
            sCurCaret = '';
        }

        // добавить текущий символ в sChars
        sChars += sChar;

        // скрыть курсор в конце буквы
        if (iCurChar == sText.length - 1)
           { sCurCaret = ''; scrol = false;}

        // обновить letter новыми символами 
        vLetter.innerHTML = sChars + sCurCaret;

        // перейти к следующему символу 
        iCurChar++;

        // следующий шаг
        if (iCurChar < sText.length) {
            setTimeout(doStep, 20 + iDelay);
        }  
    }

    doStep();
    
 var fscroll = function() {  var h = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
window.scrollTo(0, h);
if (scrol) setTimeout(fscroll, 100); }  
fscroll();   
};

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Старое письмо</title>
    <style>
*{margin:0;padding:0}body{background:url('fon.jpg') no-repeat center center fixed;background-size:cover}#inkwell1{bottom:150px;left:150px;position:fixed}#inkwell2{bottom:150px;left:150px;position:fixed;visibility:hidden}#letter{font-family:Comic Sans MS;font-size:18px;font-weight:bold;margin:20px auto 0 220px;position:relative;width:70%}#letter_src{display:none}
</style>
    <script>
window.onload=function(){var n=document.getElementById("letter"),c=document.getElementById("letter_src").innerHTML,b=0,g="<span>",d=0,e="",k=!0,l=function(){var a=c.charAt(b),f=32;if(""==a)e="";else if("|"==a)a="",g=g.substring(0,g.length-1),f=64;else if("<"==a){var h=c.indexOf(">",b);a=c.substring(b,h+1);b=h}else"&"==a?(h=c.indexOf(";",b),a=c.substring(b,h+1),b=h):"."==a?f=300:","==a?f=100:" "==a?f=32:5<b&&(e=" <img src='pen.gif' style='position:absolute' />");" "==a&&(d+=5,a='</span><span style="color:RGB('+
d+","+d+","+d+')">'+a);"visible"==document.getElementById("inkwell2").style.visibility&&(e=" <img src='pen.gif' style='position:absolute' />",document.getElementById("inkwell2").style.visibility="hidden",a='</span><span style="color:RGB(0,0,0)">'+a);150<d&&(d=0,document.getElementById("inkwell2").style.visibility="visible",f=1E3,e="");g+=a;b==c.length-1&&(e="",k=!1);n.innerHTML=g+e;b++;b<c.length&&setTimeout(l,20+f)};l();var m=function(){window.scrollTo(0,Math.max(document.body.scrollHeight,
document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight));k&&setTimeout(m,100)};m()};
</script>
</head>
<body>
    <div id="letter"></div>
    <img id="inkwell1" src="inkwell1.gif" alt="inkwell1" />
    <img id="inkwell2" src="inkwell2.gif" alt="inkwell2" />

    <div id="letter_src">
	Стих||||      Стихи программиста<br><br>
	Жизнь так похожа на ScreenSaver -<br>
	Нажал на жо||кнопку - в пыль мечты,<br>
	Рыдает ржавы|||||старенький MPlayer<br>
	И Hard жужжит за две версты,<br>
	Испуганно модем мигает,<br>
	Ми|ыша забилась в уголок,<br>
	MPlayer старенький рыдает,<br>
	Запала клавиша CapsLock.<br>
	Все плохо - "м|сетка" выго||летает,<br>
	Винда не плач||||глючит - не к добру...<br>
	Мечты мечтами, но светает<br>
	И жизнь похожа на игру!<br>
	<br>
	      *****<br>
	<br>
	Ты с компьютером жыв||ивешь,<br>
	С ним ты ешь и с ним ты пьешь!<br>
	Жизнь твоя — на огор||||мониторе,<br>
	Мысль глубокая во взоре!<br>
	Пусть же па|ишется легко<br>
	На душе всегда светло<br>
	Жизнь под град||||парусом несется,<br>
	Что задумал — удается!<br><br>
	Ава|та|ор: Программист
    </div>
</body>
</html>

Скачать демо

Полезные простые js-скрипты

1. domReady() - Обработчик готовности дерева DOM

2. topoltip() - Всплывающая подсказка

CSS

HTML

JavaScript

3. Простая кнопка Наверх

CSS

JavaScript

Пример

Случайное перемешивание массива

• • •

CSS

JavaScript

HTML

Справочник JavaScript