current position:Home>Dr. Tsinghua was asked to write code on site and make a 3D photo album of love cherry blossoms (HTML + CSS + JavaScript) in 5 minutes
Dr. Tsinghua was asked to write code on site and make a 3D photo album of love cherry blossoms (HTML + CSS + JavaScript) in 5 minutes
2021-08-22 22:52:46 【@. code out the future】
* Dr. Qinghua was asked to write code on the spot ,5 Every minute makes a love 3D Photo album (HTML+CSS+JavaScript)「 You can take it to the person you like 」
Before confession , Our message area is open to you ! Let's show you a different way to express yourself , And the one you love ta Let's make it clear !
* Introduction to the kissing plot
6 month 20 Japan , Be asked to write code on site Rush to microblog and search , Some netizens call directly : I have no ability to pick up relatives in the future , I'm afraid I won't succeed , Have to say , Talented boys are so handsome !
Recently in Xi'an, Shaanxi , When a bridegroom picks up , The bride asked to write code on the spot . The bridegroom was sweating , Finally in the 5 Finish the test in minutes , Make a red love on the computer .
According to the bride , The first level of getting married is crossing the line of fire , The second level is the elk ferrule . The bride said , The hardest thing is for the groom to write a program , Because I don't understand , I find it difficult to test these two levels , But she thought , The groom is a doctor of computer science from Tsinghua University , I believe he can accomplish , I want to remind him not to forget the skill of eating
When I see the love made by the groom , The bride shouted “ Don't worry, don't worry ”!
Actually , This is not the first time that a programmer groom has been asked to write code during the wedding .
It is reported that , In the last year 3 month , A bridegroom in Xuzhou, Jiangsu, was picking up the wedding , Bridesmaids in order to liven up the atmosphere , Ask the groom to write code on the spot , Show your love to the bride .
The bridesmaid called everyone colleagues , I think that both newcomers are programmers , It is also temporary to ask the groom to express his love in this way .
* God comments from netizens
For this new way of getting married , Many netizens said that highly educated marriage write code , Much better than a vulgar marriage , One netizen said , In case you really can't write it , That would be embarrassing , Some netizens also praised the bride's wit !
Net friend @ I feel sleepy at work : It's much more interesting than a vulgar marriage
Net friend @ It's sweet today : If the code can't be written, it's embarrassing , Is the wife not married
Net friend @ The movie bo: My wife is young and doesn't know how expensive hair is
Net friend @mymasterpiece: The bride also knows her groom's ability , It's good .
Net friend @ Little five's five -: This man is very real . The skill of eating should not be forgotten , This reminder is more profound .
There are also netizens making fun of 、 Ask for help 、 Share your experience :
Net friend @ Love bean ugly picture reward : I study civil engineering , When you get married, do you want to perform live and move bricks ?
Net friend @ Little tadpole hyacinth yiyi: Doctor of Physics , What problems can be solved ? Ask for help
Net friend @ Kazan : This marriage is …… I wonder how the meteorological professional scene should be adjusted ?
Net friend @ Muyi w: I study organic , Will there be a pillar at the scene
Net friend @ Cheng Orange 716: When I got married, my husband was asked to do an advanced math problem ,985 The doctor said he could see the answer in a second
Net friend @ Photographer Yan afai : Last time I took a picture of an IELTS Listening Test on the spot ,2 Listen more quickly
* List of articles
- * Dr. Qinghua was asked to write code on the spot ,5 Every minute makes a love 3D Photo album (HTML+CSS+JavaScript)「 You can take it to the person you like 」
- * Not far behind - Make a love album and keep it for future marriage ~
- * love 3D Album effect demonstration
- * Code file directory
- One 、* Text prologue modification ( Code implementation )
- Two 、* Cherry Blossom rain 3D Photo album ( Code implementation )
- 3、 ... and 、* Cherry Blossom rain 3D Album clipping ( course )
- Four 、* song mp3 Replace tutorial ( course )
- 5、 ... and 、* front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
- 6、 ... and 、* The source code for
- 7、 ... and 、* More confession source code
* Not far behind - Make a love album and keep it for future marriage ~
* love 3D Album effect demonstration
1. Cherry Blossom rain 3D Album demo address
2. Text prologue + Romantic Cherry Blossom falling demonstration address
1. PC( Computer terminal ) demonstration
2. H5( Mobile terminal ) demonstration
* Code file directory
One 、* Text prologue modification ( Code implementation )
Example : find js In the document script.js file , Just change the text
html ( The opening part )
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title> Text prologue +3D Cherry rain photo album </title>
<style> body {
position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style>
</head>
<body>
<script src="js/underscore-min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
js( The opening part )
/* Just change the text here */
let str = [" baby ", " Today is our love 520 God ", " Don't blink ~"];
let i = -1;
let time = setInterval(() => {
if (i != str.length - 1) {
i++;
shape.print(str[i]);
} else {
// Clear timer
clearTimeout(time);
// Jump to oriental page
window.location.href = "oriental.html";
// Reset to -1
i = -1;
}
}, 1500);
Two 、* Cherry Blossom rain 3D Photo album ( Code implementation )
html (3D Album section )
<body>
<!-- The music part -->
<audio autoplay="autopaly">
<source src="renxi.mp3" type="audio/mp3" />
</audio>
<div id="jsi-cherry-container" class="container">
<!-- 3D Photo album code part -->
<div class="box">
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</body>
js Sakura Drops
<script>
var RENDERER = {
INIT_CHERRY_BLOSSOM_COUNT: 30,
MAX_ADDING_INTERVAL: 10,
init: function() {
this.setParameters();
this.reconstructMethods();
this.createCherries();
this.render();
setParameters: function() {
this.$container = $('#jsi-cherry-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.context = $('<canvas />')
.attr({
width: this.width, height: this.height })
.appendTo(this.$container)
.get(0)
.getContext('2d');
this.cherries = [];
this.maxAddingInterval = Math.round(
(this.MAX_ADDING_INTERVAL * 1000) / this.width
);
this.addingInterval = this.maxAddingInterval;
},
reconstructMethods: function() {
this.render = this.render.bind(this);
},
var CHERRY_BLOSSOM = function(renderer, isRandom) {
this.renderer = renderer;
this.init(isRandom);
};
CHERRY_BLOSSOM.prototype = {
FOCUS_POSITION: 300,
FAR_LIMIT: 600,
MAX_RIPPLE_COUNT: 100,
RIPPLE_RADIUS: 100,
SURFACE_RATE: 0.5,
SINK_OFFSET: 20,
init: function(isRandom) {
this.x = this.getRandomValue(
-this.renderer.width,
this.renderer.width
);
var axis = this.getAxis(),
theta =
this.theta +
(Math.ceil(
-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy
) *
Math.PI) /
500;
theta %= Math.PI * 2;
this.offsetY =
40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);
this.thresholdY =
this.renderer.height / 2 +
this.renderer.height * this.SURFACE_RATE * axis.rate;
this.entityColor.addColorStop(
0,
'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)'
);
this.entityColor.addColorStop(
0.05,
'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)'
);
this.entityColor.addColorStop(
1,
'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)'
);
$(function() {
RENDERER.init();
});
</script>
3、 ... and 、* Cherry Blossom rain 3D Album clipping ( course )
The tutorial is as follows : need 12 A picture , 1-6 The picture is big 400px400px ,01-06 The picture is a small picture 100px100px
Will be ready for the picture , Replace... By yourself img The picture in the file can be !
1. Photo cutting ( course )
1.1 First : Download Meitu XiuXiu / Baidu download / Or software installation
1.2 Or use online links to crop —> Online clip image links
2. Meitu Xiu Xiu ( Computer version ) Cut the picture
2.1 Select Picture clipping
Four 、* song mp3 Replace tutorial ( course )
If it needs to be replaced mp3 The background music , You can download and replace it by yourself ~ mp3 Free download address
1.1 Search for songs you need
1.2 download
1.3 Get songs id
1.4 Pay attention to the official account. / Copy link to browser open
1.5 download mp3 ~ After downloading, replace it by yourself mp3 File can ( If you don't want to modify the code , The name must be consistent )
5、 ... and 、* front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
Suitable for children's shoes from entry to advanced ~
6、 ... and 、* The source code for
* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !
* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .
* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!
* 3. We can learn from each other about the above technical issues , can Focus on ↓ official account Get more source code !
7、 ... and 、* More confession source code
copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225244404a.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich