写在前面
情人节要到咯，小编给大家准备了一些有趣的代码，一起来看看吧！（文末可以免费下载代码哦~）
完整代码
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="IE=11.0000" http-equiv="X-UA-Compatible"> <meta name="keywords" content="" /> <meta name="description" content="5" /> <body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Love</title> <link href="static/default.css" rel="stylesheet" type="text/css"> <script src="static/jquery.min.js" type="text/javascript"></script> <script src="static/jscex.min.js" type="text/javascript"></script> <script src="static/jscex-parser.js" type="text/javascript"></script> <script src="static/jscex-jit.js" type="text/javascript"></script> <script src="static/jscex-builderbase.min.js" type="text/javascript"></script> <script src="static/jscex-async.min.js" type="text/javascript"></script> <script src="static/jscex-async-powerpack.min.js" type="text/javascript"></script> <script src="static/functions.js" type="text/javascript" charset="utf-8"></script> <script src="static/love.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .style1 { color: #666666 } </style> <div id="main"> <div id="wrap"> <div id="text"> <div id="code"> <!-- ❤情人节快乐❤ --> </div> </div> <div id="clock-box">我们已经在一起...</span> <div id="clock"></div> </div> <canvas width="1100" height="680" id="canvas"></canvas> </div> </div> <script> (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: 650, }, 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, 0, 610, 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)); } })); var textAnimate = eval(Jscex.compile("async", function () { var together = new Date(); together.setFullYear(2023, 4, 20); //年月日（月份要-1） together.setHours(0); //小时 together.setMinutes(0); //分钟 together.setSeconds(0); //秒前一位 together.setMilliseconds(0); //秒第二位 $("#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(); })(); </script> <audio id="bgmMusic" src="http://qzone.haoduoge.com/music/C2C3F0LSXH4D771253124A26CF9C71C939B2A.mp3" preload="auto" type="audio/mp3" autoplay loop></audio> </body> </html>
第181行可以修改日期哦~
代码分析
这段代码是一个HTML页面，主要实现了一个情人节主题的互动式动画效果。通过JavaScript和一系列插件（如jQuery, Jscex等）结合canvas元素来绘制一棵动态生长、开花的情人节爱心树，并且带有背景音乐和时间流逝计时器功能。以下是代码各部分的主要功能分析：
1. HTML结构：
- 页面包含一个`<div id="main">`作为主体内容容器，其中`<canvas>`元素用于绘制爱心树。
- `<div id="clock-box">`和`<div id="clock"></div>`配合JS脚本显示情侣在一起的时间。
2. CSS样式：
- 设置了`.style1`的颜色属性和其他可能存在的样式（此处未展示全部CSS），并且对 canvas 元素进行了尺寸设置。
3. JavaScript部分：
- 引入多个JavaScript库文件，如jQuery和Jscex，以及自定义的`functions.js`和`love.js`脚本。
- 页面加载后执行匿名函数，该函数首先检查浏览器是否支持Canvas API，如果不支持则显示错误信息。
4. Canvas绘图：
- 定义了一个`Tree`类，它使用给定的canvas元素、宽度和高度以及其他配置参数进行初始化。
- 使用`Tree`类的方法在点击或鼠标移动事件中控制种子（爱心）的缩放和移动，并开始一系列异步动画任务，包括爱心树的生长、开花、移动以及最终生成静态背景图像。
- `seedAnimate`、`growAnimate`、`flowAnimate`、`moveAnimate`和`jumpAnimate`函数分别对应爱心树的不同动画阶段，利用Jscex编译的异步函数进行控制。
5. 时间计数器：
- `textAnimate`函数初始化并启动一个不断更新的时间倒计时，直到指定日期（在这个例子中是2023年5月20日）。
6. 音频播放：
- 页面底部嵌入了一段背景音乐，自动预加载并在页面加载完成后循环播放。
整体来看，这个网页设计为用户提供了一种有趣而浪漫的方式来表达爱意，随着时间流逝，爱心树会逐渐生长并绽放花朵，同时显示情侣已共度的时间。
下载代码
公众号对话框回复 html011 。
写在最后
可以留下你的小心心嘛~
