当前位置:首页 > 教程 > Web前端 > 黑客不神秘

黑客不神秘

hacker
今天在做考试题目的时候,遇到一个很有趣的编程题目,实现黑客电影中的字符串效果。

对!就是图中这样……当时是直接在提交文本框上写的,也没有调试机会,于是肯定会有很bug,晚上闲来无事,重新实现一下,显示出来的效果还不错~

一段Html,不是太难

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			background: #000;
			color: #fff;
		}
		.rain {
			position: absolute;
			top: 0;
			left: 0;
			font-size: 20px;
			background: lightgreen;
			width: 25px;
			box-shadow: 2px 2px 4px green;
		}
	</style>
</head>
<body>
	<!-- <div class="rain"></div> -->
	<script type="text/javascript">
		function generateChar() {
			var strLen = Math.floor(Math.random()*100);
			var i = 0;
			var choose = 0;
			var resCode = 0;
			var str = '';
			for (i = 0; i < strLen; i++) {
				choose = Math.floor(Math.random()*3);
				switch (choose) {
					case 0:
						resCode = Math.floor(Math.random()*10 + 48);
						break;
					case 1:
						resCode = Math.floor(Math.random()*26 + 65);
						break;
					case 2:
						resCode = Math.floor(Math.random()*26 + 97);
						break;
				}
				str += String.fromCharCode(resCode)+'<br>';
			}
			return str;
		}
 
		function animate(obj) {
			var cWidth = document.documentElement.clientWidth-10;
			var cHeight =  document.documentElement.clientHeight;
			// alert(cHeight);
			var startLeft = Math.floor(Math.random()*cWidth);
			var startTop = 0;
			obj.style.left = startLeft + 'px';
			obj.style.top = startTop + 'px';
			var speed = 10;
 
			obj.timer = setInterval(function(){
				startTop += speed;
				obj.style.top = startTop + 'px';
				if (startTop > cHeight-obj.offsetHeight) {
					clearInterval(obj.timer);
					document.body.removeChild(obj);
				}
			}, 30);
		}
 
		setInterval(function(){
			var obj = document.createElement('div');
			obj.className = 'rain';
			obj.innerHTML = generateChar();
			document.body.appendChild(obj);
			animate(obj);
		}, 50);
 
	</script>
</body>
</html>
  • << Node.js 进阶二之Session处理
  • HTML5和HTML4的不同 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/hacer-a/

    相关文章 近期热评 最新文章

    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程