Thông tin
Quiz

Code tin và tài liệu môn Tin học | Trường đại học Kinh Doanh và Công Nghệ Hà Nội

(func琀椀on(){var b=0;var ["ms","moz","webkit","o"];for(vara=0;a<c.length&&!
window.requestAnima琀椀onFrame;++a){window.requestAnima琀椀onFrame=window[c[a] +"RequestAnima琀 onFrame"];window.cancelAnima琀椀onFrame=window[c[a]
+"CancelAnima琀椀onFrame"]||window[c[a]+"CancelRequestAnima琀椀onFrame"]}if(! window.requestAnima琀椀onFrame {window.requestAnima琀椀onFrame=func琀椀on(h,e){var d=new
Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(func琀椀on() Tài liệu giúp bạn tham khảo, ôn tập và đạt kết quả cao. Mời đọc đón xem!

Môn:

Tin học 53 tài liệu

Trường:

Đại học Kinh Doanh và Công Nghệ Hà Nội 1.2 K tài liệu

Thông tin:

7 trang 5 tháng trước

Tác giả:

Lan Anh Trần

docx.com.vn

Bình luận

Vui lòng đăng nhập hoặc đăng ký để gửi bình luận.

Code tin và tài liệu môn Tin học | Trường đại học Kinh Doanh và Công Nghệ Hà Nội

59 30 lượt tải Tải xuống

lOMoARcPSD| 48641284

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi 琀椀 onal//EN">

< HTML >

<HEAD>

<TITLE> Heart </TITLE>

height: 100%;

padding: 0; margin: 0;

background: #000;

display: 昀氀 ex; jus

琀椀 fy-content:

center;

align-items: center;

}

.box { width:

100%; posi 琀椀

on: absolute; top:

50%; le 昀琀:

50%;

transform: translate(-50%, -50%);

display: 昀氀 ex;

昀氀 ex-direc 琀椀 on: column;

}

canvas { posi 琀椀

on: absolute;

width: 100%;

height: 100%;

}

#pinkboard { posi

琀椀 on: rela 琀椀

ve; margin: auto;

height: 500px;

width: 500px;

anima 琀椀 on: animate 1.3s in 昀椀 nite;

}

#pinkboard:before, #pinkboard:a 昀

琀 er { content: ''; posi 琀椀 on:

absolute; background: #FF5CA4;

width: 100px; height: 160px;

border-top-le 昀琀-radius: 50px;

border-top-right-radius: 50px;

}

lOMoARcPSD| 48641284

#pinkboard:before { le

昀琀: 100px;

transform: rotate(-

45deg); transform-

origin: 0 100%;

box-shadow: 0 14px 28px rgba(0,0,0,0.25),

0 10px 10px rgba(0,0,0,0.22);

}

#pinkboard:a 昀琀 er {

le 昀琀: 0;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

@keyframes animate {

0% {

transform: scale(1);

}

30% {

transform: scale(.8);

}

60% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

</style>

</HEAD>

<BODY>

</div>

* Se 琀 ngs */ var se 琀 ngs = {

par 琀椀 cles: {

length: 2000, // maximum amount of par 琀

椀 cles dura 琀椀 on: 2, // par 琀椀 cle dura

琀椀 on in sec velocity: 100, // par 琀椀 cle

velocity in pixels/sec e 昀昀 ect: -1.3, // play

with this for a nice e 昀昀 ect size: 13, // par

琀椀 cle size in pixels

} ;

lOMoARcPSD| 48641284

* RequestAnima 琀椀 onFrame poly 昀椀

ll by Erik Möller

(func 琀椀 on(){var b=0;var c=["ms","moz","webkit","o"];for( var a=0;a<c.length&& !

window.requestAnima 琀椀 onFrame;++a){window.requestAnima 琀椀 onFrame=

window[c[a ] +"RequestAnima 琀椀 onFrame"];window.cancelAnima 琀椀

onFrame=window[c[a] +"CancelAnima 琀椀

onFrame"]||window[c[a]+"CancelRequestAnima 琀椀 onFrame"]}if(! window.requestAnima

琀椀 onFrame){window.requestAnima 琀椀 onFrame=func 琀椀 on(h,e){var d=new

Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(func 琀椀 on()

{h(d+f)},f);b=d+f;return g}}if(!window.cancelAnima 琀椀 onFrame)

{ window.cancelAnima 琀椀 onFrame=func 琀椀 on(d){clearTimeout(d)}}}());

* Point class */ var Point = (func 琀椀

on() { func 琀椀 on Point(x, y) {

this.x = (typeof x !== 'unde 昀椀 ned') ?

x : 0;

this.y = (typeof y !== 'unde 昀椀 ned') ? y : 0;

}

Point.prototype.clone = func 琀椀 on() {

return new Point(this.x, this.y);

};

Point.prototype.length = func 琀椀 on(length) {

if (typeof length == 'unde 昀椀 ned') return

Math.sqrt(this.x * this.x + this.y * this.y) ;

this.normalize(); this.x *= length; this.y *=

length;

return this;

};

Point.prototype.normalize = func 琀椀

on() { var length = this.length();

this.x /= length; this.y /= length;

return this;

};

return Point;

})() ;

* Par 琀椀 cle class */ var Par

琀椀 cle = (func 琀椀 on() {

func 琀椀 on Par 琀椀 cle() {

this.posi 琀椀 on = new Point();

this.velocity = new Point();

this.accelera 琀椀 on = new

Point();

this.age = 0;

}

Par 琀椀 cle.prototype.ini 琀椀 alize = func 琀椀 on(x, y, dx, dy) {

this.posi 琀椀 on.x = x; this.posi 琀椀 on.y = y;

this.velocity.x = dx; this.velocity.y = dy;

this.accelera 琀椀 on.x = dx * se 琀 ngs.par 琀椀

lOMoARcPSD| 48641284

cles.e 昀昀 ect; this.accelera 琀椀 on.y = dy * se

琀 ngs.par 琀椀 cles.e 昀昀 ect;

this.age = 0;

};

Par 琀椀 cle.prototype.update = func 琀椀

on(deltaTime) { this.posi 琀椀 on.x += this.velocity.x *

deltaTime; this.posi 琀椀 on.y += this.velocity.y *

deltaTime; this.velocity.x += this.accelera 琀椀 on.x *

deltaTime; this.velocity.y += this.accelera 琀椀 on.y *

deltaTime; this.age += deltaTime;

};

Par 琀椀 cle.prototype.draw = func 琀椀 on(context, image) {

func 琀椀 on ease(t) {

return (--t) * t * t + 1;

}

var size = image.width * ease(this.age / se 琀 ngs.par 琀椀 cles.dura 琀椀 on);

context.globalAlpha = 1 - this.age / se 琀 ngs.par 琀椀 cles.dura 琀椀 on;

context.drawImage(image, this.posi 琀椀 on.x - size / 2, this.posi 琀椀 on.y - size / 2, size,

size);

};

return Par 琀椀 cle;

})() ;

* Par 琀椀 clePool class

var Par 琀椀 clePool = (func 琀椀 on() {

var par 琀椀 cles,

昀椀 rstAc 琀椀 ve = 0,

昀椀 rstFree = 0,

dura 琀椀 on = se 琀 ngs.par 琀椀 cles.dura 琀椀 on;

func 琀椀 on Par 琀椀

clePool(length) { // create and

populate par 琀椀 cle pool par 琀椀

cles = new Array(length); for (var i =

0; i < par 琀椀 cles.length; i++)

par 琀椀 cles[i] = new Par 琀椀 cle();

}

Par 琀椀 clePool.prototype.add = func 琀椀 on(x, y, dx, dy) { par 琀椀 cles[昀

椀 rstFree].ini 琀椀 alize(x, y, dx, dy);

// handle circular queue

昀椀 rstFree++; if (昀椀 rstFree == par 琀

椀 cles.length) 昀椀 rstFree = 0; if (昀椀

rstAc 琀椀 ve == 昀椀 rstFree ) 昀椀 rstAc

琀椀 ve++;

if (昀椀 rstAc 琀椀 ve == par 琀椀 cles.length) 昀椀 rstAc 琀椀 ve = 0;

};

lOMoARcPSD| 48641284

Par 琀椀 clePool.prototype.update = func 琀椀

on(deltaTime) { var i;

// update ac 琀椀 ve par 琀椀 cles

if (昀椀 rstAc 琀椀 ve < 昀椀 rstFree)

{ for (i = 昀椀 rstAc 琀椀 ve; i < 昀

椀 rstFree; i++)

par 琀椀 cles[i].update(deltaTime);

}

if (昀椀 rstFree < 昀椀 rstAc 琀椀 ve) {

for (i = 昀椀 rstAc 琀椀 ve; i < par 琀椀

cles.length; i++) par 琀椀

cles[i].update(deltaTime); for (i = 0; i < 昀

椀 rstFree; i++)

par 琀椀 cles[i].update(deltaTime);

}

// remove inac 琀椀 ve par 琀椀 cles

while (par 琀椀 cles[昀椀 rstAc 琀椀 ve].age >= dura 琀椀 on && 昀椀 rstAc 琀椀

ve != 昀椀 rstFree) { 昀椀 rstAc 琀椀 ve++;

if (昀椀 rstAc 琀椀 ve == par 琀椀 cles.length) 昀椀 rstAc 琀椀 ve = 0;

}

};

Par 琀椀 clePool.prototype.draw = func 琀椀 on(context, image) {

// draw ac 琀椀 ve par 琀椀 cles

if (昀椀 rstAc 琀椀 ve < 昀椀 rstFree)

{ for (i = 昀椀 rstAc 琀椀 ve; i < 昀

椀 rstFree; i++) par 琀椀

cles[i].draw(context, image);

}

if (昀椀 rstFree < 昀椀 rstAc 琀椀 ve) {

for (i = 昀椀 rstAc 琀椀 ve; i < par 琀椀

cles.length; i++) par 琀椀

cles[i].draw(context, image); for (i = 0; i <

昀椀 rstFree; i++)

par 琀椀 cles[i].draw(context, image);

}

};

return Par 琀椀 clePool;

})() ;

* Pu 琀 ng it all together

( func 琀椀 on(canvas) {

var context = canvas.getContext('2d'),

par 琀椀 cles = new Par 琀椀 clePool(se 琀 ngs.par 琀椀 cles.length),

lOMoARcPSD| 48641284

par 琀椀 cleRate = se 琀 ngs.par 琀椀 cles.length / se 琀 ngs.par 琀椀 cles.dura 琀椀

on, // par 琀椀 cles/sec 琀椀 me;

// get point on heart with -PI <= t <= PI

func 琀椀 on pointOnHeart(t) {

return new Point(

160 * Math.pow(Math.sin(t), 3),

130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25

);

}

// crea 琀椀 ng the par 琀椀 cle image using a dummy

canvas var image = (func 琀椀 on() {

var canvas = document.createElement('canvas'),

context = canvas.getContext('2d');

canvas.width = se 琀 ngs.par 琀椀

cles.size; canvas.height = se 琀 ngs.par

琀椀 cles.size; // helper func 琀椀 on

to create the path

func 琀椀 on to(t) { var point = pointOnHeart(t); point.x = se 琀

ngs.par 琀椀 cles.size / 2 + point.x * se 琀 ngs.par 琀椀 cles.size / 350;

point.y = se 琀 ngs.par 琀椀 cles.size / 2 - point.y * se 琀 ngs.par 琀椀

cles.size / 350; return point;

}

// create the path

context.beginPath();

var t = -Math.PI; var

point = to(t);

context.moveTo(point.x, point.y);

while (t < Math.PI) { t

+= 0.01; // baby steps!

point = to(t);

context.lineTo(point.x, point.y);

}

context.closePath(); //

create the 昀椀 ll context.昀

椀 llStyle = '#FF5CA4';

context.昀椀 ll();

// create the image var

image = new Image();

image.src =

canvas.toDataURL();

return image;

})();

// render that thing!

func 琀椀 on render() {

// next anima 琀椀 on

frame

requestAnima 琀椀 onFrame(render);

lOMoARcPSD| 48641284

// update 琀椀 me var newTime = new

Date().getTime() / 1500, deltaTime =

newTime - (琀椀 me || newTime); 琀椀 me

= newTime;

// clear canvas

context.clearRect(0, 0, canvas.width, canvas.height);

// create new par 琀椀 cles var

amount = par 琀椀 cleRate * deltaTime;

for (var i = 0; i < amount; i++) {

var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());

var dir = pos.clone().length(se 琀 ngs.par 琀椀 cles.velocity);

par 琀椀 cles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);

}

// update and draw par 琀椀 cles par 琀椀

cles.update(deltaTime);

par 琀椀 cles.draw(context, image);

}

// handle (re-)sizing of the canvas

func 琀椀 on onResize() {

canvas.width = canvas.clientWidth;

canvas.height = canvas.clientHeight;

}

window.onresize = onResize;

// delay rendering bootstrap

setTimeout(func 琀椀 on() {

onResize(); render();

}, 10);

})( document.getElementById('pinkboard'));

</script>

<div class="center-text", style="background-

color:rgb(0, 0, 0);

width: 100%; color:

rgb(225, 12, 168);

height:100%; font-size:

31px; font-style: italic;

display: 昀氀 ex; align-

items: center; jus 琀椀

fy-content: center;

margin-bo 琀琀 om: 5px;

text-align: center;"> real love </div>

</BODY>

< /HTML >

Bấm Tải xuống để xem toàn bộ.

| 1/7

| | Tải xuống

Preview text:

color:rgb(0, 0, 0); width: 100%; color: rgb(225, 12, 168); height:100%; font-size: 31px; font-style: italic; display: 昀氀 ex; align- items: center; jus 琀椀 fy-content: center; margin-bo 琀琀 om: 5px;
text-align: center;"> real love