<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var content;//即将显示的全文内容
var index = 0;//下标
var intervalId;//定时器id
var divElement;//页面div
window.onload = function(){
//提示用户输入信息
divElement = document.getElementById("content");
/*获取要显示的文本*/
content = window.prompt("输入您要显示的文本");
/*设置定时器,保存id以便取消定时器*/
intervalId = window.setInterval(show,100);
}
/*标记位,是否解析到标签,如果是那么标签内容不一个一个字符显示*/
var isHTML;
function show(){
/*如果下标大于了内容长度说明显示完毕,取消定时器*/
if(index > content.length){
window.clearInterval(intervalId);
}
/*判断要显示的字符是否为标签开始*/
/*此处用while循环,防止出现连续多个标签*/
while(content[index] == "<"){
/*把标记位职位true*/
isHTML = true;
/*找到标签的结束下标*/
while(++index<content.length){
if(content[index]==">") {
/*找大了对应的结束下标,那么标记位置为false,同时结束循环*/
index++;
isHTML = false;
break;
}
}
}
/*防止出现 问题,可以删除这个判断*/
if(content[index] == ">"){
index++;
isHTML = false;
}
/*如果标记位是true那么本次不显示新内容*/
if(isHTML){
index++;
return;
}
var ch = content.substring(0,index++);
divElement.innerHTML = ch;
}
</script>
</head>
<body>
<div id="content" align="left" style="margin: 50px;font-size: 20px;">
</div>
</body>
</html>
方块变大(动画效果)
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function load(){
var test=window.setInterval(da,10);
}
function da(){
var div=document.getElementById("div");
var h=div.style.height;
var w=div.style.width;
if(h=="500px" && w=="500px"){
//alert("OK")
window.clearInterval(test);
}
h=parseInt(h);
w=parseInt(w);
h+=1;
w+=1;
div.style.height=h+"px";
div.style.width=w+"px";
}
</script>
</head>
<body "load()">
<div id="div" style="border: 1px solid ; width: 100px;height: 100px;background-color: bisque;">
</div>
</body>
</html>