frontend 相关问题

JS，卡片背面翻转时点击下方绿色空间时发出卡片旋转声音的问题

<pre><code>&lt;html&gt; &lt;head&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&#34;&gt; &lt;title&gt;Game Cards App&lt;/title&gt; &lt;link rel=&#34;icon&#34; type=&#34;image/png&#34; href=&#34;https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png&#34;&gt; &lt;style&gt; #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: &#34;Lato&#34;; -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); /* Altın sarısı rengi ve parıltılı efekt */ background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); /* Arkaplan gradienti */ } .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; /* Yukarıdaki boşluğu ayarlayın */ } .tm-container { display: flex; justify-content: center; align-items: center; /* Eğer dikey merkezleme de istiyorsanız */ /* Diğer gerekli stil tanımlamaları */ } .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: &#39;&#39;; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); /* Merkezden düzgün bir şekilde ayarlamak için */ width: 50px; height: 45px; border-radius: 50%; 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, /* Altın sarısı glow */ 0 0 100px 20px #0000FF, /* Mavi glow */ 0 0 150px 30px #000033; /* Koyu mavi shadow */ background: rgba(0,0,0,0.7); /* Slightly transparent black to make the ambilight effect visible behind the card */ color:#FFD700; /* Altın sarısı text */ text-align: center; border: 3px solid #FFD700; /* Altın sarısı border */ } #gameCardLink span { font-size: 18px; margin-right: 5px; /* Harf aralarına 10 piksel boşluk ekler */ font-weight: bold; /* Metni kalın yapar */ } #gameCardLink span:last-child { font-size: 0.79em; /* ® simgesini küçült */ vertical-align: super; /* ® simgesini yukarı taşı */ opacity: 0.9; font-weight: bold; /* Metni kalın yapar */ text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /* Siyah gölge ekler */ } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(&#34;https://wallpapercrafter.com/desktop1/516243-black-holes-blue-black-holes-space-1080P.jpg&#34;); 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; /* Genişliği viewport&#39;un %25&#39;i yapar */ height: 12vw; /* Yüksekliği de viewport&#39;un %25&#39;i yapar */ animation: spin 2s linear infinite; /* Burada spin animasyonunu kullanıyoruz */ position: absolute; /* Pozisyonu mutlaka absolute olarak ayarlamalısınız. */ left: 44%; /* X ekseninde ortalamak için sayfanın yarısı kadar sola kaydırın. */ top: 46%; /* Y ekseninde ortalamak için sayfanın yarısı kadar yukarı kaydırın. */ 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); } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;loading-animation&#34;&gt; &lt;div class=&#34;loader&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id=&#34;main-content&#34;&gt; &lt;div class=&#34;tm-container&#34;&gt; &lt;div class=&#34;tm-letter&#34; id=&#34;t-letter&#34;&gt;T&lt;/div&gt; &lt;div class=&#34;tm-letter&#34; id=&#34;m-letter&#34;&gt;M&lt;/div&gt; &lt;/div&gt; &lt;audio id=&#34;flipSound&#34; preload=&#34;auto&#34;&gt; &lt;source src=&#34;https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg&#34; type=&#34;audio/wav&#34;&gt; &lt;/audio&gt; &lt;main&gt; &lt;div id=&#34;gameCardLink&#34;&gt; &lt;span&gt;G&lt;/span&gt; &lt;span&gt;a&lt;/span&gt; &lt;span&gt;m&lt;/span&gt; &lt;span&gt;e&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;!-- Boşluk eklemek için span ekledik --&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;C&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;a&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;r&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;d&lt;/span&gt; &lt;span&gt; &lt;/span&gt; &lt;span&gt;s&lt;/span&gt; &lt;span&gt;®&lt;/span&gt; &lt;!-- Registered trademark simgesi için span --&gt; &lt;/div&gt; &lt;p&gt;&lt;a href=&#34;https://github.com/murattasci06&#34;&gt;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/p&gt; &lt;/main&gt; &lt;ul&gt; &lt;li class=&#34;card&#34; &gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg&#34; alt=&#34;Spiderman&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Spiderman&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;1&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#514d9b&#34; stroke-width=&#34;35&#34; /&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;1.89 Bil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg&#34; alt=&#34;Batman&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Batman&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;2&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#35a541&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;771 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://wallpapercave.com/wp/wp12279011.jpg&#34; alt=&#34;Guardians_of_the_Galaxy_Vol_3&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Guardians_of_the_Galaxy_Vol_3&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;3&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#bdb235&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;845.4 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://wallpaperaccess.com/full/8940499.jpg&#34; alt=&#34;Shazam&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Shazam2&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;4&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#db6623&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;462.5 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34;https://images2.alphacoders.com/131/1316679.jpeg&#34; alt=&#34;Flash&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;DC&lt;/span&gt;&lt;br&gt;Flash&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;5&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#3e5eb3&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;560.2 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class=&#34;card&#34;&gt; &lt;div class=&#34;card__flipper&#34;&gt; &lt;div class=&#34;card__front&#34;&gt; &lt;img src=&#34; https://images3.alphacoders.com/121/1213553.jpg&#34; alt=&#34;Dr_Strange_2&#34;&gt; &lt;p class=&#34;card__name&#34;&gt;&lt;span&gt;Marvel&lt;/span&gt;&lt;br&gt;Dr_Strange_2&lt;/p&gt; &lt;p class=&#34;card__num&#34;&gt;6&lt;/p&gt; &lt;/div&gt; &lt;iframe class=&#34;frame&#34; width=&#34;225&#34; height=&#34;340&#34; src=&#34;https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&amp;mute=1&amp;vq=hd1080&#34; title=&#34;YouTube video player&#34; frameborder=&#34;0&#34; allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#34; allowfullscreen &gt;&lt;/iframe&gt; &lt;div class=&#34;card__back&#34;&gt; &lt;svg height=&#34;180&#34; width=&#34;180&#34;&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;65&#34; stroke=&#34;#aa9e5c&#34; stroke-width=&#34;35&#34;/&gt; &lt;!-- Dış dairenin kenarı (yeşil) --&gt; &lt;circle cx=&#34;90&#34; cy=&#34;90&#34; r=&#34;83&#34; fill=&#34;none&#34; stroke=&#34;rgba(7, 50, 22, 255)&#34; stroke-width=&#34;1&#34; /&gt; &lt;/svg&gt; &lt;span&gt;955.8 Mil. $&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; var Flipper = (function() { var card = $(&#39;.card&#39;); var flipper = card.find(&#39;.card__flipper&#39;); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find(&#39;.card__flipper&#39;); 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 &gt; card.height()) transY = docScroll - offset.top + cardH; if (win.width() &lt;= 700) transY = 0; if (card.hasClass(&#39;active&#39;)) unflip(); thisCard.css({&#39;z-index&#39;: &#39;3&#39;}).addClass(&#39;active&#39;); thisFlipper.css({ &#39;transform&#39;: &#39;translate3d(&#39; + transX + &#39;px,&#39; + transY + &#39;px, 0) rotateY(180deg) scale(1)&#39;, &#39;-webkit-transform&#39;: &#39;translate3d(&#39; + transX + &#39;px,&#39; + transY + &#39;px, 0) rotateY(180deg) scale(1)&#39;, &#39;-ms-transform&#39;: &#39;translate3d(&#39; + transX + &#39;px,&#39; + transY + &#39;px, 0) rotateY(180deg) scale(1)&#39; }).addClass(&#39;active&#39;); return false; }; var unflip = function(e) { card.css({&#39;z-index&#39;: &#39;1&#39;}).removeClass(&#39;active&#39;); flipper.css({ &#39;transform&#39;: &#39;none&#39;, &#39;-webkit-transform&#39;: &#39;none&#39;, &#39;-ms-transform&#39;: &#39;none&#39; }).removeClass(&#39;active&#39;); }; var bindActions = function() { card.on(&#39;click&#39;, flip); win.on(&#39;click&#39;, unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); &lt;/script&gt; &lt;script&gt; &lt;!-- HOOVER FOR TRAILER --&gt; let hoverTimeout; $(&#39;.card&#39;).hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() =&gt; { currentCard.find(&#39;.card__front&#39;).hide(); currentCard.find(&#39;.iframe&#39;).show(); var src = currentCard.find(&#39;.iframe&#39;).attr(&#34;src&#34;); currentCard.find(&#39;.iframe&#39;).attr(&#34;src&#34;, src); // Add fullscreen functionality currentCard.find(&#39;.iframe&#39;).on(&#39;click&#39;, function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find(&#39;.card__front&#39;).show(); $(this).find(&#39;.iframe&#39;).hide(); var src = $(this).find(&#39;.iframe&#39;).attr(&#34;src&#34;); $(this).find(&#39;.iframe&#39;).attr(&#34;src&#34;, src.replace(&#39;?autoplay=1&#39;, &#39;&#39;)); }); &lt;/script&gt; &lt;script&gt; var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById(&#34;flipSound&#34;); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(&#34;.card__front&#34;).click(function() { flipSound.currentTime = 0; flipSound.play(); }); $(&#34;.card&#34;).click(function() { var card = $(this); var cardId = card.find(&#34;.card__num&#34;).text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass(&#39;flipping&#39;)) { card.addClass(&#39;flipping&#39;); // Check if the front side is facing the viewer if (!card.hasClass(&#34;flipped&#34;)) { console.log(&#34;is card flag true or false&#34;, cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log(&#34;started&#34;); cardFlags[cardId] = true; card.addClass(&#34;flipped&#34;); } // Adding canvas to back-side var div = document.querySelector(&#39;.flipped .card__flipper.active .card__back&#39;); var canvas = document.getElementsByClassName(&#39;p5Canvas&#39;)[0]; if (div &amp;&amp; canvas) { div.appendChild(canvas); canvas.style.position = &#39;absolute&#39;; } } else { console.log(&#34;stopped&#34;); card.removeClass(&#34;flipped&#34;); flipSound.play(); } setTimeout(function() { card.removeClass(&#39;flipping&#39;); }, 1000); // Adjust the timeout to match your animation duration } }); // Prevent sound on back side click $(&#34;.card__back&#34;).click(function(e) { e.stopPropagation(); }); }); &lt;/script&gt; &lt;script&gt; // Body&#39;s hoover effect &lt;/script&gt; &lt;script&gt; // Portal effect &lt;/script&gt; &lt;script&gt; function hideLoadingAnimation() { console.log(&#34;Yükleme animasyonu gizleniyor, ana içerik gösteriliyor&#34;); var loadingAnimation = document.getElementById(&#34;loading-animation&#34;); var mainContent = document.getElementById(&#34;main-content&#34;); loadingAnimation.style.display = &#34;none&#34;; mainContent.style.display = &#34;block&#34;; } window.onload = function() { console.log(&#34;Sayfa tamamen yüklendi&#34;); hideLoadingAnimation(); }; &lt;/script&gt; &lt;/html&gt; </code></pre> <p><strong>包含完整代码的链接：</strong><br/> <a href="https://drive.google.com/file/d/1OVCaKDnXj-TrPMTFHWDvF-QzLsWB6OKG/view?usp=drive_link" rel="nofollow noreferrer">https://drive.google.com/file/d/1OVCaKDnXj-TrPMTFHWDvF-QzLsWB6OKG/view?usp=drive_link</a></p> <p>朋友们您好，当卡片翻转到背面时，当您第一次用鼠标左键单击卡片后面的绿色空间时，会听到指定将卡片翻转回来的声音。正常情况下，这个声音不应该在这里听到。后续点击时不会出现此声音。代码中：</p> <pre><code>$(&#34;.card__front&#34;).click(function() { flipSound.currentTime = 0; flipSound.play(); }); </code></pre> <p>我正在陈述这种情况，但我无法弄清楚为什么它工作不正确？</p> <p>我希望只有当卡片旋转到背面时才能听到卡片旋转的声音。我可能犯了一个有经验的人很容易注意到的错误。</p> <p><a href="https://i.stack.imgur.com/LMh5T.jpg" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL0xNaDVULmpwZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p><strong>flipSound.play() >> 它应该包含在下面</strong></p> <pre><code>if (div &amp;&amp; canvas) { div.appendChild(canvas); canvas.style.position = &#39;absolute&#39;; } } else { console.log(&#34;stopped&#34;); card.removeClass(&#34;flipped&#34;); } </code></pre> </answer> </body></html>

如何使用 React 在文本和 html 之间切换复制模式

我想用React实现用户可以在纯文本和html模式之间切换的输入表单。 但是我不知道该怎么做。 请给我一些提示，例如示例代码。 那...

处理使用react查询找不到结果的情况

我正在使用react-query获取数据并显示它。现在如果获取的数据数组为空，我想显示没有找到记录。如果数据数组包含将它们映射到 s...

移动设备上的动画计数器功能问题

我的网站上的动画计数器遇到问题。该计数器旨在模拟统计数据，并且在桌面浏览器上完美运行。但是，当在移动设备上访问时，我...

使用js将html文件<input>上传到flask服务器

我正在尝试将文件从 JS 前端发送到 Flask 后端。 但我的烧瓶后端似乎没有收到文件。 当进入 Flask 后端 HTML 页面并手动提交时它可以工作，但我想要......

window.open 无法将参数附加到以 .html 结尾的 url

当我使用时 window.open('/a.html?title=666') 新窗口的网址中没有 title = 666 但 window.open('/a?title=666') 工作正常。 这真的让我很困惑。 顺便说一句，我正在使用节点的 '

加载背景图像时未出现同步旋转的问题

函数 hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadAnimation = document.getElementById("loading-animation"); var 主要内容 =

NextJS - 避免删除 url 末尾的斜杠

NextJS - 避免删除 url 末尾的斜杠 现在怎么样了？ domain.com/（转到）=>domain.com/th 域名.com/th/ => 域名.com/th 域名.com/en/ => 域名.com/en 什么是...

使用 Redux Toolkit 在 React 中映射获取的数据

我正在尝试使用 fetch API 获取我的数据库（mongodb）中的所有产品。我使用 Redux Toolkit 将得到的结果存储在切片中。问题是当我将获取和存储的数据传递给...

在 ReactJS 中单击按钮打开对话框

我正在使用 React MDL 库，并且使用了预定义的组件，例如 FABButton 它显示了如图所示的按钮...

启动 Angular 应用程序时出现错误

通过以下命令启动我的角度应用程序 - ngserve --port 4200 --host 127.0.0.1 --disable-host-check true --ssl true 时，我收到以下错误： 错误：无法找到...

右侧菜单栏和内容空间的填充是无穷无尽的

我正在尝试对齐菜单栏和内容侧空间。问题是菜单栏和内容空间的右侧没有留下侧面空间。我想给他们一些空间，就像左手一样......

边界半径不受影响颤动

我正在尝试将figma ui转换为flutter，椭圆阻止容器在一个角度上减小半径。 这是一个figma ui： 我正在尝试的代码： 子项：容器（ 装饰...

除非触发 onChange 事件，否则选择框 (MUI) 中的默认值不会显示

我正在从 API 获取数据以呈现选择框。选择框中的值包含用户详细信息。我的问题是，在初始加载时，即使正确获取数据也是默认的......

在 Next.js 中添加导航链接的活动类

我正在使用 Next.js，并且希望在链接到的页面与 url 匹配时向导航链接添加活动类。但我也希望当 url 比页面更深时它处于活动状态。 例如，一个...

Tailwind：使用深色模式更改div的背景梯度

我正在学习顺风，我有这个div： ... 我正在学习顺风，我有这个 div : <div class="mt-5 border border-gray-300 p-2 bg-gradient-to-b from-gray-100 via-purple-50 to-gray-50 rounded-lg mb-8 p-4 dark:bg-black"> 在黑暗模式下，我的背景仍然是原始渐变（我的黑暗模式正在工作） 我想要深色模式下的黑色背景。 我注意到如果我这样做： <div class="mt-5 border border-gray-300 p-2 bg-gradient-to-b from-gray-100 via-purple-50 to-gray-50 rounded-lg mb-8 p-4 bg-gradient-to-b from-green-200 via-pink-100 to-red-500"> 这是使用的第二个渐变（bg-gradient-to-b from-green-200 via-pink-100 to-red-500）。 但是如果我这样做: <div class="mt-5 border border-gray-300 p-2 bg-gradient-to-b from-gray-100 via-purple-50 to-gray-50 rounded-lg mb-8 p-4 bg-black"> 使用的不是 bg-black，而是 bg-gradient-to-b。 所以也许它是链接的:) 为了确保深色模式下的背景颜色为黑色，您可以尝试将 dark:bg-black 类直接添加到您的 div。 <div class="mt-5 border border-gray-300 p-2 bg-gradient-to-b from-gray-100 via-purple-50 to-gray-50 rounded-lg mb-8 p-4 dark:bg-black">

如何创建包含输入的一页调查

我想创建一个在线调查，它将呈现一个如下所示的问题页面： ...然后会将答案存储在程序中供我稍后查看。 我已经尝试过基本的...

antd Table React js 中的分页页面大小不会显示在移动视图中

所以在 antd 的旧版本 4.xx 中它一直工作得很好，我决定迁移到最新版本，现在分页位置可以工作，但我有 setshowSizeChanger 但如果我在移动设备上打开或查看网站则不会显示

对角切割一个部分并保持响应

我正在寻找一种对角切割截面的方法，有点像下面使用 CSS 的图片。剪裁在所有页面尺寸上保持相同并且不与...

无法聚焦于3D安全认证条带reactjs中的输入字段

const 负载=等待条带！.confirmCardPayment（clientSecret，{ 付款方式： { 卡：元素！.getElement( 卡号元素 ) 作为