html文本框追加内容,html文本框

window.onload = function() {

var oA = document.getElementById('box');

var oB = document.getElementById('tijiao');

var oC = document.getElementById('ul1');

oB.onclick = function() {

var oLi = document.createElement('li'); //createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念！

oLi.innerHTML = oA.value;

var aLi = document.getElementsByTagName('li');

if (aLi.length > 0) {

oC.insertBefore(oLi, aLi[0]); //iE不兼容，因为找不到aLi[0],所以不知道往谁前面加

} else {

oC.appendChild(oLi);

}

//运动

var iHeight = oLi.offsetHeight - 2;

oLi.style.height = '0';

startMove(oLi, {

height: iHeight

}, function() {

startMove(oLi, {

opacity: 100

})

})

}

}

function getStyle(obj, name) {

if (obj.currentStyle) {

return obj.currentStyle[name];

} else {

return getComputedStyle(obj, false)[name];

}

}

//startMove(oDiv, {width: 400, height: 400})

function startMove(obj, json, fnEnd) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

var bStop = true; //假设：所有值都已经到了

for (var attr in json) {

var cur = 0;

if (attr == 'opacity') {

cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);

} else {

cur = parseInt(getStyle(obj, attr));

}

var speed = (json[attr] - cur) / 2;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (cur != json[attr]) {

bStop = false;

}

if (attr == 'opacity') {

obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';

obj.style.opacity = (cur + speed) / 100;

} else {

obj.style[attr] = cur + speed + 'px';

}

}

if (bStop) {

clearInterval(obj.timer);

if (fnEnd) {

fnEnd();

}

}

}, 30);

}