辞职后你说你想去外面玩玩，我看你寸步未行，原来你是去了JDK以外的方面玩玩

按需阅读

- 兄弟们！我被面试官吊打了
- Java面试Question A：如果距离世界末日只剩一天你能干什么？
- - 面试官：世界末日前我想看视频
  - 面试官：给点创意好不好？
  - 面试官：如果有一天我想换个姿势看图片
- Java面试Question B：上帝有没有给它装上心灵的窗户？
- - 我：虽然它没有心里的窗户，但是我有
- Java面试Question C：出去玩怎么能不提前夜观天象？
- - 面试官：我想离开浪浪山，但是害怕明天下大雨
  - 我：有我在，别害怕

兄弟们！我被面试官吊打了

我：我是搞Java的，有2.5年的工作经验，真的没骗你🤥！
面试官：那你搞前端干嘛？不好意思，我们不合适！🤡
我：…
面试官：你还有什么想说的吗？
**我：求求你，给个机会吧🥲，我真的很行 **

你一直说永远，但你又不信，你点下面的链接，我告诉你什么是Forever

www.seeuagain.vip

你相信光吗
哦~上干货了！Let go!!! 面试官上来就给我出难题，你猜怎么着？

Java面试Question A：如果距离世界末日只剩一天你能干什么？

    我不知道我能干什么，因为明天就是时间末日了，总不能来分析一下世界末日的底层原理吧😅（世界末日的底层原理肯定不是OOM）
    如果非要干点什么，那就去学Vue吧，到Vue需要我们的地方！到从0到1熟练掌握Vue的底层原理里面去！
    放下它难于上青天，掌握它简直易如反掌！Vue真的是每一个钓鱼人的梦中框架，没错你说的对，它就是个钩子！我们有一个响亮的口号——勾你所勾，勾你所想！听说会Vue的钓鱼人每天出门作业都爆护了！空军一号

面试官：世界末日前我想看视频

好的明白了，我们先这样，再那样，然后再搞一下这样，这样的话我们就可以进行那样，最后你就可以看到想你说的那样！

效果就要-先看为快，点此立即查看

HTML Dom部分, 简单加几个元素

我们需要有一个canvas来绘制图片帧
我们需要一些svg类似的图片来控制视频播放，这里先简单加几个：上一部，下一步，暂停，播放
当鼠标进入到视频区域，那么我们可以控制视频播放，这样我们在容器上加时一些鼠标进入离开事件处理，同时在对应的SVG上添加点击事件

<template><div class="video-box"><ul><li><div class="video-container" @mouseenter="hoverVideoMenu" @mouseleave="leaveVideoMenu"><canvas ref="videoCanvas" class="video-canvas"/><div :class="['video-play-icon', videoInfo.needShowVideoMenu ? 'show-menu' : 'un-show-menu']"><svg v-if="videoInfo.needShowVideoMenu" @click="playLastVideo" t="1727021769483":class="['icon','last-video', videoInfo.needShowVideoMenu ? 'show-menu' : 'un-show-menu']"viewBox="0 0 1171 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9175" width="200"height="200"><pathd="M49.486529 0.618582a49.486529 49.486529 0 0 0-49.486529 49.486529v923.789778a49.486529 49.486529 0 0 0 98.973058 0V50.105111a49.486529 49.486529 0 0 0-49.486529-49.486529zM872.818654 27.58874l-533.217349 313.744593a197.946116 197.946116 0 0 0 0 341.333334l533.217349 313.744593a197.946116 197.946116 0 0 0 298.40377-170.728525V197.946116A197.946116 197.946116 0 0 0 872.818654 27.58874z m199.430712 798.093995v8.783859a98.973058 98.973058 0 0 1-148.459587 76.580404L389.706415 597.302404l-8.165277-5.319802a98.973058 98.973058 0 0 1 8.165277-165.285006L923.047481 112.953002l7.670412-4.082638A98.973058 98.973058 0 0 1 1072.249366 197.946116z"p-id="9176" fill="#BE3E50"></path></svg><svg v-if="videoInfo.needShowVideoMenu && !videoPlay" @click="clickToPlayVideo" t="1726998892925":class="['icon','play-video', videoInfo.needShowVideoMenu ? 'show-menu' : 'un-show-menu']"viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6102" width="200"height="200"><path d="M772.7 217.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z" fill="#BE3E50"p-id="6103"></path><pathd="M415.8 679.9c5.9 0 11.5-1.6 16.2-4.5l231.1-134.6c10.9-5.2 18.5-16.3 18.5-29.2 0-11.9-6.4-22.3-16-27.8L439.7 352.2c-5.8-6.7-14.4-10.9-23.9-10.9-17.6 0-31.8 14.4-31.8 32.1 0 0.6 0 1.2 0.1 1.8l-0.4 0.2 0.5 269c-0.1 1.1-0.2 2.2-0.2 3.4 0 17.7 14.3 32.1 31.8 32.1z"fill="#BE3E50" p-id="6104"></path><pathd="M909.8 306.6c-5.4-10.5-16.3-17.8-28.9-17.8-17.8 0-32.2 14.4-32.2 32.1 0 6 1.7 11.7 4.6 16.5l-0.1 0.1c26.9 52.4 42.1 111.8 42.1 174.7 0 211.6-171.6 383.2-383.2 383.2S128.8 723.8 128.8 512.2 300.4 129.1 512 129.1c62.5 0 121.5 15 173.6 41.5l0.2-0.4c4.6 2.6 10 4.1 15.7 4.1 17.8 0 32.2-14.4 32.2-32.1 0-13.1-7.9-24.4-19.3-29.4C653.6 81.9 584.9 64.5 512 64.5 264.7 64.5 64.3 265 64.3 512.2S264.7 959.9 512 959.9s447.7-200.4 447.7-447.7c0-74.1-18-144-49.9-205.6z"fill="#BE3E50" p-id="6105"></path></svg><svg v-if="videoInfo.needShowVideoMenu && videoPlay" @click="clickToPauseVideo" t="1727022666759":class="['icon','pause-video', videoInfo.needShowVideoMenu ? 'show-menu' : 'un-show-menu']"viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" width="200"height="200"><pathd="M247.731946 0a49.546389 49.546389 0 0 0-49.546389 49.546389v924.907222a49.546389 49.546389 0 0 0 99.092779 0V49.546389a49.546389 49.546389 0 0 0-49.54639-49.546389zM776.268054 0a49.546389 49.546389 0 0 0-49.54639 49.546389v924.907222a49.546389 49.546389 0 0 0 99.092779 0V49.546389a49.546389 49.546389 0 0 0-49.546389-49.546389z"p-id="1816" fill="#BE3E50"></path></svg><svg v-if="videoInfo.needShowVideoMenu" @click="playNextVideo" t="1727021849924":class="['icon','next-video', videoInfo.needShowVideoMenu ? 'show-menu' : 'un-show-menu']"viewBox="0 0 1171 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1599" width="200"height="200"><pathd="M1121.735895 0.618582a49.486529 49.486529 0 0 0-49.486529 49.486529v923.789778a49.486529 49.486529 0 0 0 98.973058 0V50.105111a49.486529 49.486529 0 0 0-49.486529-49.486529zM831.621119 341.333333L298.280053 27.58874l-9.649873-5.319802A197.946116 197.946116 0 0 0 0 197.946116v638.871088a197.946116 197.946116 0 0 0 298.280053 159.47034l533.341066-313.744594 11.134469-7.05183a197.946116 197.946116 0 0 0-11.134469-334.157787z m-49.486529 255.969071L248.051226 911.046998a98.973058 98.973058 0 0 1-148.459587-85.364263V197.946116a98.973058 98.973058 0 0 1 148.459587-84.993114l533.464782 313.744594a98.973058 98.973058 0 0 1 0 170.604808z"p-id="1600" fill="#BE3E50"></path></svg></div></div></li></ul></div>
</template>

JS部分

首先在mounted方法前初始化视频，那我们Vue在初始化页面的时会拉这个勾来做事情，并初始化画布
然后我们定义一些methods,用来控制视频播放，一些页面操作事件，还有就是自动播放，以及一个视频切换的过渡效果
最后就是资源释放的一些操作，通过补充这个钩子beforeDestroy方法，在里面写上是否视频播放时添加的事件以及一些其他资源

<script>
export default {name: "SpecialVideo",data() {return {soundOpen: true,videoPlay: true,rootFontSize: 0,videoInfo: {srcMatch: '/video/video',currentVideoIndex: 0,transitionDuration: 1000,  // 过渡时长fadeOpacity: 1,  // 视频透明度video: null, // 用于存储视频元素videoSrc: [],needShowVideoMenu: true},}},methods: {initVideoList() {this.videoInfo = {needShowVideoMenu: true,srcMatch: '/video/video',currentVideoIndex: 0,transitionDuration: 3000,  // 过渡时长fadeOpacity: 1,  // 视频透明度video: null, // 用于存储视频元素videoSrc: [],};},initVideo() {this.videoInfo.video = document.createElement('video');this.videoInfo.video.src = this.videoInfo.srcMatch + '_' + this.videoInfo.currentVideoIndex + '.mp4';//this.videoInfo.videoSrc[0].src;this.videoInfo.video.autoplay = true;this.videoInfo.video.loop = false;this.videoInfo.video.muted = !this.soundOpen;this.videoInfo.video.addEventListener('loadedmetadata', this.loadMetadata);this.videoInfo.video.addEventListener('ended', this.fadeOutAndNextVideo);this.videoInfo.video.addEventListener('error', this.playError);this.videoInfo.video.addEventListener('play', () => {const canvas = this.$refs.videoCanvas;const context = canvas.getContext('2d');this.drawFrame(context);});},loadMetadata() {const canvas = this.$refs.videoCanvas;canvas.width = this.videoInfo.video.videoWidth;canvas.height = this.videoInfo.video.videoHeight;},playError() {this.videoInfo.currentVideoIndex = -1;this.fadeOutAndNextVideo();},fadeOutAndNextVideo() {this.play(true);},play(isNext) {this.videoInfo.fadeOpacity = 1;const fadeOutInterval = setInterval(() => {this.videoInfo.fadeOpacity -= 0.05;if (this.videoInfo.fadeOpacity <= 0) {clearInterval(fadeOutInterval);if (isNext) {this.playNextVideo();} else {}}}, this.videoInfo.transitionDuration / 50);},playVideoAfterHandleCurrentVideoIndex() {let src = this.videoInfo.srcMatch + '_' + this.videoInfo.currentVideoIndex + '.mp4';this.videoInfo.video.src = src;//this.videoInfo.videoSrc[this.videoInfo.currentVideoIndex].src;// 开始淡入this.videoInfo.fadeOpacity = 0;const fadeInInterval = setInterval(() => {this.videoInfo.fadeOpacity += 0.05;  // 每次增加透明度if (this.videoInfo.fadeOpacity >= 1) {clearInterval(fadeInInterval);  // 完成淡入}}, this.videoInfo.transitionDuration / 50);this.videoInfo.video.play();this.videoPlay = true;},playNextVideo() {this.videoPlay = true;this.videoInfo.currentVideoIndex++;this.playVideoAfterHandleCurrentVideoIndex();},playLastVideo() {if (this.videoInfo.currentVideoIndex <= 0) {this.$message.warning("已经是最开始的视频了，不能再退了喔");return;}this.videoPlay = true;this.videoInfo.currentVideoIndex--;this.playVideoAfterHandleCurrentVideoIndex();},drawFrame(context) {if (!this.videoInfo.video.paused && !this.videoInfo.video.ended) {context.drawImage(this.videoInfo.video, 0, 0, context.canvas.width, context.canvas.height);context.globalAlpha = this.videoInfo.fadeOpacity;  // 应用透明度context.drawImage(this.videoInfo.video, 0, 0, context.canvas.width, context.canvas.height);requestAnimationFrame(() => this.drawFrame(context));}},clickToPlayVideo() {this.playVideo();},clickToPauseVideo() {this.videoInfo.video.pause();this.videoPlay = false;},playVideo() {this.videoInfo.video.play();this.videoPlay = true;this.videoInfo.needShowVideoMenu = !this.videoPlay;},hoverVideoMenu(e) {this.videoInfo.needShowVideoMenu = true;},leaveVideoMenu(e) {this.videoInfo.needShowVideoMenu = false;},},mounted() {this.videoInfo.needShowVideoMenu = true;this.initVideoList();this.rootFontSize = parseFloat(getComputedStyle(this.$root.$el).fontSize);this.initVideo();this.videoInfo.video.play();},beforeDestroy() {this.videoInfo.video.removeEventListener('play', this.drawFrame);this.videoInfo.video.removeEventListener('error', this.playError);this.videoInfo.video.removeEventListener('ended', this.playNextVideo);this.videoInfo.video.removeEventListener('loadedmetadata', this.loadMetadata);this.videoInfo.video.pause();this.videoInfo.video.src = '';this.videoInfo.video.load();}}</script>

最后的话肯定也离不开老三样里的CSS,CSS虽强大，但JS更强。CSS是自己强，JS是写代码的人强！你明白我的意思吧？

<style scoped>* {margin: 0;padding: 0;--mainColor: #BE3E50;}body {background-color: var(--mainColor);}.video-box {position: absolute;width: 100vw;height: 100vh;display: flex;justify-items: center;justify-content: center;}.video-box>ul{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}ul>li{list-style: none;}.video-container {width: 48rem;height: auto;margin: 0;max-width: 80vw;transition: all 1s ease-out;aspect-ratio: 5 / 3;animation: initVideo 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.6);position: relative;cursor: pointer;}@keyframes initVideo {0% {opacity: 0;width: 44rem;}70% {width: 48rem;}100% {opacity: 1;width: 48rem;}}.video-canvas {width: 100%;height: 100%;cursor: pointer;}.video-play-icon > svg {margin: 1rem;}.video-play-icon > svg:hover {transform: scale(1.1);}.videoContainer-li > canvas {width: 100%;height: 100%;}.video-play-icon {width: 60%;display: flex;justify-items: center;justify-content: center;position: absolute;cursor: pointer;}.video-play-icon > svg {margin: 1rem;}.video-play-icon > svg:hover {transform: scale(1.1);}
</style>

面试官：给点创意好不好？

很好，面试官竟然如此，那这样吧，我们满足它！
为了提升用户的体验，于是乎，我决定我要写一个声音展示的效果，让用户打开页面的时候不害怕，可以关闭声音，当你看到一些效果的时候即便你把系统音量调到MAX仍然是万籁俱尽，而当你把系统音量调到MIN可以说你将内心澎湃，这就是酷炫特效的力量！你的每一步操作都不需要信心十足！你可以大胆浏览而不要小心翼翼！你可以随心所欲而不要万事拘谨！

效果就要-先看为快，点此立即查看

来，上代码！

老三样第一HTML
这样我们由两个元素组成，第一就是我们的DIV,然后就是内嵌一个canvas，我们给div添加一些交互事件

<template><div class="menu-item sound-switch"@click="switchRound"@mouseenter="onSoundMouseEnter"@mouseleave="onSoundMouseLeave"><canvas ref="soundCanvas" class="sound-open"/></div>
</template>

老二JS
这里我们需要把这个组件引入一个属性，并且在每次变更值的时候传递值出去

<script>export default {name: "SoundSwitch",props: {soundOpen: {type: Boolean,default: true}},data() {return {soundSince: {maxAmplitude: 16,amplitude: 16,frequency: 0.16,phase: 2,lineColor: 'rgb(190,62,80)'},}},methods: {initSound() {this.canvas = this.$refs.soundCanvas;this.ctx = this.canvas.getContext('2d');this.ctx.imageSmoothingEnabled = true;this.canvas.width = this.$refs.soundCanvas.parentElement.clientWidth;this.canvas.height = this.$refs.soundCanvas.parentElement.clientHeight;this.ctx.lineWidth = 0.3 * this.rootFontSize;this.animateSineWave();},switchRound() {this.soundOpen = !this.soundOpen;//通知父组件，开关变更了this.$emit("checked", this.soundOpen)},drawSineWave() {const width = this.canvas.width;const height = this.canvas.height;const centerY = height / 2;this.ctx.clearRect(-10, -10, width + 10, height + 10);this.ctx.beginPath();this.ctx.moveTo(0, centerY);for (let x = 0; x < width; x++) {const y = centerY + this.soundSince.amplitude * Math.sin((x * this.soundSince.frequency) + this.soundSince.phase);this.ctx.lineTo(x, y);}this.ctx.strokeStyle = this.soundSince.lineColor;this.ctx.stroke();},animateSineWave() {this.drawSineWave();this.soundSince.phase += 0.08;if (!this.soundOpen) {if (this.soundSince.amplitude > 0) {this.soundSince.amplitude -= 0.5;} else {this.soundSince.amplitude = 0;}} else {if (this.soundSince.amplitude < this.soundSince.maxAmplitude) {this.soundSince.amplitude += 0.5;} else {this.soundSince.amplitude = this.soundSince.maxAmplitude;}}requestAnimationFrame(this.animateSineWave);},onSoundMouseEnter() {this.soundSince.lineColor = '#fff';},onSoundMouseLeave() {this.soundSince.lineColor = 'rgb(190,62,80)';},},mounted() {this.rootFontSize = parseFloat(getComputedStyle(this.$root.$el).fontSize);this.initSound();}}
</script>

最后就是小老弟CSS
我们去调整这个开关的样式，它可以是圆的可以是方的，但是我不要你觉得我要我觉得，我觉得圆的更好看，不行就拉到

<style scoped>.sound-switch {position: absolute;transform: translate(calc(50vw - 50%), calc(50vh - 50%));display: flex;justify-items: center;justify-content: center;width: 3rem;height: 3rem;border-radius: 1.5rem;background-color: #f0f0f0;cursor: pointer;min-width: 3rem;min-height: 3rem;max-width: 3rem;max-height: 3rem;transition: all 1s ease;}.sound-open {width: 1.5rem;height: 1.5rem;transform: translateY(0.75rem);transition: all 0.8s ease-in-out;}.sound-switch:hover {background-color: var(--mainColor);border: 0.1rem solid #fff;}
</style>

面试官：如果有一天我想换个姿势看图片

这个好办，我就最后办。
第一步就是最先的一步-看效果，有效果才有激情

HTML

<template><div class="img-box"><div class="support-item" @mousemove="handleFor3DMouseMove"  @mouseleave="resetFor3DRotation"><el-image :src="src" class="support-a" :style="boxStyle"/><div><p class="p-title unable-select-element">{{title}}</p><p class="p-text unable-select-element">{{text}}</p></div></div></div>
</template>

JS部分

<script>export default {name: "img3D",props: {src: {type: String,required: true,},title: {type: String,default: ''},text: {type: String,default: ''}},data() {return {for3D: {rotateX: 0,rotateY: 0,topLeft: 0,topRight: 0,bottomRight: 0,bottomLeft: 0}}},mounted() {this.src: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',this.title: 'This is a special Img Card',this.message: 'It has a certain 3D effect, and when the mouse moves, it calculates the rounded corners based on the distance between the mouse and the four corners of the rectangle. The closer the corner is, the more obvious its rounded corners are';},computed: {boxStyle() {return {borderRadius: `${this.for3D.topLeft}% ${this.for3D.topRight}% ${this.for3D.bottomRight}% ${this.for3D.bottomLeft}%`,transform: `rotateX(${this.for3D.rotateX}deg) rotateY(${this.for3D.rotateY}deg)`,transition: 'all 0.3s ease-out'};}},methods:{handleFor3DMouseMove(event) {const container = event.currentTarget;const width = container.offsetWidth;const height = container.offsetHeight;const mouseX = event.clientX - container.getBoundingClientRect().left;const mouseY = event.clientY - container.getBoundingClientRect().top;this.for3D.rotateY = (mouseX / width - 0.5) * 20;this.for3D.rotateX = (mouseY / height - 0.5) * -20;this.for3D.topLeft = this.calculateBorderRadius(mouseX, mouseY, 0, 0, width, height);this.for3D.topRight = this.calculateBorderRadius(mouseX, mouseY, width, 0, width, height);this.for3D.bottomRight = this.calculateBorderRadius(mouseX, mouseY, width, height, width, height);this.for3D.bottomLeft = this.calculateBorderRadius(mouseX, mouseY, 0, height, width, height);},resetFor3DRotation() {this.for3D.rotateX = 0;this.for3D.rotateY = 0;this.for3D.topLeft = 0;this.for3D.topRight = 0;this.for3D.bottomRight = 0;this.for3D.bottomLeft = 0;},calculateBorderRadius(mouseX, mouseY, cornerX, cornerY, width, height) {const distance = Math.sqrt(Math.pow(Math.abs(mouseX - cornerX), 2) + Math.pow(Math.abs(mouseY - cornerY), 2));const maxDistance = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));const radius = (1 - distance / maxDistance) * 20.00 ;return Math.max(0, radius);}}}
</script>

CSS部分

<style scoped>* {margin: 0;padding: 0;}.img-box {--mainColor: #BE3E50;background-color: var(--mainColor);width: 100vw;height: 100vh;display: flex;justify-items: center;justify-content: center;}.support-item {border-radius: 4px;width: 500px;max-width: 80vw;min-width: 40vw;aspect-ratio: 6 / 5;margin: 1rem;background-color:rgb(190, 62, 80);perspective: 1000px; /* 控制3D透视效果 */}.support-a {position: relative;width: 100%;background-color: #fff;aspect-ratio: 3 / 2;background-position: center;background-size: cover;background-repeat: no-repeat;transition: transform 0.1s ease-out;transform-style: preserve-3d;transform: rotateX(0deg) rotateY(0deg);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}.support-a:hover {box-shadow: 0 0 5px #fff;}.p-title {color: #fff;font-family: "Raleway", sans-serif;font-weight: bold;transition: all 0.3s ease;cursor: pointer;}.p-title:hover {border-left: 0.2rem solid #fff;padding-left: 0.2rem;}.p-text {color: #fff;font-family: "Courier New", Courier, monospace;}
</style>

最后但不是最终(因为最终在Bottom)，我想说 if 有一天Vue消失了，那么这个世界注定哀号遍野，惨绝人寰！不是因为没有其他框架了，也不是因为JS不能用了，是因为我们的Vue代码：Uncaught TypeError: xxx is not a function/define

Java面试Question B：上帝有没有给它装上心灵的窗户？

我一直不明白它是谁？

它可以和我对话
它也可以帮忙生成图片

我：虽然它没有心里的窗户，但是我有

来这里，我们也有，在这里你也可以像他们一样，你有一句话，我有一张图，你敢发给我，我就敢发给你，看你敢不敢来？你来我也来，你不来，我~偏要来！你问我这里有什么？你有的我有，你没有的我也有！

Java面试Question C：出去玩怎么能不提前夜观天象？

一句青春没有售价，你票也不买，直接硬座直达拉萨！结果刚到拉萨电闪雷鸣，惶恐如斯，这趟又白来了，当你还在内耗还在出行焦虑，隔壁搞Java的二码子（就是CV人家的代码还不知道怎么改BUG的那种，代码的二道贩子）早就卡也打完了，照也拍光了，简直满满的正能量！为什么同样优秀的你会如此忧虑，我猜你缺少一样东西，如果没说错的活肯定不是缺少根筋，你是少了一样天气查询的工具，我猜的没错吧！
你每次出门都碰不上好天气，你每次碰上好天气这天气又说变就变，你每次碰上说变就变的天气不知道咋办，你不知道咋办就算了你只能选择里面回家！你好惨啊！要不你来我们这里吧，我们告诉你怎么样，你来一个地方你发现天气不好，你就开开心心用我们的天气地图，你只要在会用手机，你会在手机上点来点去，所有你那么棒，你已经超过80%的同龄人了，你竟然如此优秀。你在手机上点来点去那你就可以快速找到其他天气好的地方，你就出发吧先别回家了，来都来了！