JavaScript 拖动条改变打字速度，真不错

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>拖动条改变打字速度，真不错</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;
}
#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. 22<sup>TH</sup><span id=heart>（天气：晴空万里）</span></div>
		<div id=sep></div>
		<h3>关于手册网</h3>
		<p>为编程朋友奉献精品源码、书籍教程、JavaScript/CSS特效代码及常用软件下载等。</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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript 拖动条改变打字速度，真不错

分类

表单按钮

描述

纯JavaScript实现的打字效果，单就“打字”就已经挺吸引人了，而且它还有个更个性的功能，用拖动条可以调整打字的速度，还能够自动滚屏，单击即可调节，学习JS挺有用处。