七夕给女朋友做的一个小礼物

今天正值七夕佳节，想着给女朋友表白，就做了一个小demo，很简单很简单，界面只显示一颗爱心，但是简短的代码里有着我自己想表达的情意

      let nowadays, future, dueTime,somewords;nowadays = new Date().getTime();future = 1565154841314;dueTime = Math.abs(nowadays - future);let echo = "mygirlname";let thatgirl = new Object();thatgirl.virtue = "optimistic and generous";thatgirl.advantage = "beautiful and charming";thatgirl.merit = "lovable";thatgirl[echo] = "syj";somewords = 'Baby,I love you';function forYou() {let $div1 = $("<div></div>");let $div2 = $("<div></div>");let $div3 = $("<div></div>");let $div4 = $("<div></div>");$div1.css({position: "absolute",top: "100px",left: "0px",width: "0px",height: "0px",border: "100px solid red",borderRadius: "100px",display: "inline-block"});$div2.css({position: "absolute",top: "100px",left: "100px",width: "0px",height: "0px",border: "100px solid red",display: "inline-block"});$div3.css({position: "absolute",top: "0px",left: "100px",width: "0px",height: "0px",border: "100px solid red",borderRadius: "100px",display: "inline-block"});$div4.css({position: "absolute",top: "-100px",left: "200px",width: "0px",height: "0px",border: "0px solid transparent",transform:"rotate(45deg)",display: "inline-block"})$("body").append($div4);$($div4).append($div1,$div2,$div3);}if(somewords){forYou();}

哈哈哈，是有点简单，但是看了我想表达的内容后，女朋友还是很开心。

这里面主要用了以下几个知识点：
1.date()对象

var date = new Date()；

可以获得当前时间
getTime()可以将时间转换成字符串时间戳
2.ES6中支持对象属性名是一个变量

var prop = 'name';
var obj = {
[prop] : 'rng'
}
console.log(obj.name);
//rng

这是es6中对象扩展的一个知识点
3.用js动态操作DOM元素
这里使用了jQuery，操作更加简单
新建元素直接：

 var $div = $("<div></div>");

将其插入到目标节点

 $("body").append($div);//在body插入之前创建的div

然后是css
4. 用css绘制爱心

   div {position: absolute;width: 0px;height: 0px;display: inline-block;}.one {top: 100px;left: 0px;border: 100px solid red;border-radius: 100px;}.two {top: 100px;left: 100px;border: 100px solid yellow;}.three {top: 0px;left: 100px;border: 100px solid green;border-radius: 100px;}.box {top: -100px;left: 200px;border: 100px solid transparent;transform: rotate(45deg);}

七夕给女朋友做的一个小礼物相关推荐

突发灵感，看到某网站的搞笑图片挺多，做了一个小java，扫描抠了一些
2019独角兽企业重金招聘Python工程师标准>>> 突发灵感,看到某网站的搞笑图片挺多,做了一个小java,扫描抠了一些这里分享一下 /*** 取得文件的后缀名* @Descr ...
黑白块游戏java代码_用ｊａｖａ做的一个小游戏—黑白反斗棋（适合菜鸟）
用Java做的一个小游戏,黑白反斗棋,我玩过了5*5和10*10的.是学习之后做的,不是自己原始开发的. import java.awt.Color; import java.awt.FlowLayo ...
做了一个小项目-PHP实现人生只有900个月
做了一个小项目-PHP实现人生只有900个月起因当然是阮一峰老师那篇振聋发聩的博文<人生只有900个月>,几年前看到以后羞愧到无法自拔,想到自己曾经浪费多少时间,在一些无意义的事情上 ...
七夕节基于Qt Android给女朋友做个转盘抽礼物的App
前言临近七夕,看到抖音上的excel表格做的七夕抽奖,突发灵感,想着用代码也整一个出来.想着做个小程序效果最好,但自己没做过小程序,时间紧迫很悬:做个pc应用,那时最拿手的,很快,但要在电脑上打开才 ...
程序员们请别做下一个小贝
据网友提供的<蜗居>第24集3:30秒截图,有理由相信小贝是搞 C++ 的那本书是<大规模C++程序设计> -- 历史上一定有那么一些人,没有名,没有钱,只是和爱人一起过完了 ...
用 Python 做了一个小姐姐跳舞的词云视频
关注公众号:[小张Python],为你准备了 50+ 本Python 精品电子书籍与 50G + 优质视频学习资料,后台回复关键字:1024 即可获取:如果对博文内容有什么疑问,公号后台添加作者[个 ...
我在公司做的一个小游戏的总结感想
这次这个小游戏真的让我感受到了学校与公司的最大不同.在学校里的时候我们给学校交学费,所以老师的任务就是教会我们东西,学习的时候不懂就问他,实在太笨了就坐下来给你写代码.而在公司是给我们钱,分下来的任务 ...
拼插机器人课和围棋课_我做了一个小程序，里面有各种乐高拼搭图纸和案例
等产品发出去后,我们陆续收到好多用户的好评. 其中有一位老师的评价最让我感动: 对这样的建议,我举双手双脚欢迎.以前我的课程,比如编程课,就有家长自发组织起来,组织了一帮孩子一起学习,父母在旁边帮忙指 ...
自己做的一个小程序可采集、导出、模板、配置
去年老婆要开个店铺,卖化妆品的,不过输入数据的时候真的头疼,因为我们是没有货源的,都是从代理那里找图片.介绍等,不过好在代理有个网站,闲来无事,就开发了这个小程序. 程序的功能: 1.采集数据 2.可 ...

七夕给女朋友做的一个小礼物

七夕给女朋友做的一个小礼物相关推荐

最新文章

热门文章