How to use HTML+CSS+JavaScript to realize online confession artifact

This article mainly introduces how to use HTML+CSS+JavaScript to achieve online confession artifact related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to use HTML+CSS+JavaScript to achieve online confession artifact will have a harvest, let's take a look at it.

HTML source code:

W3Cschool-@font-face {font-family: digit; src: url ('digital-7_mono.ttf') format ("truetype");} / * * 2020-02-19, * 2021-03-09. * / Boy name = Mr Leo Girl name = Mrs Jenny / / Fall in love river. The boy love the girl; / / They love each other. The girl loved the boy; / / AS time goes on. The boy can not be separated the girl; / / At the same time. The girl can not be separated the boy; / / Both wind and snow all over the sky. / / Whether on foot or 5 kilometers. The boy very happy; The girl is also very happy; / / Whether it is right now / / Still in the distant future. The boy has but one dream; / / The boy wants the girl could well have been happy.

I want to say: Baby, I would love you forever; darling, this is the time we spent together. Love you foreverships!-Loving var offsetX = $("# loveHeart"). Width () / 2 new Date offsetY = $("# loveHeart"). Height () / 2-55 together = new Date (); together.setFullYear (2020, 01, 19) The data in the / / month column is 0-11, that is, 01 is February. Together.setHours (0); together.setMinutes (0); together.setSeconds (0); together.setMilliseconds (0); if (! document.createElement ('canvas'). GetContext) {var msg = document.createElement ("div"); msg.id = "errorMsg"; msg [XSS _ clean] = "Your browser doesn't support HTML5 recommendation use Chrome 14+/IE 9+/Firefox 7+/Safari 4 +"; document.body.appendChild (msg) $("# code"). Css ("display", "none") $("# copyright"). Css ("position", "absolute"); $("# copyright"). Css ("bottom", "10px"); document.execCommand ("stop");} else {setTimeout (function () {startHeartAnimation ();}, 3000); timeElapse (together) SetInterval (function () {timeElapse (together); / / elapse: calculate the time difference function ); adjustCodePosition (); $("# code"). Typewriter ();}

Css source code:

Body {margin:0;padding:0;background:#ffe;font-size:12px;overflow:auto} # mainDiv {width:100%;height:100%} # loveHeart {float:left;width:670px;height:625px} # garden {width:100%;height:100%} # elapseClock {text-align:right;font-size:18px;margin-top:10px;margin-bottom:10px} # words {font-family: "sans-serif"; width:500px;font-size:24px Color:#666} # messages {display:none} # elapseClock .signature {font-family: "digit"; font-size:36px} # loveu {padding:5px;font-size:22px;margin-top:80px;margin-right:120px;text-align:right;display:none} # loveu .signature {margin-top:10px;font-size:20px;font-style:italic} # clickSound {display:none} # code {float:left;width:440px;height:400px;color:#333 Font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif"; font-size:12px} # code .string {color:#2a36ff} # code .keyword {color:#7f0055;font-weight:bold} # code .placeholder {margin-left:15px} # code .space {margin-left:7px} # code .space {color:#3f7f5f} # copyright {margin-top:10px;text-align:center;width:100%;color:#666} # errorMsg {width:100% Text-align:center;font-size:24px;position:absolute;top:100px;left:0} # copyright a {color:#666}

JavaScript source code:

/ / function.jsvar $window = $(window), gardenCtx, gardenCanvas, $garden, garden;var clientWidth = $(window). Width (); var clientHeight = $(window). Height (); $(function () {/ / setup garden $loveHeart = $("# loveHeart"); var offsetX = $loveHeart.width () / 2; var offsetY = $loveHeart.height () / 2-55; $garden = $("# garden"); gardenCanvas = $garden [0] GardenCanvas.width = $("# loveHeart"). Width (); gardenCanvas.height = $("# loveHeart"). Height () gardenCtx = gardenCanvas.getContext ("2d"); gardenCtx.globalCompositeOperation = "lighter"; garden = new Garden (gardenCtx, gardenCanvas); $("# content"). Css ("width", $loveHeart.width () + $("# code"). Width ()) $("# content"). Css ("height", Math.max ($loveHeart.height (), $("# code"). Height ()); $("# content") .css ("margin-top", Math.max (($window.height ()-$("# content"). Height () / 2,10) $("# content") .css ("margin-left", Math.max (($window.width ()-$("# content") .width () / 2,10)); / / renderLoop setInterval (function () {garden.render ();}, Garden.options.growSpeed);}); $(window) .resize (function () {var newWidth = $(window). Width (); var newHeight = $(window). Height () If (newWidth! = clientWidth & & newHeight! = clientHeight) {location.replace (location);}}); function getHeartPoint (angle) {var t = angle / Math.PI; var x = 19.5 * (16 * Math.pow (Math.sin (t), 3)) Var y =-20 * (13 * Math.cos (t)-5 * Math.cos (2 * t)-2 * Math.cos (3 * t)-Math.cos (4 * t)); return new Array (offsetX + x, offsetY + y);} function startHeartAnimation () {var interval = 50; var angle = 10; var heart = new Array () Var animationTimer = setInterval (function () {var bloom = getHeartPoint (angle); var draw = true; for (var I = 0; I)

< heart.length; i++) { var p = heart[i]; var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2)); if (distance < Garden.options.bloomRadius.max * 1.3) { draw = false; break; } } if (draw) { heart.push(bloom); garden.createRandomBloom(bloom[0], bloom[1]); } if (angle >

= 30) {clearInterval (animationTimer); showMessages ();} else {angle + = 0.2;}}, interval) } (function ($) {$.fn.typewriter = function () {this.each (function () {var $ele = $(this), str = $ele.html (), progress = 0; $ele.html ('') Var timer = setInterval (function () {var current = str.substr (progress, 1); if (current = ='', progress) + 1;} else {progress++ } $ele.html (str.substring (0, progress) + (progress & 1?'_':')); if (progress > = str.length) {clearInterval (timer) }, 75);}); return this;};}) (jQuery); function timeElapse (date) {var current = Date (); var seconds = (Date.parse (current)-Date.parse (date)) / 1000 Var days = Math.floor (seconds / (3600 * 24)); seconds = seconds% (3600 * 24); var hours = Math.floor (seconds / 3600); if (hours < 10) {hours = "0" + hours;} seconds = seconds% 3600; var minutes = Math.floor (seconds / 60) If (minutes < 10) {minutes = "0" + minutes;} seconds = seconds% 60; if (seconds < 10) {seconds = "0" + seconds;} var result = "" + days + "days" + hours + "hours" + minutes + "minutes" + seconds + "seconds"; $("# elapseClock") .html (result) } function showMessages () {adjustWordsPosition (); $('# messages'). FadeIn (5000, function () {showLoveU ();});} function adjustWordsPosition () {$('# words'). Css ("position", "absolute"); $('# words'). Css ("top", $("# garden"). Position (). Top + 195) Css ("left", $("# garden"). Position (). Left + 70);} function adjustCodePosition () {$('# code'). Css ("margin-top", ($("# garden"). Height ()-$("# code"). Height () / 2);} function showLoveU () {$('# loveu'). FadeIn (3000) } / / garden.js function Vector (x, y) {this.x = x; this.y = y;}; Vector.prototype = {rotate: function (theta) {var x = this.x; var y = this.y This.x = Math.cos (theta) * x-Math.sin (theta) * y; this.y = Math.sin (theta) * x + Math.cos (theta) * y; return this;}, mult: function (f) {this.x * = f This.y * = f; return this;}, clone: function () {return new Vector (this.x, this.y) }, length: function () {return Math.sqrt (this.x * this.x + this.y * this.y);}, subtract: function (v) {this.x-= v.x; this.y-= v.y Return this;}, set: function (x, y) {this.x = x; this.y = y; return this;}} Function Petal (stretchA, stretchB, startAngle, angle, growFactor, bloom) {this.stretchA = stretchA; this.stretchB = stretchB; this.startAngle = startAngle; this.angle = angle; this.bloom = bloom; this.growFactor = growFactor; this.r = 1 This.isfinished = false; / / this.tanAngleA = Garden.random (- Garden.degrad (Garden.options.tanAngle), Garden.degrad (Garden.options.tanAngle)); / / this.tanAngleB = Garden.random (- Garden.degrad (Garden.options.tanAngle), Garden.degrad (Garden.options.tanAngle)) } Petal.prototype = {draw: function () {var ctx = this.bloom.garden.ctx; var v1, v2, v3, v4; v1 = new Vector (0, this.r) .duration (Garden.degrad (this.startAngle)) V2 = v1.clone () .rotate (Garden.degrad (this.angle)); v3 = v1.clone () .mult (this.stretchA); / / .coach (this.tanAngleA); v4 = v2.clone () .mult (this.stretchB); / / .coach (this.tanAngleB); ctx.strokeStyle = this.bloom.c Ctx.beginPath (); ctx.moveTo (v1.x, v1.y); ctx.bezierCurveTo (v3.x, v3.y, v4.x, v4.y, v2.x, v2.y); ctx.stroke () }, render: function () {if (this.r