JavaScript

Пример простого переключения стилей

CSS:

div#themes{
	position: absolute;
	margin: -80px 0 0 20px;
}
div#themes div{
	width: 15px;
	height: 15px;
	margin-bottom: 5px;
	cursor: pointer;
	cursor: hand;
}
div#themes div.dark{
	background: #444;
}
div#themes div.blue{
	background: #0064AD;
}
div#themes div.green{
	background: #4BA155;
}
div#themes div.red{
	background: #CB2F32;
}

JavaScript:

<div id="themes">
		<div onclick="document.getElementById('css3-menu').setAttribute('class', 'dark');" class="dark"></div>
		<div onclick="document.getElementById('css3-menu').setAttribute('class', 'blue');" class="blue"></div>
		<div onclick="document.getElementById('css3-menu').setAttribute('class', 'green');" class="green"></div>
		<div onclick="document.getElementById('css3-menu').setAttribute('class', 'red');" class="red"></div>
</div>
<ul id="css3-menu" class="blue">
...
</ul>

Автокопирайт

<p><script>
copyright=new Date();
update=copyright.getFullYear();
document.write("Copyright © 2011-"+ update + "<br>Владелец<br>Все права защищены");
</script><br>
            <a href="http://site.ru/" rel="external">Web designer & developer</a></p>

Или:

d = new Date();
document.querySelector(".footer").innerHTML = ('Copyright © 2011 - ' + d.getFullYear() + ' Автор');

<div class="footer></div>

или на jQuery:

var $date = function(){
    return new Date().getFullYear();
};
$('.footer').html('Copyright © 2011 - ' + $date() + '<br />' + '<a href="">Автор</a>');

Перевод в транслит

JavaScript:

<script type='text/javascript'>
function send(){
 var res='';
 var text=document.getElementById('text').value;
 var transl={А:'A', а:'a', Б:'B', б:'b', В:'V', в:'v', Г:'G', г:'g',
 Д:'D', д:'d', Е:'E', е:'e', Ё:'Yo', ё:'yo', Ж:'Zh', ж:'zh', З:'Z', з:'z',
 И:'I', и:'i', Й:'J', й:'j', К:'K', к:'k', Л:'L', л:'l', М:'M', м:'m',
 Н:'N', н:'n', О:'O', о:'o', П:'P', п:'p', Р:'R', р:'r', С:'S', с:'s',
 Т:'T', т:'t', У:'U', у:'u', Ф:'F', ф:'f', Х:'X', х:'x', Ц:'Cz', ц:'cz',
 Ч:'Ch', ч:'ch', Ш:'Sh', ш:'sh', Щ:'Shh', щ:'shh', Ъ:'"', ъ:'"', Ы:'Y\'', ы:'y\'',
 Ь:'\'', ь:'\'', Э:'E\'', э:'e\'',  Ю:'Yu', ю:'yu', Я:'Ya', я:'ya', ' ':'_'};
 for(i=0;i<text.length;i++) {
    if(transl]!=undefined) res+=transl];
    else res+=text[i];
 }
 res=res.replace(/Cz(?=i|e|y|j|I|E|Y|J)/g, "C");
 res=res.replace(/cz(?=i|e|y|j|I|E|Y|J)/g, "c");
 document.getElementById('text').value=res;
}
</script>

HTML:

<div align="center">
<textarea id="text" cols="35" rows="8" style="width:600px; height:150px;
    border:1px solid #999999; background:#EEEEEE;"></textarea>
<br>
<input type="button" value="В транслит" onclick="send()">
</div>

С какого устройства зашёл пользователь

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android|BlackBerry|IEMobile)/)) { 
    alert('mobile browser');
}else{
    alert('desktop browser')
}

Page Visibility API

Page Visibility API позволяет нам определить смотрит ли сейчас пользователь на эту вкладку или находится на другой. Зная это, мы можем управлять ajax запросами или, скажем, анимацией.

//проверяем все браузеры
var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
  state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
  hidden = "mozHidden";
  visibilityChange = "mozvisibilitychange";
  state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
  state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
  state = "webkitVisibilityState";
}
//добавляем обработчик события
document.addEventListener(visibilityChange, function(e) {
  //любые действия
}, false);

Различные стили для разных дней недели

<script type="text/javascript">
<!--
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
dayNumber = new Date().getDay();
document.writeln('<link rel="stylesheet" type="text/css" href="' + dayNames[dayNumber] + '.css">');
//-->
</script>
 
<noscript>
<link rel="stylesheet" type="text/css" href="default.css">
</noscript>

Запуск скрипта очень прост. Вставьте JS код в шапку вашей страницы и назовите ваши CSS файлы согласно дням недели: Saturday.css, Friday.css, Sunday.css и т.д.

Audioplayer/Videoplayer

Включить/выключить звук
Vanilla JavaScript:

///Mute
var video = document.getElementById("your-video-id");
video.muted= true;
//Unmute
var video = document.getElementById("your-video-id");
video.muted= false;

Или так:

// Выключить звук
document.getElementById('audioPlayer').muted = true;
// Включить звук
document.getElementById('audioPlayer').muted = false;

Переключение:

if (audio.mute == false) 
{
    document.getElementById('audioPlayer').muted = true;
}
else 
{
    audio.mute = true 
    document.getElementById('audioPlayer').muted = false;
}

Лучше использовать оператор ! (not)

if (!audio.mute)

Задать громкость

myVid=document.getElementById("myPlayer");
myVid.volume=0.2;

Или так:

var audio=document.querySelector("audio");
audio.volume=0.5;

Загрузка изображения с сайта

<div id="imgGroup"></div>
<script>
var img = document.createElement('img');
img.src = "http://site/img";
document.getElementById('imgGroup').appendChild(img)
</script>

Div - ссылка

<div onClick="document.location='some.php'">Див ссылка</div>

или:

<div class="linkblock" onclick="location.href='/';">
        <h1>Заголовок</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>