批处理之家 - Powered by Discuz! Board

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
#pg {
position: absolute;
width: 100%;
height: 100%;
font-size: 0px;
background-color: black;
overflow: hidden;
}
#pg>div {
display: inline-block;
text-align: center;
position: absolute;
width: 1em;
line-height: 1em;
height: 100%;
color: green;
font-size: 15px;
font-weight: bold;
}
a {
color: #eeffee;
font-weight: bold;
}
</style>
</head>
<body>
<div id=pg>
<div></div>
</div>
<audio>
<source src="http://pisa.ucsd.edu/cse125/2001/cse190g1/matrix4.mp3" type="audio/mpeg">
</audio>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('audio')[0].play();
// $('#pg>div').css("height", $('#pg').css("height"));
$('#pg>div').height($('#pg').height());
var wid = $("#pg>div").width();
var sum = Math.ceil($('#pg').width() / wid);
$('#pg').html(new Array(sum + 1).join("<div></div>"));
var t_life = Array(sum + 1).join(0).split('');
var life = [], hei = [], Yg = [], Yc = [], Y_born = [];
$("#pg>div").map(function (index) {
$(this).css("left", (wid * index) + 'px');
});
var hei_page = Math.ceil($("#pg>div").height() / wid);
var full_blank = Array(hei_page + 1).join(' <br>');
window.setInterval('tick();', 30);
function tick() {
$("#pg>div").map(function (i) {
if (+t_life[i] <= 0) {
$(this).html(full_blank);
hei[i] = Math.round(Math.random() * (hei_page - 2) + 2);
Yg[i] = Yc[i] = Y_born[i] = Math.round(Math.random() * (hei_page - hei[i]));
life[i] = Math.round(Math.random() * (hei[i] - 2) + 2);
t_life[i] = hei[i] + life[i];
}
t_life[i]--, life[i]--, hei[i]--;
var t, j;
if (life[i] < 0) {
t = $(this).html();
j = Yc[i] * 5, $(this).html(t.slice(0, j) + ' ' + t.slice(j + 1));
Yc[i]++;
}
if (hei[i] >= 0) {
t = $(this).html();
var drill = '<a>' + (Math.random() < .1 ? ' ' : String.fromCharCode(Math.round(Math.random() * 25 + 'A'.charCodeAt(0)))) + '</a>';
if (Yg[i] == Y_born[i]) {
$(this).html(t.slice(0, Yg[i] * 5) + drill);
} else {
j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1) + '<br>' + drill);
}
Yg[i]++;
} else if (hei[i] == -1) {
t = $(this).html();
j = (Yg[i] - 1) * 5, $(this).html(t.slice(0, j) + t.substr(j + 3, 1));
}
});
}
</script>

复制代码

<!doctype html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Rain [By Yu2n 2015.07.23 R1]</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript"><!--
window.onload=function(){
var min_str_len = 2; //雨丝字符串最小长度
var max_str_len = 20; //雨丝字符串最大长度
var font_size = 16; //雨丝字符大小
//创建展示区
$('body').append('<div id="paper"><div>');
$('#paper').width($(document).width());
$('#paper').height($(document).height());
var paper_height = $('#paper').height();
var paper_width = $('#paper').width();
//在显示区画板上方创建两个画板，三个画板竖直堆放
/*
┌───────────────┐
│ 准备区(隐藏) │ ↓↓
├───────────────┤
│ 移入区(隐藏) │ ↓↓ 循环即成下雨效果
├───────────────┤
│ 展示区(显现) │ ↓↓
└───────────────┘
*/
var verti_line_count = Math.ceil(paper_width / (font_size + 2)); //取得雨丝条数
$('#paper').append(new Array(2 * verti_line_count + 1).join("<span></span>")); //将雨丝填满准备区+移入区
var verti_line_width = Math.ceil(paper_width / verti_line_count); //取得雨丝宽度
$('#paper>span').map(function(index){
var text = generateMixed(parseInt(Math.random() * (max_str_len - min_str_len + 1) + min_str_len)); //设置雨丝文字(随机)
$(this).text(text);
if (index < verti_line_count){
//调整移入区雨丝位置
var top = parseInt(Math.random() * (paper_height - 2 + 1) + 2); //设置雨丝随机高度
$(this).css("top", -paper_height - top + 'px');
$(this).css("left", verti_line_width * index + 'px');
} else {
//调整准备区雨丝位置
var top = $('#paper>span:eq('+ (index - verti_line_count) + ')').css("top").slice(0,-2) * 1;
var left = $('#paper>span:eq('+ (index - verti_line_count) + ')').css("left").slice(0,-2) * 1;
$(this).css("top", -paper_height + top + 'px');
$(this).css("left", left + 'px');
}
//设置雨丝文字字体大小
$(this).css("font-size", font_size);
});
//修改雨丝文字，并着色
var setTxt = function(o){
//如果雨丝没有接触到展示区，则不执行后续动作
if ($(o).css("top").slice(0,-2) * 1 < -paper_height) return false;
//if ($(o).children("font:last").css("top").slice(0,-2) * 1 <= 0) return false;
//格式化文字，清除空格
var text=$(o).text().replace(/\s/igm,''), html='';
//随机文字
text = generateMixed(text.length);
for (var i=0; i<=text.length-1; i++){
if (i==text.length-1) {
//首个文字，设置亮色
html += '<font color="#00FF00">' + text.charAt(i) + '</font><br/>';
} else {
//其他文字，调整颜色深度
var nColor = parseInt('0x11', 16) + Math.ceil(parseInt('0xAA', 16) * (i) /text.length);
var sColor = ('00' + nColor.toString(16)).substr(-2);
html += '<font color="#00' + sColor + '00">' + text.charAt(i) + '</font><br/>';
}
}
$(o).html(html);
}
//雨丝下落
var move = function(o){
//向下移动，每次 20px
var top = ($(o).css("top").slice(0,-2) * 1 + 25) + 'px';
$(o).css("top", top);
//如果雨丝落出展示区，则将其移到准备区，并重置雨丝长度
if ($(o).css("top").slice(0,-2) * 1 > paper_height){
var top = $(o).css("top").slice(0,-2) * 1 - (paper_height * 2);
var text = generateMixed(parseInt(Math.random() * (max_str_len - min_str_len + 1) + min_str_len)); //设置雨丝文字(随机)
$(o).css("top", top);
$(o).text(text);
setTxt(o);
//$(o).css("height", (text.length+2)+'em');
};
};
//重复雨丝下落动作
setInterval(function(){
$('#paper>span').map(function(index){
//if ((new Date()).getMilliseconds() % 2==0) setTxt(this); //降低CPU使用率
move(this);
setTxt(this);
});
}, 50);
}
//生成随机数
function GetRandomNum(Min, Max){
return(parseInt(Math.random() * (Max - Min + 1) + Min));
}
//生成随机字符串
function generateMixed(n) {
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', res = "";
for(var i=0; i<n; i++){res += str.charAt(parseInt(Math.random() *str.length +1) -1);}
return res;
}
--></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#paper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-size: 0px;
overflow: hidden;
background-color: #000000;
}
#paper span {
position: absolute;
display: inline-block;
word-break: break-all;
text-align: center;
width: 1em;
line-height: 1em;
height: 100%;
color: black;
/*background-color: #FFFFFF;*/
border:0px solid Silver;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
</body>
</html>

复制代码

<!DOCTYPE html>
<html><head></head><body><canvas id="q"></canvas></body></html>
<script>
var s = window.screen;
var width = q.width = s.width;
var height = q.height = s.height;
var letters = Array(256).join(1).split('');
var draw = function () {
q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
q.getContext('2d').fillRect(0, 0, width, height);
q.getContext('2d').fillStyle = '#0F0';
letters.map(function (y_pos, index) {
text = String.fromCharCode(/*3e4*/ 65 + Math.random() * 33);
x_pos = index * 10;
q.getContext('2d').fillText(text, x_pos, y_pos);
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
});
};
setInterval(draw, 33);
</script>

复制代码