Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how the web front end realizes the Valentine's Day love day timing function". In the daily operation, I believe that many people have doubts about how to achieve the Valentine's Day love day timing function in the web front end. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve the Valentine's Day love day timing function in the web front end". Next, please follow the editor to study!

Preface

Using HTML5,css,js to realize the function of love tree and commemorative date the web page has the function of playing music and typing to express your feelings, which is very suitable for giving to your girlfriend on Valentine's Day.

Specific HTML code

Specifically, as long as you modify the male and female text fields in the code, you can also modify the JS code in the lower part of the code. Note that the month is from 0 to November, that is, the month needs to be reduced by one.

Of course, only part of the HTML and JS code is not running enough, and the download address of the complete code is attached at the bottom of the article:

Male and female date commemorative function this page is edited by HTML5 Currently your browser cannot be displayed, please switch to Chrome or Firefox, or the latest version of other browsers. * to a woman: *

Happy Valentine's Day, woman.

Casual acquaintance, maybe it's fate, maybe it's doomed.

Although, but according to!

Although, but!

Although, but!

Although.

Anyway, as long as you and I still like each other, I will always be there for you.

You are my only girlfriend.

I love you, × ×!

-- @ author male so-and-so-- now male ❤ female so-and-so in love (function () { Var canvas = $('# canvas') If (! canvas [0] .getContext) {$("# error") .show (); return false;} var width = canvas.width (); var height = canvas.height (); canvas.attr ("width", width); canvas.attr ("height", height) Var opts = {seed: {x: width / 2-20, color: "rgb (190,26,37)", scale: 2}, branch: [[535,680,570,250,500,200,30,100, [540,500,455,417] 340, 400, 13, 100, [[450, 435, 434, 430, 394, 395, 2, 40], [550, 445, 600, 356, 680, 345, 12, 100, [[578, 400, 648, 409, 661, 426, 3, 80] [539, 281, 537, 248, 534, 217, 3, 40], [546, 397, 413, 247, 328, 244, 9, 80, [[427, 286, 383, 253, 371, 205, 2, 40], [498, 345, 435, 315, 395, 330, 4, 60] [546, 357, 608, 252, 678, 221, 6, 100, [[590, 293, 646, 277, 648, 271, 2, 80]], bloom: {num: 700, width: 1080 Height: 1200,}, footer: {width: 1200, height: 5, speed: 10,}} var tree = new Tree (canvas [0], width, height, opts) Var seed = tree.seed; var foot = tree.footer; var hold = 1; canvas.click (function (e) {var offset = canvas.offset (), x, y; x = e.pageX-offset.left; y = e.pageY-offset.top; if (seed.hover (x, y)) {hold = 0 Canvas.unbind ("click"); canvas.unbind ("mousemove"); canvas.removeClass ('hand');}}) .mousemove (function (e) {var offset = canvas.offset (), x, y; x = e.pageX-offset.left; y = e.pageY-offset.top Canvas.toggleClass ('hand', seed.hover (x, y);}); var seedAnimate = eval (Jscex.compile ("async", function () {seed.draw (); while (hold) {$await (Jscex.Async.sleep (10) } while (seed.canScale ()) {seed.scale (0.95); $await (Jscex.Async.sleep (10));} while (seed.canMove ()) {seed.move (0,2); foot.draw () $await (Jscex.Async.sleep (10));}}); var growAnimate = eval (Jscex.compile ("async", function () {do {tree.grow (); $await (Jscex.Async.sleep (10));} while (tree.canGrow ());}) Var flowAnimate = eval (Jscex.compile ("async", function () {do {tree.flower (2); $await (Jscex.Async.sleep (10));} while (tree.canFlower ());})) Var moveAnimate = eval (Jscex.compile ("async", function () {tree.snapshot ("p1", 240,0,610,680); while (tree.move ("p1", 500,0)) {foot.draw (); $await (Jscex.Async.sleep (10));} foot.draw () Tree.snapshot ("p2", 500,0610,680); canvas.parent () .css ("background", "url (" + tree.toDataURL ('image/png') + ")); canvas.css (" background "," # ffe "); $await (Jscex.Async.sleep (300)); canvas.css (" background "," none ");})) Var jumpAnimate = eval (Jscex.compile ("async", function () {var ctx = tree.ctx; while (true) {tree.ctx.clearRect (0,0, width, height); tree.jump (); foot.draw (); $await (Jscex.Async.sleep (25)) )); / / modify the start date var textAnimate = eval (Jscex.compile ("async", function () {var together = new Date (); together.setFullYear (2020, 1, 2); / / time, month, 011 together.setHours (22) / / hour together.setMinutes (22); / / minute together.setSeconds (2); / / previous bit together.setMilliseconds (2) / second second $("# code"). Show (). Typewriter (); $("# clock-box"). FadeIn (500); while (true) {timeElapse (together); $await (Jscex.Async.sleep (1000));}})) Var runAsync = eval (Jscex.compile ("async", function () {$await (seedAnimate ()); $await (growAnimate ()); $await (flowAnimate ()); $await (moveAnimate ()); textAnimate (). Start (); $await (jumpAnimate ()); runAsync (). Start ();}) () / / modify the music location by yourself, and the study on "how to realize the timing function of Valentine's Day in the front end of web" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.