很酷的日志自动逐行显示js代码-滑动条调节打字速度

日志的自动逐行显示,蓝色理想论坛里的挺酷的一段代码,运行即可见效果

<html>
<head>
<title>blog</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
body{
	border:0px;
	margin:0px;
	overflow:hidden;
	background-color:transparent;
	font-family:宋体;
}
*{
	color:#999;
}
#con{
	float:left;
	width:620px;
	height:400px;
	overflow-y:auto;
	background-color:#000;
	filter:alpha(opacity=80);
	opacity:0.8;
}
#opt{
	float:left;
	width:230px;
	height:150px;
	background-color:#333;
	filter:alpha(opacity=80);
	opacity:0.8;
	text-align:center;
}
fieldset{
	margin:10px;
	border:1px solid #999;
	padding:0px 10px 10px;
	text-align:left;
}
legend{
	font-size:12px;
	*margin-left:-7px;
	color:#999;
}
label{
	font-size:12px;
	color:#999;
}
#spdbdr{
	float:left;
	clear:left;
	width:185px;
	height:15px;
	overflow:hidden;
	border:1px solid #999;
}
#hand{
	width:50%;
	height:15px;
	overflow:hidden;
	background-color:#666;
}
#comment{
	float:left;
	width:230px;
	height:250px;
	background-color:#555;
	filter:alpha(opacity=80);
	opacity:0.8;
}
#fd2{
	padding-bottom:5px;
	*padding-bottom:10px;
}
#probdr{
	float:left;
	clear:both;
	width:185px;
	height:15px;
	overflow:hidden;
	border:1px solid #999;
}
#pro{
	width:0px;
	height:15px;
	overflow:hidden;
	background-color:#666;
}
h5{
	margin:0px;
	margin-left:10px;
	margin-top:10px;
}
</style>
<style>
#ar{
	margin:40px;
	text-align:center;
}
#date{
	font-size:14px;
	font-weight:bold;
	text-align:left;
}
#sep{
	width:100%;
	height:1px;
	overflow:hidden;
	background-color:#999;
}
#heart{
	margin-left:20px;
	font-weight:normal;
	font-size:12px;
	text-align:left;
}
h3{
	font-size:14px;
	text-align:center;
	margin:20px auto;
}
p{
	margin:10px auto 0px;
	font-size:14px;
	line-height:1.5em;
	text-indent:2em;
	text-align:left;
}
</style>
</head>
<body>
<script>
function id(obj){
	return document.getElementById(obj);
}
var speed;
window.onload=function(){
	speed=parseInt(		(1-id("hand").offsetWidth/id("spdbdr").offsetWidth)		*300		);
	id("spdbdr").onmousedown=function(e){
		if(!e) e=e||window.event;
		var x=(e.pageX)?e.pageX:e.clientX;
		id("hand").style.width=x-642;
	speed=parseInt(		(1-id("hand").offsetWidth/id("spdbdr").offsetWidth)		*300		);
	}
	art=id("ar").innerHTML;
	id("ar").innerHTML=b;
	show();
}
var art;
var b="<b>|</b>";
var i=0;
var p;
var mm="";
function show(){
	if(i<art.length){
		w=art.substr(i,1);
		mm+=(w=="<")?m=art.substr(i,art.substr(i).indexOf(">")+1):w;
		p=(w=="<")?art.substr(i).indexOf(">")+1:1;
		id("ar").innerHTML=mm+b;
		id("pro").style.width=(i*100/art.length)+"%";//进度条
		if(id("autoscroll").checked){
			id("con").scrollTop=id("con").scrollHeight-id("con").clientHeight;
		}
		i+=p;
		window.setTimeout("show();",speed);
	}else{
		id("ar").innerHTML=art;
	}
}
</script>
<div id=con>
	<div id=ar>
		<div id=date>Aug. 15<sup>th</sup><span id=heart>(心情:挺不错的)</span></div>
		<div id=sep></div>
		<h3>韩寒说刘翔</h3>
		<p>今天我早起看奥运会的田径比赛,很遗憾的是刘翔因伤退出了比赛。可以想象的是,无论主流媒体把这事粉饰的多么和谐,把国人描绘得多么善解人意,但其实会出现很多的说辞和责骂侮辱,对于刘翔也将面临一个很大的困难,这下不是几个栏在你眼前,是好几亿个栏。对于很多人来说,刘翔应该坚持跑完第二枪,这样才不算临阵脱逃,当然,这是我们多年讲究和赞美“带病坚持上课”是有关的。很多人的意思是,这么多人在看,就算骨折了也要爬到终点,并自作聪明把这种其实是取悦观众表演认为是体育精神。甚至有某些一直接受假大空教育的体育评论员还认为刘翔应该走完110米。那是因为你是看客,你觉得这样效果好,但不不能体会一个运动员的心情。还有人会觉得刘翔如果有伤,那么应该提早退赛告之大家。当然,这么想的都是刚买高价票的。</p>
<p>其实我个人,我也希望我的读者给予一个运动员真正的理解。就是受伤退出了某场比赛,没有能够获得金牌,那对于一个运动员来说是再正常不过的事情。但是这场比赛对我们来说意义重大,大家都知道,我们说,奥运是不政治的,但其实我们的奥运是最政治的,我们说,体育是全民的,但我们的体育是最不全民的。体育,尤其是奥运金牌对我们来说是政治任务,对于很多运动员来说也是一生命运所系,所以我们的举重如此出色。所以,在中国人民的好朋友艾蒙斯打了一个4点4环的时候,我虽然为他觉得非常的遗憾,但我还是高兴中国人拿到冠军的。这种高兴不是什么民族自豪,是为这个中国运动员的个人而感到高兴。除了个别一些国家,人家很多发达国家的老外拿不到就拿不到了,回去后生活没有什么大的影响,但在我们国家就不一样,这就可以完全改变一个运动员甚至一个团体或者一个体育项目的命运。因为体育是我们展示强国形象的一个手段。大家都希望自己国家的运动员能够拿金牌,但我们很多时候只能感受到体育的政治任务感,体育的民族自豪感,体育的象征意义,但是还很少在感受到体育的乐趣。</p>
<p>因为如此,我才特别希望我们的运动员能拿金牌,因为他们都太不容易了。最好全世界所有的金牌都归我们拿,因为金牌对于运动员的意义比其他国家要重大很多。当然,射箭的金牌还是要给韩国几枚的,要不然他们会认为这些中国运动员都是韩国人。</p>
<p>刘翔依然是我最欣赏的运动员之一,在电视里看到刘翔伤退,我根本没想这对于国家荣誉怎么怎么样了,但是很为他本人感到遗憾。我希望他早日康复。对于一个运动员,尤其竞技体育的运动员,一点小伤就完全可以改变一场比赛。我的右腿膝盖和脚也一直有伤,在赛车的时候完全没有影响,依然可以做出最快的时间,但是昨天我去踢了一场球,脚就真的不行了,所以我特别能理解那些有伤痛的运动员。</p>
<p>至于一些对于刘翔广告做太多的指责也是没有意义的,这些广告体育总局抽水不少,而且也花不了什么时间。在任何国家,这样的一位杰出运动员做的广告都不会比这个少。当然,我们肯定希望看到一个运动员可以不做任何广告,一直训练,我们管这个叫“专心训练”,日子也很清贫,但是不断拿冠军,我们管这种冠军叫“为国家争得荣誉”,等到退役以后也没什么钱,大家也把他们都忘了,几年后突然冒出一个新闻,说某某奥运冠军去给人搓澡了,大家也就唏嘘感叹几声世道。</p>
<p>其实,世道是由唏嘘感叹的人构建起来的。我希望刘翔可以再次拿到世界大赛的冠军,而弥补这一次失利的最好办法也是再次打破世界记录。当然,打不破也不妨碍他是中国最伟大的田径运动员。他赢得了所以这个项目的荣誉,当然,说得难听点,是叫为国家赢得了这个项目所有的荣誉,很可惜的是他不知道能不能赢得国民的理解。</p>
	</div>
</div>
<div id=opt>
	<fieldset>
		<legend>控制台</legend>
		<input id=autoscroll type=checkbox checked><label for=autoscroll>自动滚屏</label>
		<label style="float:left;margin-top:5px;">动画速度(单击调节)</label>
		<div id=spdbdr><div id=hand></div></div>
	</fieldset>
	<fieldset id=fd2>
		<legend>进度</legend>
		<div id=probdr><div id=pro></div></div>
	</fieldset>
</div>
<div id=comment>
	<h5>日志评论</h5>
</div>
</html>
点赞 (7)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code