coord.style.top = event.clientY + 'px';
coord.style.left = event.clientX + 'px';
let coordX = event.clientX - 360;
let coordYStart = event.clientY - 380;
let coordY = String(coordYStart).slice(1) * 12.5;
if(coordX < 0) coordX = 0;
if(coordY < 0) coordY = 0;
coord.innerHTML = 'x: ' + coordX + 'y: ' + coordY;
var a = new Date().getHours() + new Date().getTimezoneOffset() / 60; // 0 часовой пояс
var b = a + 3; // 3 изменить на нужный часовой пояс
new Date(new Date().setHours(b));
<script>
const obj = {
count: 3,
toString() {
return `<ul><li>TEXT</li></ul>`;
}
}
localStorage.clear();
localStorage.setItem('obj', obj);
for (let i = 0; i < obj.count; i++) {
let div = document.createElement('div');
div.className = 'cla_ss';
div.innerHTML = localStorage.getItem('obj');
document.body.append(div);
}
</script>
<body>
<section id="successMessage">
<div class="popup">
<h2>Успешно!</h2>
</div>
</section>
<script type="text/javascript" charset="utf-8">
setTimeout(() => successMessage.hidden = true, 2000)
</script>
</body>
<div id="clock">
<span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>
function update() {
var clock = document.getElementById('clock');
var date = new Date(); // (*)
var hours = date.getHours();
if (hours < 10) hours = '0' + hours;
clock.children[0].innerHTML = hours;
var minutes = date.getMinutes();
if (minutes < 10) minutes = '0' + minutes;
clock.children[1].innerHTML = minutes;
var seconds = date.getSeconds();
if (seconds < 10) seconds = '0' + seconds;
clock.children[2].innerHTML = seconds;
}
<body>
<form>
<select name="select">
<option value="0">вкладка 1</option>
<option value="2">вкладка 2</option>
<option value="3">вкладка 3</option>
<option value="4">вкладка 4</option>
<option value="5">вкладка 5</option>
</select>
</form>
<div id="tabs">
<div class="active tab">активная вкладка 1</div>
<div class="tab">вкладка 2</div>
<div class="tab">вкладка 3</div>
<div class="tab">вкладка 4</div>
<div class="tab">вкладка 5</div>
</div>
<script>
const select = document.querySelector('select');
select.onchange = () => {
tabs.querySelector('.active').classList.remove('active');
tabs.querySelectorAll('.tab')[select.options.selectedIndex].classList.add('active');
}
</script>
</body>
<input type="button" onclick="hide()" value="Hide" />
function hide() {
for (let key of document.querySelectorAll('.name')) {
key.hidden = true;
}
}
key.hidden = !key.hidden;
window.onscroll = function() {
let scrolled = window.pageYOffset || document.documentElement.scrollTop;
(scrolled >= 100) ? document.querySelector('.header').classList.add('head-scroll') :
document.querySelector('.header').classList.remove('head-scroll');
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
* {
padding: 0;
margin: 0;
}
.bigImage img {
width: 400px;
}
.smallImages img {
width: 100px;
padding: 0 1px;
}
</style>
</head>
<body>
<div class="bigImage">
<img src="" alt="" />
</div>
<div class="smallImages">
<img src="http://imagine.pics/images/753/75359.jpg" alt="" />
<img src="http://wallpage.ru/imgbig/wallpapers_5087.jpg" alt="" />
<img src="http://carster.info/images/car_catalog/bmw/2013-bmw-m3-convertible_4.jpg" alt="" />
<img src="http://widefon.com/_ld/169/81658594.jpg" alt="" />
</div>
<script>
let bigImage = document.querySelector('.bigImage img');
bigImage.setAttribute('src',
document.querySelectorAll('.smallImages img')[0].getAttribute('src'));
document.querySelectorAll('.smallImages')[0].onclick = function(event) {
let link = event.target.getAttribute('src');
bigImage.setAttribute('src', link);
}
</script>
</body>
</html>
<button id="saveButton"></button>
saveButton.onclick = () => {
saveButton.hidden = true;
for (i = 0; i < 9999; i++) {
console.log(i);
}
}
saveButton.onclick = () => {
saveButton.hidden = true;
setTimeout(function() {
for (i = 0; i < 9999; i++) {
console.log(i);
}
}, 100)
}