Sam piszacy sie tekst



Dosłownie jak w tytule sam piszący się tekst. Oto kilka małych kodów z neta które to umożliwiają.
kod nr. 1

<div id="screens"></div>
<script type=text/javascript>
var index = 0;
var text = 'Hello world! bhh nnjkghj jk ';
var textLength = text.length;
var elScreen = document.getElementById('screens');
(function type() {
var charToType = text.charAt(index);
if (charToType === ' ') {
charToType = '<br />';
}
elScreen.innerHTML += charToType;
index += 1;
if (index < textLength) {
setTimeout(type, 200);
}
})();
</script>
kod nr. 2
<span id="one"></span>    <span id="endingEl"></span>
<script type=text/javascript>
var el = document.getElementById('endingEl'), str = 'Abcdefg...', i = 0;
function type(){
el.insertAdjacentHTML("beforebegin", str.charAt(i));
i++;
if(i < str.length){var t = setTimeout(type, 100);}
};
type();

</script>
kod nr. 3
<div id=target></div>
<script type=text/javascript>
var text="Twał";
var delay=100;
var dupa=0;
var len=text.length;
function pisaj() {
document.getElementById('target').innerHTML+=text.charAt(dupa++);
if(dupa < len)
setTimeout(pisaj,delay);
}
pisaj();
</script>
kod nr. 4
<div id="screen"></div>
<script type=text/javascript>
var index = 0;
var text = 'Hello strange world<br />of StackOverflow!';
var textLength = text.length;
var elScreen = document.getElementById('screen');
(function type() {
var charToType = text.charAt(index);
if (charToType === '<') {
charToType = '<br />';
index += '<br />'.length - 1;
}
elScreen.innerHTML += charToType;
index += 1;
if (index < textLength) {
setTimeout(type, 200);
}
})();
</script>
kod nr. 5
 <script type=text/javascript>
var s = 'This is a demo on how to build a marquee.',
i = 0;
setTimeout(function () {
document.body.innerHTML += s[i++];
i < s.length && setTimeout(arguments.callee, 100);
}, 100);
</script>
kod nr. 6
<div>A <i>marquee</i> which handles <u><b>HTML</b></u>,<br/> only tested with Chrome. <a href="#">Replay</a></div>

<script type=text/javascript>
jQuery(function init($) {
var items = findTextNodes($('div').get(0));

(function (item) {
if (item = items.shift()) {
write(item.node, item.text, arguments.callee);
}
})();

$('a').one('click', function (e) {
e.preventDefault();
init($);
});
});

function findTextNodes(node) {
var result = [],
i = 0,
child;
while (child = node.childNodes[i++]) {
if (child.nodeType === 3) {
result.push({
node: child,
text: child.nodeValue
});
child.nodeValue = '';
} else {
result = result.concat(
findTextNodes(child)
);
}
}
return result;
}

function write(node, text, fn) {
var i = 0;
setTimeout(function () {
node.nodeValue += text[i++];
if (i < text.length) {
setTimeout(arguments.callee, 10);
} else {
fn();
}
}, 10);
}
</script>
kod nr. 7 (migający kursor)
<span></span><span>_</span>
<script type=text/javascript>
// marquee with a blinking underscore

var s = 'This is a demo on how to build a marquee.',
spans = document.getElementsByTagName('span'),
text = spans[0],
dash = spans[1],
i = 0,
id;

id = setInterval(function () {
text.innerText += s[i];
if (++i === s.length) {
clearInterval(id);
dash.style.visibility = 'hidden';
setInterval(function () {
dash.style.visibility = (
dash.style.visibility === 'visible' ? 'hidden' : 'visible'
);
}, 700);
}
}, 50);
</script>
kod nr. 8
<script type='text/javascript'>
var index = 0;
var text = 'to jest test to jest test to jest test to jest test to jest test ';
// Here you can put in the text you want to make it type.
function type()
{
document.getElementById('screen').innerHTML += text.charAt(index);
index += 1;
var t = setTimeout('type()',100);
// The time taken for each character here is 100ms. You can change it if you want.
}
</script>

<body onload='type()'>
</body>




tekst auto JavaScript




Napisz komentarz


Wprowadź kod obrazka
Capcha