<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<center />
<h1>Загрузка веб-страницы в контейнер DIV</h1>
<div id='info'>Это предложение будет заменено</div>
<script>
params = "url=oreilly.com"
request = new ajaxRequest()
request.open("POST", "urlpost.php", true)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
request.setRequestHeader("Connection", "close")
request.onreadystatechange = function()
{
if (this.readyState == 4)
{
if (this.status == 200)
{
if (this.responseText != null)
{
document.getElementById('info').innerHTML = this.responseText
}
else alert("Ошибка Ajax: Данные не получены")
}
else alert( "Ошибка Ajax: " + this.statusText)
}
}
request.send(params)
function ajaxRequest()
{
var request = new XMLHttpRequest()
return request
}
</script>
</body>
</html>'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var TextScramble = function () {
function TextScramble(el) {
_classCallCheck(this, TextScramble);
this.el = el;
this.chars = '1234567890';
this.update = this.update.bind(this);
}
_createClass(TextScramble, [{
key: 'setText',
value: function setText(newText) {
var _this = this;
var oldText = this.el.innerText;
var length = Math.max(oldText.length, newText.length);
var promise = new Promise(function (resolve) {
return _this.resolve = resolve;
});
this.queue = [];
for (var i = 0; i < length; i++) {
var from = oldText[i] || '';
var to = newText[i] || '';
var start = Math.floor(Math.random() * 50);
var end = start + Math.floor(Math.random() * 50);
this.queue.push({ from: from, to: to, start: start, end: end });
}
cancelAnimationFrame(this.frameRequest);
this.frame = 0;
this.update();
return promise;
}
}, {
key: 'update',
value: function update() {
var output = '';
var complete = 0;
for (var i = 0, n = this.queue.length; i < n; i++) {
var _queue$i = this.queue[i];
var from = _queue$i.from;
var to = _queue$i.to;
var start = _queue$i.start;
var end = _queue$i.end;
var char = _queue$i.char;
if (this.frame >= end) {
complete++;
output += to;
} else if (this.frame >= start) {
if (!char || Math.random() < 5) {
char = this.randomChar();
this.queue[i].char = char;
}
output += '<span class="dud">' + char + '</span>';
} else {
output += from;
}
}
this.el.innerHTML = output;
if (complete === this.queue.length) {
this.resolve();
} else {
this.frameRequest = requestAnimationFrame(this.update);
this.frame++;
}
}
}, {
key: 'randomChar',
value: function randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
}]);
return TextScramble;
}();
var phrases = ['Сначала появляется этот', 'Потом этот', 'Все с эффектами', 'И очень круто'];
var el = document.querySelector('.text');
var fx = new TextScramble(el);
var counter = 0;
var next = function next() {
fx.setText(phrases[counter]).then(function () {
setTimeout(next, 2000);
});
counter = (counter + 1) % phrases.length;
};
next();<div class="wrapper">
<div class="youtube">youtube</div>
<div class="vkontakte">vkontakte</div>
<a href="#" class="youtube" >youtube</a>
<a href="#" class="vkontakte">vkontakte</a>
</div><style>
div.youtube,
div.vkontakte {
display: none;
border: 1px #f00 dashed;
padding:10px;
}
</style>var div = document.querySelectorAll('div');
div[0].addEventListener('click', function(e){
if(e.target.tagName == 'A') {
if(e.target.className == 'youtube') {
[].forEach.call(div, function(div) {
if(div.className == 'youtube') {
div.style.display = 'block';
} else {
div.style.display = '';
}
})
}
if(e.target.className == 'vkontakte') {
[].forEach.call(div, function(div) {
if(div.className == 'vkontakte') {
div.style.display = 'block';
} else {
div.style.display = '';
}
})
}
}
})var wrapper = document.querySelector('.wrapper');
var vk = document.querySelector('div.vkontakte');
var y = document.querySelector('div.youtube');
wrapper.addEventListener('click', function(e){
if(e.target.tagName == 'A') {
var key = e.target.className;
switch (key) {
case 'youtube':
y.style.display = 'block';
vk.style.display = '';
break;
case 'vkontakte':
y.style.display = '';
vk.style.display = 'block';
}
}
})var template = '';
data.forEach(function(item, i, arr) {
template = template + "<div class='review_post'>"+
"<div class='review_post_header'>"+
"<span class='review_name'>"+
arr[i].name+
"</span>"+
"<span class='review_date'>"+
arr[i][msg_date]+
"</span>"+
"</div>"+
"<div class='review_post_message'>"+
arr[i].message+
"</div>"+
"</div>";
});