【Html】用CSS定义咖啡 - 咖啡配料展示
显示效果
代码
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CodePen - For The Love Of Coffee</title><link rel="stylesheet" href="./style.css"></head><body><!-- partial:index.partial.html --><div class="options"><!--<div>黑咖啡/Black - 纯咖啡 15-20克的咖啡粉和200-250毫升的水</div> --><!--<div>澳白/馥芮白/平白/馥芮白/醇艺白/澳瑞白/小白咖啡/澳芮白/Flat White - 180ml杯装 杯中加入双份浓缩（前中段18g）➕上方加入热牛奶（150ml牛奶打发成超薄奶泡-约0.3-0.5cm厚度）➕可拉花/不拉花出品</div> --><!--<div>拿铁/Latte - 300ml杯装 杯中加入双份浓缩咖啡（36g）➕上方加入热牛奶（250ml牛奶蒸汽打发成薄奶泡-约0.5-0.7cm厚度）➕可拉花出品
（注：在咖啡液中加入香草/焦糖/榛果等糖浆＝香草/焦糖/榛果拿铁等）</div>--><!--<div>卡布奇诺/Cappuccino - 200ml杯装 杯中加入双份浓缩咖啡（36g）➕上方加入热牛奶（180ml牛奶蒸汽打发成厚奶泡-约0.7-1cm厚度）</div>--><!--<div>美式咖啡/Americano - 300ml杯装 杯中加入70℃热水（210ml）➕上方淋双份浓缩咖啡（36g）</div>--><!--<div>意式浓缩咖啡/Espresso -90ml杯装 是利用咖啡机高温（90-93℃）高压（9bar）下，快速（20-30s）制作的一种饮品，份量偏少（约30ml），浓度偏高。
单份：7-9g咖啡粉——萃取20-30g/ml咖啡液
双份：16-18g咖啡粉——萃取30-60g/ml咖啡液
大家可以根据自己喜欢的风味去定萃取的液量，如①粉液比1：1——18g粉萃取18g咖啡液
（萃取前中段精华部分，浓度偏高，萃取的物质偏少，减少后段的苦味）
②粉液比1：2——18g粉萃取36g咖啡液
（萃取前中段精华部分，浓度适中，萃取的物质适中，减少后段的苦味）
③粉液比1：3——18g粉萃取54g咖啡液
（萃取前中后段全部部分，浓度偏低，萃取物质偏多，风味平衡）</div>--><!--<div>双倍浓缩咖啡/多皮欧咖啡/Doppio 双倍浓缩咖啡/Double Espresso/- 两倍浓度的普通浓缩咖啡</div>--><!--<div>可塔朵/Cortado - 在三分之二的意式縮咖啡中加上三分之一的熱牛奶或者奶油、炼乳</div>--><!--<div>玛奇朵/Macchiato - 90ml杯装 杯中加入单份浓缩咖啡（30ml）➕上方铺少量热奶泡</div>--><!--<div>摩卡/Mocha - 将浓缩咖啡和牛奶倒入杯中7分满、挤上奶油后淋上巧克力酱即可。</div>--><!--<div>阿芙佳朵/Affogato</div> - 把蒸馏咖啡均匀地洒在冰淇淋上，同时可用巧克力等来做装饰--><!--<div>康宝蓝/意式浓缩加鲜奶油/Con Panna - 90ml杯装 杯中加入单份浓缩咖啡（30ml）➕上方挤上奶油</div>--><!--<div>爱尔兰咖啡/Irish - 用酒精灯加热焦糖和威士忌，待融化后加入咖啡，最后注入鲜奶油，比例10：5</div>--><!--<div>牛奶咖啡/欧蕾咖啡/Café Au Lait - 一杯浓缩咖啡并加入热牛奶</div>--><div id="Black">①黑咖啡</div><div id="Flat-White">②澳白</div><div id="Latte">③拿铁</div><div id="Cappuccino">④卡布奇诺</div><div id="Americano">⑤美式咖啡</div><div id="Espresso">⑥意式浓缩咖啡</div><div id="Doppio">⑦双倍浓缩咖啡</div><div id="Cortado">⑧可塔朵</div><div id="Macchiato">⑨玛奇朵</div><div id="Mocha">⑩摩卡</div><div id="Affogato">⑪阿芙佳朵</div><div id="Con-Panna">⑫康宝蓝</div><div id="Irish">⑬爱尔兰咖啡</div><div id="cafe-au-lait">⑭牛奶咖啡</div><!-- vv repeats vv --><div id="Black">①黑咖啡</div><div id="Flat-White">②澳白</div><div id="Latte">③拿铁</div><div id="Cappuccino">④卡布奇诺</div><div id="Americano">⑤美式咖啡</div><div id="Espresso">⑥意式浓缩咖啡</div><div id="Doppio">⑦双倍浓缩咖啡</div><div id="Cortado">⑧可塔朵</div><div id="Macchiato">⑨玛奇朵</div><div id="Mocha">⑩摩卡</div><div id="Affogato">⑪阿芙佳朵</div><div id="Con-Panna">⑫康宝蓝</div><div id="Irish">⑬爱尔兰咖啡</div><div id="cafe-au-lait">⑭牛奶咖啡</div><div id="Black">①黑咖啡</div><div id="Flat-White">②澳白</div><div id="Latte">③拿铁</div><div id="Cappuccino">④卡布奇诺</div><div id="Americano">⑤美式咖啡</div><div id="Espresso">⑥意式浓缩咖啡</div><div id="Doppio">⑦双倍浓缩咖啡</div><div id="Cortado">⑧可塔朵</div></div><div class="wrapper"><div class="shadow"></div><div class="title">拿铁</div><div class="cup latte"><div class="contents"><div class="gelato">冰淇淋(意)</div><div class="foam">奶盖/奶泡</div><div class="cream">奶油</div><div class="steamed-milk">蒸奶</div><div class="milk">牛奶</div><div class="chocolate">巧克力</div><div class="sugar">糖</div><div class="whiskey">威士忌</div><div class="water">水</div><div class="coffee">咖啡</div><div class="espresso"><span>(2) </span> 意式浓缩咖啡</div></div></div></div><!-- partial --><script src="./script.js"></script></body>
</html>script.js
let options = document.querySelectorAll(".options div");
let cup = document.querySelector(".cup");
let title = document.querySelector(".title");function formatOption(option) {return option.toLowerCase().replace(/\s/g, "-");
}options.forEach((option) => {option.addEventListener("click", function() {options.forEach((opt) => {console.log(opt);//cup.classList.remove(formatOption(opt.textContent));cup.classList.remove(formatOption(opt.id));});//cup.classList.add(formatOption(this.textContent));cup.classList.add(formatOption(this.id));title.innerHTML = this.textContent;console.log(this);});
});
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{box-sizing: border-box;
}
html, body {height: 100%;overflow: hidden;
}
body {display: flex;flex-direction: row;justify-content: center;align-items: center;margin: 0;font-family: Poppins;background: #cebca6;
}
@media screen and (max-height: 500px) { body > * { scale: 0.8 };}
@media screen and (max-height: 430px) { body > * { scale: 0.7 } .options { translate: 259px 2px !important;}
}
.options {position: relative;width: 200px;display: flex;flex-direction: column;text-align: left;background: rgba(0,0,0, 0.04);padding: 12px;
}
.options > div {transition: all 0.1s ease-in-out;
}
.options > div:hover {background: rgba(255,255,255, 1);cursor: pointer;font-size: 22px;box-shadow: 0 0 2px 0px rgba(0,0,0,0.2),0 0 3px 2px rgba(255, 255, 255, 0.1),0 0 3px 0 rgba(0,0,0, 0.1);color: #462814be;
}
.options:hover > * {animation-play-state: paused;
}.options {background: none;height: fit-content;position: absolute;left: 0;right: 0;top: 0;bottom: 0%;margin: auto;translate: 259px 12px;transform-origin: -157px 107%;rotate: -100deg;
}
@keyframes rotateC {0% {rotate: 0deg;}100% {rotate: 360deg;}
}
.options > div {--_speed: 4;color: #4628148e;position: absolute;border-radius: 4px;background-color: rgba(255,255,255, 0.2);transform-origin: -145px 50%;padding: 4px 12px 1px 22px;-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10 and IE 11 */user-select: none; /* Standard syntax */animation: rotateC calc(var(--_speed) * 36s) linear infinite;
}.options > div:nth-child(1) { animation-delay: calc(var(--_speed) * -1s); }
.options > div:nth-child(2) { animation-delay: calc(var(--_speed) * -2s); }
.options > div:nth-child(3) { animation-delay: calc(var(--_speed) * -3s); }
.options > div:nth-child(4) { animation-delay: calc(var(--_speed) * -4s); }
.options > div:nth-child(5) { animation-delay: calc(var(--_speed) * -5s); }
.options > div:nth-child(6) { animation-delay: calc(var(--_speed) * -6s); }
.options > div:nth-child(7) { animation-delay: calc(var(--_speed) * -7s); }
.options > div:nth-child(8) { animation-delay: calc(var(--_speed) * -8s); }
.options > div:nth-child(9) { animation-delay: calc(var(--_speed) * -9s); }
.options > div:nth-child(10) { animation-delay: calc(var(--_speed) * -10s); }
.options > div:nth-child(11) { animation-delay: calc(var(--_speed) * -11s); }
.options > div:nth-child(12) { animation-delay: calc(var(--_speed) * -12s); }
.options > div:nth-child(13) { animation-delay: calc(var(--_speed) * -13s); }
.options > div:nth-child(14) { animation-delay: calc(var(--_speed) * -14s); }
.options > div:nth-child(15) { animation-delay: calc(var(--_speed) * -15s); }
.options > div:nth-child(16) { animation-delay: calc(var(--_speed) * -16s); }
.options > div:nth-child(17) { animation-delay: calc(var(--_speed) * -17s); }
.options > div:nth-child(18) { animation-delay: calc(var(--_speed) * -18s); }
.options > div:nth-child(19) { animation-delay: calc(var(--_speed) * -19s); }
.options > div:nth-child(20) { animation-delay: calc(var(--_speed) * -20s); }
.options > div:nth-child(21) { animation-delay: calc(var(--_speed) * -21s); }
.options > div:nth-child(22) { animation-delay: calc(var(--_speed) * -22s); }
.options > div:nth-child(23) { animation-delay: calc(var(--_speed) * -23s); }
.options > div:nth-child(24) { animation-delay: calc(var(--_speed) * -24s); }
.options > div:nth-child(25) { animation-delay: calc(var(--_speed) * -25s); }
.options > div:nth-child(26) { animation-delay: calc(var(--_speed) * -26s); }
.options > div:nth-child(27) { animation-delay: calc(var(--_speed) * -27s); }
.options > div:nth-child(28) { animation-delay: calc(var(--_speed) * -28s); }
.options > div:nth-child(29) { animation-delay: calc(var(--_speed) * -29s); }
.options > div:nth-child(30) { animation-delay: calc(var(--_speed) * -30s); }
.options > div:nth-child(31) { animation-delay: calc(var(--_speed) * -31s); }
.options > div:nth-child(32) { animation-delay: calc(var(--_speed) * -32s); }
.options > div:nth-child(33) { animation-delay: calc(var(--_speed) * -33s); }
.options > div:nth-child(34) { animation-delay: calc(var(--_speed) * -34s); }
.options > div:nth-child(35) { animation-delay: calc(var(--_speed) * -35s); }.wrapper {position: relative;width: 300px;height: 300px;display: flex;justify-content: center;align-items: center;border-radius: 50%;background-color: #9b8c83;background: repeating-linear-gradient( 45deg, #9c7154, #ffdfca 8px, #fff0 8px, #fff0 25px ), repeating-linear-gradient( -45deg, #7a5943, #ffcaa6 8px, #fff0 8px, #fff0 25px );background-color: #533723;box-shadow: 0 0 1px 1px #7a665a,0 0 4px 2px #9b8c83,inset 0 -630px 20px -500px #c59473,inset 0 -680px 40px -500px #9c7154, inset 0 -700px 0 -500px #775843;-webkit-user-select: none;-ms-user-select: none; user-select: none;
}
.shadow {position: absolute;top: 69.7%;left: 12%;width: 55%;height: 22px;border-radius: 50%;box-shadow: inset 0 0 0 100px rgba(0,0,0, 0.05);background:repeating-linear-gradient( -45deg, #0002, #0002 1px, #0000 1px, #0000 3px),repeating-linear-gradient( 45deg, #0002, #0002 1px, #0000 1px, #0000 3px );
}
.title {height: fit-content;width: fit-content;position: absolute;left: 0;right: 0;bottom:7%;margin: auto;display: flex;color: rgb(255, 255, 255);text-align: center;font-size: 20px;text-shadow: 0 0 3px rgba(255,255,255, 0.5), 0 0px 1px rgba(0,0,0, 0.7);
}
.cup {width: 160px;height: 162px;position: relative;
}
.contents {height: 100%;display: flex;flex-direction: column;justify-content: end;background: rgba(247, 247, 247, 0.9);clip-path: path('m 0 0 q 4.59 145.8 34.425 155.52 c 29.835 8.1 68.85 8.1 96.39 0 q 29.835 -9.72 29.835 -155.52 C 143 11 16 13 0 0 Z');
}
.contents::before {content: '';display: block;position: absolute;width: 100%;height: 100%;z-index: 1000;box-shadow: inset -18px 0px 4px -10px rgba(255,255,255, 0.7),inset 42px -22px 12px -10px rgba(0,0,0, 0.03),inset 0 -22px 12px -10px rgba(0,0,0, 0.2),inset 20px 0 10px -10px rgba(0,0,0, 0.2);
}
.cup::before {content: '';display: block;position: absolute;z-index: 2;top: -10px;width: 100%;height: 20px;background: linear-gradient(63deg, rgba(253, 253, 253, 0.7) 9%, rgba(238, 238, 238, 0.7) 100%);border-radius: 50%;box-shadow: 0 1px 2px 0px rgba(0,0,0, 0.05),inset 0 0 1px 2px rgba(0,0,0, 0.05);
}
.cup::after {content: '';background: #fff;width: 0%;height: 0%;scale: 1.15 0.7;transform-origin: 0% 0%;z-index: 1;position: absolute;top: 0;
}.contents :is(.foam, .cream, .steamed-milk, .milk, .chocolate, .sugar, .whiskey, .water, .gelato, .espresso, .coffee) {width: 100%;height: 0px;display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 50% / 20%;font-size: 12px;transition: all 1s ease-in-out;opacity: 0.94;position: relative;margin-top: 0;padding-top: 0;color: rgba(0,0,0, 0);margin: 0 auto;
}
.contents :is(.foam, .cream, .steamed-milk, .milk, .chocolate, .sugar, .whiskey, .water, .espresso, .coffee)::before {content: '';display: block;width: 100%;height: 26px;border-radius: 50%;position: absolute;top: -10%;transition: all 1s ease-in-out;opacity: 0.1;background: white;z-index: inherit;
}
.contents :is(.foam, .cream, .steamed-milk, .milk)::before {background: rgb(141, 141, 141);
}.contents .foam { background: #ffffff; z-index: 12;}
.contents .cream { background: #fffbe7; z-index: 11;}
.contents .steamed-milk { background: #fffcf8; z-index: 10;}
.contents .milk { background: #f8f2e8; z-index: 9;}
.contents .chocolate { background: #47260a; z-index: 8;}
.contents .sugar { background: #ffffff; z-index: 7;}
.contents .whiskey {background: rgba(207, 129, 39, 0.8); color: #fff; z-index: 6;}
.contents .water { background: #e5f7ff; z-index: 5;}
.contents .coffee { background: #5a341a; z-index: 4;}
.contents .gelato { background: #fcf9ea; z-index: 4;}
.contents .espresso { background: #462814; z-index: 3;}
.contents .espresso span { display: none;}/* Black Coffee */
.black .coffee {height: 90%;border-radius: 50% / 10%;padding-top: 0px;color: rgba(255,255,255, 1);
}
.black .coffee::before {opacity: 0.1;background: white;top: 0%;
}/* Latte */
.latte .espresso {color: rgba(255,255,255, 1);height: 30%;padding-top: 12px;margin-top: -20px;
}
.latte .steamed-milk {color: rgba(0,0,0, 1);height: 60%;margin-top: -20px;padding-top: 12px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.latte .foam {color: rgba(0,0,0, 1);height: 24%;padding-top: 22px;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.latte .foam::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}/* Flat White */
.flat-white .espresso {color: rgba(255,255,255, 1);height: 40%;margin-top: -21px;padding-top: 20px;
}
.flat-white .espresso::before {background: none;
}
.flat-white .steamed-milk {color: rgba(0,0,0, 1);height: 40%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.flat-white .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}/* Cappuccino */
.cappuccino .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}
.cappuccino .espresso::before {top: -33%;
}
.cappuccino .steamed-milk {color: rgba(0,0,0, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}
.cappuccino .foam {color: rgba(0,0,0, 1);height: 40%;padding-top: 20px;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.cappuccino .foam::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}/* Americano */
.americano .water {color: rgba(0,0,0, 1);height: 60%;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.americano .water::before{background: #eff9fd;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;top: 0;
}
.americano .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}/* Espresso */
.cup.espresso .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}
.cup.espresso .espresso::before{background: #9e4a12;opacity: 0.4;
}/* Doppio */
.doppio .espresso {color: rgba(255,255,255, 1);height: 40%;padding-top: 10px;
}
.doppio .espresso::before{background: #9e4a12;opacity: 0.4;
}
.doppio .espresso span {display: contents;
}/* Cortado */
.cortado .steamed-milk {color: rgba(0,0,0, 1);height: 30%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.cortado .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.cortado .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}/* Macchiato */
.macchiato .foam::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.macchiato .foam {color: rgba(0,0,0, 1);height: 30%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.macchiato .espresso {color: rgba(255,255,255, 1);height: 30%;margin-top: -20px;padding-top: 20px;
}/* Mocha */
.mocha .steamed-milk {color: rgba(0,0,0, 1);height: 40%;margin-top: -20px;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.mocha .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.mocha .chocolate {color: rgba(255,255,255, 1);height: 25%;margin-top: -20px;padding-top: 20px;border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
.mocha .espresso {color: rgba(255,255,255, 1);height: 40%;margin-top: -21px;padding-top: 20px;
}
.mocha .espresso::before {background: none;
}/* Affogato */
.affogato .gelato {opacity: 1;color: rgba(0,0,0, 1);height: 30%;padding-top: 10px;width: 60%;border-radius: 100% 100% 50% 50%;border: 1px dashed rgba(75,75,75, 0.5);border-bottom: none;
}
.affogato .espresso {margin-top: -16px;color: rgba(255,255,255, 1);height: 30%;padding-top: 10px;
}
.affogato .espresso::before{background: #9e4a12;opacity: 0.4;
}/* Con Panna */
.con-panna .cream {color: rgba(0,0,0, 1);height: 24%;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.con-panna .cream::before {background: #fcf9ea;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.con-panna .espresso {margin-top: -16px;color: rgba(255,255,255, 1);height: 40%;padding-top: 10px;
}
.con-panna .espresso::before {opacity: 0;
}/* Cafe Au Lait */
.cafe-au-lait .steamed-milk {color: rgba(0,0,0, 1);height: 50%;padding-top: 10px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.cafe-au-lait .steamed-milk::before {background: #faf8f5;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.cafe-au-lait .coffee {margin-top: -16px;color: rgba(255,255,255, 1);height: 50%;padding-top: 10px;
}/* Irish */
.irish .cream {color: rgba(0,0,0, 1);height: 24%;padding-top: 20px;border-top: 1px dashed rgba(75, 75, 75, 0.3);
}
.irish .cream::before {background: #fcf9ea;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.irish .sugar {color: rgba(0,0,0, 1);height: 22%;margin-top: -18px;padding-top: 20px;
}
.irish .sugar::before {background: #fcf9ea;border-bottom: 1px dashed rgba(75, 75, 75, 0.5);opacity: 1;
}
.irish .whiskey {color: rgba(255,255,255, 1);height: 30%;margin-top: -18px;padding-top: 10px;
}
.irish .coffee {margin-top: -18px;color: rgba(255,255,255, 1);height: 40%;padding-top: 10px;
}
.irish .coffee::before {opacity: 0;
}
附件
上述代码在 CodePen - For The Love Of Coffee 基础上修改
相关文章：
【Html】用CSS定义咖啡 - 咖啡配料展示
显示效果 代码 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>CodePen - For The Love Of Coffee</title><link rel"stylesheet" href"./style.css">&l…...
Learn Prompt-Prompt 高级技巧:AutoGPT
AutoGPT 是一个由Toran Richards创建的流行开源项目。它利用GPT4作为大脑，结合langchain的链接思想，连接各种工具和互联网资源，来完成人类给予的任务。您只需要设定一个目标，AutoGPT就会自主规划并逐步执行任务。如果遇到问题&…...
IntelliJ IDEA - Maven 在控制台Maven编译正常，但是在IDEA中不正常，表现不一致
文章目录 现象原因解决验证 现象 一个Maven项目，当导入到IDEA后，无法在IDEA中正常的编译和下载jar依赖，类似下面的截图。 但是在Windows控制台却可以正常编译，类似下面的截图。 CMD执行：mvn clean install -Dmaven.te…...
list 用法与模拟
list 用法 list list 模拟 #pragma once #include <assert.h> namespace sjy {//链表节点template <typename T>struct __list_node{__list_node(const T& val T()):_prev(nullptr),_next(nullptr),_val(val){}/*成员变量*/__list_node<T>* _prev;__…...
【操作系统笔记】进程和线程
进程的组成 进程要读取 ELF 文件，那么： ① 要知道文件系统的信息，fs_struct② 要知道打开的文件的信息，files_struct 一个进程除了需要读取 ELF 文件外，还可以读取其他的文件中的数据。 进程中肯定有一个 mm_struct…...
一短文读懂编译型与解释型编程语言
在编程世界中，我们经常听到编译型语言和解释型语言这两个术语。它们是什么，有什么区别呢？让我们一起来探讨一下。 编译型语言 编译型语言，如C、Java等，是一种需要先被编译成机器代码，然后才能被执行的语言…...
修炼离线：（三）sqoop插入hbase 报错权限问题
一：报错现象。 二：解决方式。 方法一：修改文件所有者。 切换hadoop用户：export HADOOP_USER_NAMEhdfs hadoop fs -chown -R root:root /方法二：修改权限 切换hadoop用户：export HADOOP_USER_NAMEhdfs ha…...
【JavaEE】多线程（四）
多线程（四） 在开始讲之前，我们先来回顾回顾前三篇所讲过的内容~ 线程的概念 并发编程，多进程，比较重，频繁创建销毁，开销大 Thread的使用 创建线程 继承Thread实现Runnable继承Threadÿ…...
第一章：最新版零基础学习 PYTHON 教程（第七节 - Python 中的语句、缩进和注释）
在这里，我们将讨论Python中的语句、Python中的缩进和Python中的注释。我们还将讨论 Python 语句、Python 缩进、Python 注释的不同规则和示例，以及“文档字符串”和“多行注释”之间的区别。 Python中的语句是什么 Python语句是Python 解释器可以执行的指令。Python 语言中…...
C++ 【2】
1.指针基础 字符：C 一个字符占一个字节 在C中 << 这个为插入运算符 >> 这个为提取运算符 一个变量的地址称为该变量的指针；如果在程序中定义了一个变量或者数组， 那么，这个变量或数组的地址（指针…...
Java学习笔记40——Lambda表达式
Lambda表达式 Lambda表达式函数式编程思想概述Lambda表达式的标准格式Lambda表达式练习练习1练习2练习3 Lambda表达式的省略模式Lambda表达式的注意事项Lambda表达式与接口的区别 Lambda表达式 函数式编程思想概述 面向对象思想强调“必须通过对象的形式做事” 在函数式思想中…...
【考研数学】线性代数第五章 —— 特征值和特征向量（3，矩阵对角化理论）
文章目录 引言三、矩阵对角化理论3.1 一般矩阵的相似对角化3.2 实对称矩阵的相似对角化3.2.1 实对称矩阵相似对角化定理3.2.2 实对称矩阵相似对角化过程 写在最后 引言 承接前文，我们来看看矩阵的对角化理论。 我们前面提到对角化是在矩阵相似那里，若存…...
【计算机网络】IP数据报首部格式、最大传输单元MTU、最大分段大小MSS
创作不易，本篇文章如果帮助到了你，还请点赞 关注支持一下♡>𖥦<)!! 主页专栏有更多知识，如有疑问欢迎大家指正讨论，共同进步！ 更多计算机网络知识专栏：计算机网络🔥 给大家跳段…...
shell脚本之文件读写
shell脚本之文件读写 1、读取文件内容并打印2、将内容写入文件3、追加内容到文件末尾4、读取文件内容到变量中5、逐行读取文件内容并处理6、逐行追加内容到文件末尾7、获取文件行数8、获取文件最后一个单词 Shell 脚本读写文件的方法有很多种，下面是一些常见的方法&…...
SAP 刷新Fiori Apps缓存的方法（解决修改CDS后Fiori无法重载新配置）
1. 问题 修改CDS Annotation后，基于Fiori Element发布的Fiori App无法应用新的界面 2. 解决办法 2319491 - How to clean up the cache after applying changes that affect SAP Fiori apps刷新Frontend： SE38： /UI5/APP_INDEX_CALCULATE…...
如何在 Excel 中计算日期之间的天数
计算两个日期之间的天数是 Excel中的常见操作。无论您是规划项目时间表、跟踪时间还是分析一段时间内的趋势，了解如何在 Excel 中查找日期之间的天数都可以提供强大的日期计算功能。 幸运的是，Excel 提供了多种简单的方法来获取两个日期之间的天数。继续…...
Java高级-注解
注解 1.介绍2.元注解3.注解的解析4.注解的应用场景 1.介绍 注解 Annotation 就是Java代码里的特殊标记，作用是让其他程序根据注解信息来决定什么是执行该程序注解：注解可以在类上、构造器上、方法上、成员变量上、参数上等位置 自定义注解 /*** 自定…...
wabp.m 代码注释（便于算法快速理解）
算法效果： 波峰和起点检测效果： function [r,pk] = wabp(Araw, Offset,Scale, Fs) % r = wabp(Araw,Offset,Scale, Fs); % Input: Araw (125Hz sampled) waveform in wfdb-MIT format, % Offset, Scale % Araw = 血压波形 % Offset=偏移（信号减去或者加上偏移恢复成…...
数据库数据恢复-SQL SERVER数据库文件损坏的故障表现数据恢复方案
SQL SERVER数据库故障类型： SQL SERVER数据库MDF（NDF）或LDF损坏。 SQL SERVER数据库故障原因： 1、数据库正在操作过程中，机器突然断电。 2、人为误操作。 SQL SERVER数据库MDF（NDF）或LDF损坏的…...
flink中cpu消耗的大户-序列化和反序列化
背景 故事的起源来源于这样一篇关于序列化/反序列化优化的文章https://www.ververica.com/blog/a-journey-to-beating-flinks-sql-performance,当把传输的对象从String变成byte[]数组后，QPS直接提升了50% flink的网络数据交换优化 在flink中对于每个算子之间的跨…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
【Linux】Linux安装并配置RabbitMQ
目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...
6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙
Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...
CSS3相关知识点
CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...
负载均衡器》》LVS、Nginx、HAproxy 区别
虚拟主机 先4，后7...