level 7
查看网页源码
2023年10月05日 02点10分
level 11
<!DOCTYPE html><html>
<head> <meta nane="description" content="imitate anime of polyfill.io"/> <meta name="keywords" content="polyfill.io,imitate,anime"/> <meta charset="UTF-8"/> <title>模拟蓝条动画</title> </head> <body id="bodyDom"> <script> const szWidth = 32; const szHeight = 760;
const mvSpeed = 13;
const fps = 60;
const clrBack = "#FFFFFF"; const clrLine = "#66CCFF";
const countLines = 50;
class PolyLine { constructor(height) { this.height = (height>=0) ? height : Math.floor(Math.random()*szHeight); this.nowHeight = height; this.direction = "up"; } update() { if (this.direction == "up") { this.nowHeight -= mvSpeed; if (this.nowHeight < this.height) { this.nowHeight = this.height; } } else { this.nowHeight += mvSpeed; if (this.nowHeight > szHeight) { this.direction = "up"; } } } draw(context) { context.fillStyle = clrBack; context.fillRect(0, 0, szWidth, szHeight); context.fillStyle = clrLine; context.fillRect(0, 0, szWidth, this.nowHeight); context.strokeStyle = "black"; context.strokeRect(0, 0, szWidth, this.nowHeight); }
move(dir) { this.direction = dir; } }
var bodyDom = document.getElementById("bodyDom"); var polyLines = [];
for (let i=0; i!=countLines; ++i) { polyLines.push(new PolyLine(-1)); bodyDom.innerHTML += "<canvas id='"+i+"' onmouseover='mouseOver(this.id)' onmouseout='mouseOut(this.id)'></canvas>"; let canv = document.getElementById(i); canv.width = szWidth; canv.height = szHeight; canv.style.display = "inline"; }
function mouseOver(id) { polyLines[id].move("down"); }
function mouseOut(id) { polyLines[id].move("up"); }
function frameUpdate() { var dom = document; for (let p in polyLines) { polyLines[p].update(); let context = dom.getElementById(p).getContext("2d"); polyLines[p].draw(context); } }
setInterval(frameUpdate, 1000/fps); </script> </body> </html>
2023年11月15日 06点11分
6
<head> <meta nane="description" content="imitate anime of polyfill.io"/> <meta name="keywords" content="polyfill.io,imitate,anime"/> <meta charset="UTF-8"/> <title>模拟蓝条动画</title> </head> <body id="bodyDom"> <script> const szWidth = 32; const szHeight = 760;
const mvSpeed = 13;
const fps = 60;
const clrBack = "#FFFFFF"; const clrLine = "#66CCFF";
const countLines = 50;
class PolyLine { constructor(height) { this.height = (height>=0) ? height : Math.floor(Math.random()*szHeight); this.nowHeight = height; this.direction = "up"; } update() { if (this.direction == "up") { this.nowHeight -= mvSpeed; if (this.nowHeight < this.height) { this.nowHeight = this.height; } } else { this.nowHeight += mvSpeed; if (this.nowHeight > szHeight) { this.direction = "up"; } } } draw(context) { context.fillStyle = clrBack; context.fillRect(0, 0, szWidth, szHeight); context.fillStyle = clrLine; context.fillRect(0, 0, szWidth, this.nowHeight); context.strokeStyle = "black"; context.strokeRect(0, 0, szWidth, this.nowHeight); }
move(dir) { this.direction = dir; } }
var bodyDom = document.getElementById("bodyDom"); var polyLines = [];
for (let i=0; i!=countLines; ++i) { polyLines.push(new PolyLine(-1)); bodyDom.innerHTML += "<canvas id='"+i+"' onmouseover='mouseOver(this.id)' onmouseout='mouseOut(this.id)'></canvas>"; let canv = document.getElementById(i); canv.width = szWidth; canv.height = szHeight; canv.style.display = "inline"; }
function mouseOver(id) { polyLines[id].move("down"); }
function mouseOut(id) { polyLines[id].move("up"); }
function frameUpdate() { var dom = document; for (let p in polyLines) { polyLines[p].update(); let context = dom.getElementById(p).getContext("2d"); polyLines[p].draw(context); } }
setInterval(frameUpdate, 1000/fps); </script> </body> </html>
![[真棒]](/static/emoticons/u771fu68d2.png)
