这是电影中的炫酷屏幕表
实现黑客帝国里面，炫酷字符面，最近学习前段，然后就尝试些，这是主要是用JavaScript写的，创建java web 工程，然后在jsp页面使用即可。在IE6以上版本可以正常，chrome或者Firefox不能正常运行。纯娱乐为主！这是源码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Write By Unicorn</title>
</head>
<style type="text/css">
body
{
overflow:hidden;
margin:0;
background-color:#000000;
font-family:宋体；
}
div .#heike
{
overflow:hidden;
position:relative;
top:25%;
width:100%;
height:100%;
border-style:solid;
border-width:1;
border-color:#009900;
}
</style>
<script language="javascript">
var strCount;
var str;
var Color;
var Font;
var sLine = "W<br>r<br>i<br>t<br>e<br><br>B<br>y<br><br>U<br>n<br>i<br>c<br>o<br>r<br>n<br>";
function OnLoad()
{
strCount = 80;
str =[];
Color = [];
Font = [];
Color = "#002211";
Color = "#003311";
Color = "#005511";
Color = "#008811";
Color = "#00BB11";
Color = "#114411";
Color = "#335566";
Color = "#668899";
Color = "#99BBAA";
Color = "#CECECC";
Font = "20px";
Font = "30px";
Font = "40px";
Font = "50px";
Font = "60px";
setTimeout("strik()",10);
}
function strik()
{
for (var i= 0; i<strCount;i++)
{
if(typeof(str) != "undefined")
{
if(str["Carch"].style.pixelTop > heike.offsetWidth)
{
str["Carch"].outerHTML ="";
delete str["Level"];
delete str["Speed"];
delete str["Carch"];
delete str;
}
else
{
str["Carch"].style.pixelTop +=str["Speed"];
}
}
else if(Math.random()<0.8)
{
str = new Array();
str["Level"] = Math.round(Math.random()*4);
str["Speed"] = (Math.round(Math.random()*str["Level"])<<2)+30;
document.all["heike"].insertAdjacentHTML("AfterBegin","<span id='SPAN_"+i+"'>"+sLine+"</span>");
str["Carch"] = document.all["SPAN_"+i];
str["Carch"].style.fontSize = Font["Level"]];
str["Carch"].style.position ="absolute";
str["Carch"].style.pixelLeft = Math.round(Math.random()*heike.clientWidth);
str["Carch"].style.pixelTop = -str["Carch"].offsetHeight;
str["Carch"].style.color = Color["Level"]+5];
str["Carch"].style.filter = "glow(Color="+Color["Level"]]+",Strength=5)";
str["Carch"].style.zIndex = str["Level"];
}
}
setTimeout("strik()",10);
}
</script>
<body>
<table width ="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" height="100%"><div id="heike"></div></td></tr>
</table>
</body>
</html>
本帖最后由 丨皮卡丘丶 于 2016-10-10 13:46 编辑
马杏争1994 发表于 2016-10-10 12:27
乌黑一片,没效果,IE9
看看这个双击就能打开
最后一行
setInterval(draw, 33); 数字越小频率越快
text = String.fromCharCode(/*3e4*/ 65 + Math.random() * 133);
65改变可以让字符不一样你随意
点击预览
马杏争1994 发表于 2016-10-10 12:27
乌黑一片,没效果,IE9
你是怎么去实验的？可以直接复制到txt中然后保存为后缀.html ,用IE打开即可，我的是IE10.但IE6的我测试都可以。 太酷了，不错 太酷了，不错 厉害了，不错 炫酷炫酷{:1_915:} 这个不错，谢谢分享 纯javascript 确实牛B 炫酷！！！ 就一个html 何必非要争个jsp呢