定义应用程序逻辑分隔中的组件。
我有一个博客应用程序,其中主页显示所有作者的博客文章以及博客文章的图像及其个人资料图片...但是图像没有显示,当我检查时...
所有服务都是用 Golang 编写的。我想发送 /register 请求到 auth 服务,但是当我发送 POST 请求 Kong 返回 404 (我可以发送请求到 http:localhost:9094 服务正在工作)。 我是一个...
在nodeJs中添加Joi验证,以限制endDate不超过startDate之后3年。 例子 : 开始日期 2024-03-29 , 最大结束日期应为:2027-03-29。 我试过: const maxEndDate = Joi.ref('
如何解决问题:“at process.processTicksAndRejections (node:internal/process/task_queues:95:5)”?
我想将令牌发送回用户以重置其密码,但我收到此错误: 错误:发送电子邮件时出错,请稍后重试 在exports.forgotPassword (C:\Users\Abdure...
我需要将xml数据转换为json格式。 我使用 django 作为后端,并且我不太习惯从 xml 解析数据,所以我考虑将数据转换为 json 然后解析它。 xml
我是网络开发新手。我通过 Angular 框架构建了我的前端部分,它运行良好,我的导航没问题,我的图像和内容也很好,到引导程序等库的链接也一样。 但是...
我想让用户上传一些Excel文件,首先我尝试将它们保存在media/uploaded/int:projectid中(如果尚未创建,我想创建它)。 但是当我尝试上传它时...
我有3张原理图 预订方案、购物车方案和订单方案。购物车包含书籍列表及其数量。订单模式是 _id Cart.product._id 的数组。我如何弹出...
有没有更好的方法可以像django后端中的history.back()那样?
在 Django 中,我有“表单视图(GET)”和“操作视图(POST)” 如果操作视图中存在验证错误或任何其他错误, 我希望浏览器返回到上一个表单页面...
如何在 Spring Boot API 中启用 https 请求?
我将 Spring Boot API 配置为通过 SSL 自签名证书接收 https 请求。当我通过邮递员请求时它可以工作,但是当我们的前端应用程序(也带有 SSL 证书)ma...
部署在 Kubernetes 上时,nestjs 混合微服务的主机名应该是什么
技术堆栈 - Nestjs-2 微服务 kubernetes-AWS EKS 入口-nginx 杂交种 const app = 等待 NestFactory.create(AppModule); const 微服务 = app.connectMicroservice 技术堆栈 - Nestjs-2 微服务 kubernetes-AWS EKS 入口 - nginx 混合动力 const app = await NestFactory.create(AppModule); const microservice = app.connectMicroservice<MicroserviceOptions>( { transport: Transport.TCP, options: { host: process.env.TCP_HOST, port: parseInt(process.env.TCP_EVALUATION_PORT), }, }, { inheritAppConfig: true }, ); await app.startAllMicroservices(); await app.listen(parseInt(config.get(ConfigEnum.PORT)), '0.0.0.0'); 环境 TCP_HOST: '0.0.0.0' TCP_CORE_PORT: 8080 TCP_EVALUATION_PORT: 8080 错误 "connect ECONNREFUSED 0.0.0.0:8080" 我是否需要在 docker 中公开此端口或将其添加到安全组中的某个位置? 或者可能需要通过不同的主机? 注意:应用程序已正确部署,没有任何错误,HTTP Rest API 似乎工作正常,但 TCP @messagePattern 则不然! 谢谢 创建一个服务来匹配您要连接的实例并使用服务名称。 基本上在混合应用程序中,main.ts 配置如下 - 服务1 const app = await NestFactory.create(AppModule); const microservice = app.connectMicroservice<MicroserviceOptions>( { transport: Transport.TCP, options: { host: '0.0.0.0', port: 6200, }, }, { inheritAppConfig: true }, ); await app.startAllMicroservices(); await app.listen(6300, '0.0.0.0'); 在客户端 ClientsModule.register([ { name: 'service1', transport: Transport.TCP, options: { host: 'service1', port: 6200, }, }, ]), 现在面临同样的问题。你找到解决办法了吗?
为什么找不到 Django 管理页面和其他页面的 CSS 文件和图像?
即使在正确的文件路径中搜索,GET 方法也会在控制台中返回 404。 编辑:我发现另一篇文章说我应该在 settings.py 文件中打开调试。它成功了!...
在使用 Fragment IFC Streaming 处理 ifc.js 组件时,我在后端处理文件时遇到问题,我需要知道需要将哪些文件放入后端才能进行流式传输? `让文件流=...
TYPO3 12.4 后端登录错误LimitInternalRecursion
将网站复制到本地计算机后,登录总是失败,出现 500 错误。 PHP错误日志显示 [2024 年 4 月 2 日星期二 16:25:24.463180] [核心:错误] [pid 18408] [客户端 127.0.0.1:46504] AH0...
所以,我正在用 python 开发这个应用程序,当我尝试在浏览器中显示一些 html 时,我收到此错误: 模板不存在,位于 /xPharma/hello/ 你好.html 请求方式:GET 请求网址:...
我有一个用 C++ 编写的 TCP 服务器和一个在客户端的 React.js 应用程序。 您需要知道的是 中的 send() 方法向客户端发送一个空字符串而不是...
我开发了这个网站 - https://snotes00.vercel.app 但我在向 vercel 后端发送请求时遇到问题 - POST https://snotes00.vercel.app/server/login net::ERR_ABORTED 405 (方法不是
<div> </div> <pre><code><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <title>Game Cards App</title> <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png"> <style> #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; perspective: 1000; } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url(); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li id='spider' class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li id='batman' class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li id='guard' class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li id='shazam' class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li id='flash' class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li id='strange' class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div> </body> <script> var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).addClass('active'); thisFlipper.css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).removeClass('active'); flipper.css({ 'transform': 'none', '-webkit-transform': 'none', '-ms-transform': 'none' }).removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); </script> <script> <!-- HOVER FOR TRAILER --> var hoverTimeout; function onHover() { const currentCard = $(this); hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) } function onHoverTime() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }; function setupHoverEffect(cardId) { console.log(`setupHoverEffect function is called for ${cardId}`); $(`#${cardId}`).hover(function() { // Call the existing onHover function when the mouse hovers over the card onHover.call(this); }, function() { // Call the existing onHoverTime function when the mouse leaves the card onHoverTime.call(this); }); } setupHoverEffect("batman"); setupHoverEffect("flash"); setupHoverEffect("spider"); setupHoverEffect("shazam"); setupHoverEffect("flash"); setupHoverEffect("strange"); </script> <script> var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); $(".card__front").click(function() { flipSound.currentTime = 0; flipSound.play(); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { if (!cardFlags[cardId]) { startAnimation(div); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // Portal effect </script> <script> // Hiding and showing of loading animation function hideLoadingAnimation() { var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { hideLoadingAnimation(); }; </script> <script> // The conditions of the hover function. $('.card').on( "mouseenter", onHover).on( "mouseleave", onHoverTime ); // hover events removing and assigning $(document.body).on('click', function(){ if ($("#batman").off( "mouseenter", onHover)){ $('#batman, #flash').hover(onHover, onHoverTime); console.log('yes'); } }) // overlap boundary conditions for hover on off $(".card").click(function(){ let cord = document.getElementsByClassName('active')[1].style.transform; [cx,cy,...rest]= cord.slice(12).split('px, '); console.log(`cx: ${cx}, cy: ${cy}`); if ((cy<=300)&&(cy>=100)||((cy>(-300))&&(cy<(-60)))){ $("#batman").off( "mouseenter", onHover); $("#flash").off( "mouseenter", onHover); console.log('offed'); let hoverTimeout; } else{ console.log('on'); $('#batman, #flash').hover(onHover, onHoverTime); } }); </script> </html> </code></pre> <p>我目前有 6 张带有 ID 的卡片:<pre><code>spider</code></pre>、<pre><code>batman</code></pre>、<pre><code>guard</code></pre>、<pre><code>shazam</code></pre>、<pre><code>flash</code></pre>、<pre><code>strange</code></pre>。 (我计划增加数量)对于这些卡,我有常见的 <pre><code>onHover()</code></pre> 和 <pre><code>onHoverTime()</code></pre> 功能,可以通过悬停播放视频预告片并重置它们。我希望它对每张卡独立工作。 如果我需要提供更多细节,我可以说,当您将鼠标放在每张卡的前面等待 5 秒时,就会播放预告片,但是您在卡上等待的时间越长,预告片在该卡上的进度就越多当悬停事件发生在另一张卡上时。所以它们作为一个整体工作。</p> <p>但是,我想要的是每张卡的悬停拖车功能都针对特定卡起作用并且不会相互影响。 (预告片应在每张卡的每次悬停事件上从 0:00 重新开始。)</p> <p>我想添加以下方法,但它没有按照我想要的方式工作:</p> <pre><code>function setupHoverEffect(cardId) { console.log(`setupHoverEffect function is called for ${cardId}`); $(`#${cardId}`).hover(function() { // Call the existing onHover function when the mouse hovers over the card onHover.call(this); }, function() { // Call the existing onHoverTime function when the mouse leaves the card onHoverTime.call(this); }); } setupHoverEffect("spider"); setupHoverEffect("batman"); setupHoverEffect("guard"); setupHoverEffect("shazam"); setupHoverEffect("flash"); setupHoverEffect("strange"); </code></pre> <p>另外,我想如果卡牌数量增加这么多,也不会难以管理。对于添加的新卡重复 setupHoverEffect() 可能不正确。我该如何解决这个问题?</p> <p><strong>问题的视觉表示:</strong></p> <p><a href="https://i.stack.imgur.com/8rS1c.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzhyUzFjLnBuZw==" alt=""/></a></p> <p><a href="https://i.stack.imgur.com/leANr.jpg" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2xlQU5yLmpwZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>发生了很多问题,但我会尽力解决最重要的问题。我注意到的第一件事是,所有视频都默认设置为自动播放,因此它们都会在页面加载时运行:</p> <pre><code><iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> </code></pre> <p>在上面的代码中,看到src属性中有查询参数<pre><code>autoplay=1</code></pre>,我们应该首先从所有iframe中删除它们。</p> <p>下一个问题是你查询 DOM 错误:</p> <pre><code>function onHover() { const currentCard = $(this); hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); ... </code></pre> <p>类 <pre><code>.iframe</code></pre> 不存在,因为您为 iframe 分配了 <pre><code>.frame</code></pre> 类。但要解决这个问题,我们只需通过标签名称选择 DOM,例如:</p> <pre><code>currentCard.find('iframe').show(); </code></pre> <p>然后,由于我们已经删除了自动播放查询参数,所以我们需要在 <pre><code>hover</code></pre> 事件发生时重新添加它们,我们可以通过将 <pre><code>autoplay=1</code></pre> 附加到查询参数来触发播放,但是当 <pre><code>hover</code></pre> 事件发生时像这样<pre><code>onHover()</code></pre> 功能:</p> <pre><code>currentCard.find('iframe').attr("src", src + '&autoplay=1'); </code></pre> <p>最后,我们需要修复 <pre><code>clearTimeout</code></pre>,看起来 <pre><code>setTimeout</code></pre> 被触发了多次,我不知道为什么,但基本上我们可以将 <pre><code>timeout</code></pre> id 存储到一个对象中,这样我们就可以存储并清除所有这些:</p> <pre><code>var hoverTimeout = {}; // an object to store timeout id </code></pre> <p>然后更新<pre><code>onHover()</code></pre>函数:</p> <pre><code>function onHover() { const currentCard = $(this); if (hoverTimeout[currentCard.attr('id')] === undefined) { hoverTimeout[currentCard.attr('id')] = []; // initialize timeout id array according to element id } hoverTimeout[currentCard.attr('id')].push(setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('iframe').show(); var src = currentCard.find('iframe').attr("src"); currentCard.find('iframe').attr("src", src + '&autoplay=1'); currentCard.find('iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000)); // 5000 milliseconds (5 seconds) } </code></pre> <p>最后,我们可以将 <pre><code>onHoverTime</code></pre> 函数更新为此,这样我们就可以正确清除超时 ID:</p> <pre><code>function onHoverTime() { while (hoverTimeout[$(this).attr('id')].length > 0) { clearTimeout(hoverTimeout[$(this).attr('id')][0]); // Clear the timeout to prevent actions if the user moves away before 5 seconds hoverTimeout[$(this).attr('id')].shift(); } $(this).find('.card__front').show(); $(this).find('iframe').hide(); var src = $(this).find('iframe').attr("src"); if (src) { $(this).find('iframe').attr("src", src.replace('?autoplay=1', '')); } } </code></pre> <p><a href="https://jsfiddle.net/damzaky/bLovwqnm/" rel="nofollow noreferrer">这是工作小提琴</a>。</p> </answer> </body></html>
使用变量时,您可以定义或指定该变量为 1-10 等范围内的所有数字吗?我正在使用 Switch 语句,并希望将其中一个 case 变量分配给所有变量
如何将用户添加到数据库(保存在内存中)/没有可用的数据库/存储后端
在在线测试中,我收到以下说明:将用户添加到数据库(保存在内存中)。请求体是JSON格式的,如下: { "id": "aabbbbccddeeefff", “姓名”:“用户一”...