html5纪念日期代码,HTML5适合的情人节礼物有纪念日期功能
前言
利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友
具体的HTML代码
具体只要修改代码里面的男某某和女某某 文字段也可自行修改,还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。
当然只有一部分HTML和JS代码不够运行的,文章最下面还附加了完整代码的下载地址
男某某与女某某日期纪念功能
* 致女某某: *
· 女某某,情人节快乐!
· 不经意相识, 或许是缘分,或许是注定的。
· 虽然......,但依......!
· 虽然......,但......!
· 虽然......,但......!
· 虽然......
· 无论如何,只要你我依旧喜欢对方,我会一直陪着你。
· You are my only girlfriend.
· I love you,×××!
--@author 男某某--
现在是男某某 ❤ 女某某相恋
(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(2020, 1, 2); //时间年月日 月份0~11
together.setHours(22);//小时
together.setMinutes(22);//分钟
together.setSeconds(2);//秒前一位
together.setMilliseconds(2);//秒第二位
$("#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();
})();
//自己修改音乐位置
画面演示:
①点击网页中心的爱心,刚进入网页会自动播放音乐
②会慢慢生成爱心树,速度挺快的
③然后会平移爱心树到最右边,准备生成文章
④会慢慢生成所要说的话 日期设定是2020.02.02 22:22:22
⑤最后的样子
完整代码资源
链接: https://pan.baidu.com/s/1Y0N0v76u1LBgW4T9mSse2A 提取码: 3f8n
html5纪念日期代码,HTML5适合的情人节礼物有纪念日期功能相关推荐
- html恋爱纪念页面,HTML5适合的情人节礼物有纪念日期功能
前言 利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字 ...
- HTML5适合的情人节礼物有纪念日期功能
前言 利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字 ...
- HTML5适合的情人节礼物,学生送什么情人节礼物?适合学生的情人节礼物有哪些?...
情人节到了,很多在校的学生都开始积极准备过情人节了.一般情况下,学生都是靠父母给钱,因此,很多学生囊中羞涩.那么,学生送什么情人节礼物?适合学生的情人节礼物有哪些? 学生送什么情人节礼物 一般来说学生 ...
- html5页面弹幕代码,html5新年许愿文字弹幕代码
特效描述:html5 新年许愿 文字弹幕代码.html5文字弹幕 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 HTML5手机视频弹幕文字评论代码 #audio_btn{ posit ...
- 情人节送男朋友的礼物送什么比较适合?情人节礼物推荐
每年的情人节都是男生女生相互之间表达爱意的好时机,有的情侣还会专门挑选这个特别的节日来表达自己的爱慕和求婚的惊喜.其实对于女生而言,回赠礼物给男友也是一个表达自己心仪的最好时机.一份真挚的礼物,肯定可 ...
- html5外链代码,html5关于外链嵌入页面通信问题
这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学 ...
- html5语音闹钟代码,HTML5数字时钟之闹钟
想要在数字时钟时钟上扩展闹钟效果,需要做的有1.要有一个可以编辑设置闹钟响铃时间的界面:2.每秒钟侦听是否到了响铃时间,如果到了响铃时间则弹出提醒并播放响铃音频. HTML 我们使用上篇文章使用jQu ...
- html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图 各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰 代码过长需要文档版源码来我的前端群581549454,已上传到 ...
- html5进度条代码,html5简单进度条效(progressbar)
[实例简介] [实例截图] [核心代码] 一个html5实现的简单进度条效果 var i = 0; var res = 0; var context = null; var total_width = ...
最新文章
- 查看mysql日志文件大小和数据库大小
- java并发编程系列-内存模型基础
- python 列表间隔取值_python list数据等间隔抽取并新建list存储的例子
- centos7 centos-home 磁盘空间转移至centos-root下(磁盘空间不足,磁盘不足)
- 【JavaScript算法】---快速排序法
- 潮流设计师创作灵感|是时候设计一下蒸汽波海报了!
- 期权水平套利可行分析(20191204)[博]
- matlab光束,matlab仿真光束的传输特性
- 怎样在php中制作电子相册,电子相册制作 如何制作电子相册带音乐和文字
- 用Java实现学生管理系统【简化版】基础
- 《PWM整流器及其控制》读书笔记—第三章—电压型PWM整流器
- 汽车信息安全标准ISO/SAE21434与UN/WP.29阅读总结
- 小马激活工具激活系统后,电脑不能启动,出现错误 a disk read error occurred
- Elasticsearch:深入理解 Dissect ingest processor
- C# Parellel.For 和 Parallel.ForEach
- Python在cmd下pip快速下载安装包的国内安装镜像
- 教你轻松用Python画一只肥肥的柯基狗狗——turtle库绘制椭圆与弧线实践
- python登录网页后抓取数据_Python抓取网页数据的终极办法
- 三星意欲赢回苹果A系列芯片订单 台积电当仁不让
- 专访寒武纪CEO陈天石:AI芯片是中国主导世界AI产业的机会
热门文章
- Android 编译环境的依赖库安装
- Android 4.4.2 动态添加JNI库方法记录 (一 JNI库层)
- cadence 添加自己设计的pad方法
- java中解密的思想_北大青鸟翔天解密,Java核心思想两大点
- c++读取图片_Pytorch读取,加载图像数据(一)
- write up社工进阶
- 前沿·探索·想象力,今年的云栖大会有啥不一样?
- 阿里研究员:软件测试中的18个难题
- 人工智能们再也不用担心撞上玻璃橱窗了
- html table设置行高_html 表格单元格的宽度和高度的设置方法