程序员浪漫--恋爱计时器（动画网页 表白 情人节 礼物）
2024-04-24 19:30:24
程序员的浪漫--恋爱计时器
- 一、效果展示
- 二、核心代码
- Drawing
- UI
- 源码下载与学习
一、效果展示
戳链接预览效果：恋爱计时器
网页点开后，效果如下
第一部分用动画显示表情符号与当前时间；
第二部分显示恋爱的时间；
第三部分引用一段台词或者情诗。
二、核心代码
Drawing
S.Drawing = (function () {var canvas,context,renderFn,requestFrame = window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 1000 / 60);};return {init: function (el) {canvas = document.querySelector(el);context = canvas.getContext('2d');this.adjustCanvas();window.addEventListener('resize', function (e) {S.Drawing.adjustCanvas();});},loop: function (fn) {renderFn = !renderFn ? fn : renderFn;this.clearFrame();renderFn();requestFrame.call(window, this.loop.bind(this));},adjustCanvas: function () {canvas.width = window.innerWidth - 80;canvas.height = window.innerHeight -340;},clearFrame: function () {context.clearRect(0, 0, canvas.width, canvas.height);},getArea: function () {return {w: canvas.width, h: canvas.height};},drawCircle: function (p, c) {context.fillStyle = c.render();context.beginPath();context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);context.closePath();context.fill();}};}());
UI
S.UI = (function () {var interval,currentAction,time,maxShapeSize = 30,sequence = [],cmd = '#';function formatTime(date) {var h = date.getHours(),m = date.getMinutes(),m = m < 10 ? '0' + m : m;return h + ':' + m;}function getValue(value) {return value && value.split(' ')[1];}function getAction(value) {value = value && value.split(' ')[0];return value && value[0] === cmd && value.substring(1);}function timedAction(fn, delay, max, reverse) {clearInterval(interval);currentAction = reverse ? max : 1;fn(currentAction);if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {interval = setInterval(function () {currentAction = reverse ? currentAction - 1 : currentAction + 1;fn(currentAction);if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {clearInterval(interval);}}, delay);}}function performAction(value) {var action,value,current;sequence = typeof (value) === 'object' ? value : sequence.concat(value.split('|'));timedAction(function (index) {current = sequence.shift();action = getAction(current);value = getValue(current);switch (action) {case 'countdown':value = parseInt(value) || 10;value = value > 0 ? value : 10;timedAction(function (index) {if (index === 0) {if (sequence.length === 0) {S.Shape.switchShape(S.ShapeBuilder.letter(''));} else {performAction(sequence);}} else {S.Shape.switchShape(S.ShapeBuilder.letter(index), true);}}, 1000, value, true);break;case 'rectangle':value = value && value.split('x');value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));break;case 'circle':value = parseInt(value) || maxShapeSize;value = Math.min(value, maxShapeSize);S.Shape.switchShape(S.ShapeBuilder.circle(value));break;case 'time':var t = formatTime(new Date());if (sequence.length > 0) {S.Shape.switchShape(S.ShapeBuilder.letter(t));} else {timedAction(function () {t = formatTime(new Date());if (t !== time) {time = t;S.Shape.switchShape(S.ShapeBuilder.letter(time));}}, 1000);}break;default:S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'HacPai' : current));}}, 2000, sequence.length);}return {simulate: function (action) {performAction(action);}};}());
源码下载与学习
CSDN下载：恋爱计时器（动画网页 表白 情人节 礼物）
戳链接预览效果：恋爱计时器
程序员浪漫--恋爱计时器（动画网页 表白 情人节 礼物）相关推荐
- 千万要找一个程序员谈恋爱！
提到程序员,很多人都会有一个刻板印象:呆板.木讷.不懂浪漫. 甚至女生都会觉得,恋爱千万不要找一个程序员,不然所有对恋爱的美好憧憬都会消失. 你印象里的程序员是穿着格子衬衫,戴着黑框眼镜,只会敲击键盘 ...
- 好程序员web前端教程分享网页设计需要学那些东西？
好程序员web前端教程分享网页设计需要学那些东西:初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫,下面老 ...
- 程序员谈恋爱的故事（一）
话说,我都很久没有更新博客了. 用点冠冕堂皇的话来说,很忙. 忙什么呢?当然,除了忙工作,肯定就是忙谈恋爱了晒. 对于一个钱多话少死得早的穷逼屌丝程序员,恋爱真的是一个大问题. 那天,她说,现在你不会 ...
- 获奖公布|程序员/媛 恋爱、结婚这件小事
山歌,海笑,花飞扬,春天的气息已扑面而来!都说春天是一个恋爱的季节,万物花开,芬芳四溢,人们的春心也随之荡漾起来. 为此,CSDN博客特举行"程序员(媛)恋爱/结婚"为主题的征文活 ...
- 最好不要和程序员谈恋爱
最好不要和程序员谈恋爱 和他说话的时候 他常常会不说话 因为脑海里还在思考着某个程序 不说话的时候 他常常在发呆 因为脑海里还是在思考着某个程序 周末的时候 不会等到他的电话 因为他常常在加班 节日的 ...
- 程序员哇，你想在下个情人节或者520脱单么？这个秘籍不能错过
简评:对于程序员来说,"单身"依然是人生最大的bug,关键是还无法调试.虽然俗话说"自古英雄多寂寞",但是缺少另一半的人生总是不完整的.被虐,那已是过去式了.这 ...
- 程序员如何通过腾讯地图表白（使用到了个性化地图，点标记和动画等）
都说程序员是钢铁直男,大家能忍吗?这次我们要用H5技术,展示我们浪漫的一面.看了下抖音上 #手掌地图 播放量较高,就选择做这个吧.先看一下最终效果: 程序员通过H5实现手掌地图进行表白 第一步,使用个 ...
- 三·八节，菊厂程序员用“运动轨迹绘制”向女神表白
程序员为女友而备的礼物清单里,除了玫瑰.包包.和口红,就没有其他有新意又有心意的惊喜了嘛? No!这个"×"是远在法国出差的阿强比的,作为菊厂一向低调行事的程序员,阿强决定在今年的 ...
- 【附源码】为了帮助程序员谈恋爱，我做了这个APP
前段时间,21岁的我第一次开启了名为『恋爱』的副本,开始打名叫『女朋友』的BOSS,深感过程艰难,整个过程仿佛0级的菜鸡进入了布满世界迷雾的地图,只能小心翼翼才能平安通过.然而在打怪升级的过程中,偶然 ...
最新文章
- go语言中的类型转换
- pandas将字典转换成dataframe，两重字典
- vue使用总结-生命周期篇
- python网络编程爬虫_Python爬虫--网络编程
- jmeter 线程执行顺序_性能测试之jmeter逻辑控制种类详解一
- java shape类_Java——Shape类
- 使用K-Means对美因河畔法兰克福的社区进行聚类
- 查找满足断言的第一个元素
- Flask爱家租房--房屋管理（获取主页幻灯片展示的房屋基本信息）
- Kali Linux 2019.4用U盘安装以及解决Kali Linux 2019.4中文乱码问题
- 理解Python的协程机制-Yield
- java.net.SocketException: Connection reset 问题分析
- proc文件系统、sysfs文件系统、kobject操作
- cmder 下载及安装
- YUV Alpha Blend 推导过程
- 真格量化学习处理——几个功能小函数
- 【框架设计】3D坦克大战
- 苹果内存不够怎么办_手机内存清理了还是不够用？不知道这些方法，真是太可惜了...
- hdu 2576 Queen Collisions
- windows 认证机制