日期:2014-05-16 浏览次数:20414 次
<html><head><style>html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
#word{position:absolute;color:White;top:25%;left:40%;width:20%;height:50%;z-index:10000}
</style></head><body>
<div id="word"></div>
<canvas id="pinkboard" width="581" height="316"></canvas>
<script type="text/javascript">
function type(txt) {
var text = "123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890";
var textLen = text.length;
var lineNum = 30; //定义每行显示多少个字
var num = 0;
var _ = document.createTextNode('_');
var i = 0;
var me = this;
this.show = function () {
str = text.substr(i, 1);
var txt = document.getElementById('word');
txt.appendChild(document.createTextNode(str));
txt.appendChild(_);
num++;
if (num > 0 && num % lineNum == 0) txt.appendChild(document.createElement('br'));
i++;
if (i < textLen) setTimeout(function () { me.show() }, 300); else txt.removeChild(_);
}
this.show();
}
new type(document.getElementById('word'));
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle du