为啥JS中没有显示暂停图标
Posted
技术标签:
【中文标题】为啥JS中没有显示暂停图标【英文标题】：Why isn't the pause icon showing in JS为什么JS中没有显示暂停图标 【发布时间】：2019-04-10 20:44:17 【问题描述】：当我单击播放按钮时，音频播放，视频播放，当我再次单击它时，视频和音频也按预期停止。但是由于某种原因，当我单击它时，播放按钮不会变为暂停按钮。当它显示暂停按钮时，如果我再次单击它应该返回播放按钮。 有没有人对此有很好的解决方案？ 谢谢，Love2Code
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*
margin:0;
padding:0;
box-sizing:border-box;
.app
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
.time-select,.sound-picker,.player-container
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
.player-container
position:relative;
.player-container svg
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
.time-display
position:absolute;
bottom:10%;
color:white;
font-size:50px;
video
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
.time-select button,
.sound-picker button
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
.time-select button:hover
color:black;
background:white;
.sound-picker button
border:none;
height:120px;
width:120px;
border-radius:50%;
.sound-picker button:nth-child(1)
background:#4972a1;
.sound-picker button:nth-child(2)
background:#a14f49;
.sound-picker:focus
outline: none;
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<svg class="play"
viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/>
</svg>
<svg class="track-outline"
viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-/>
</svg>
<svg class="moving-outline"
viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () =>
const song = document.querySelector(".song");
const play = document.querySelector(".player-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () =>
checkPlaying(song);
);
//stop and play the sounds
const checkPlaying = song =>
if(song.paused)
song.play();
video.play();
play.src = 'https://www.dropbox.com/s/3zvnjkebwt1sjgq/download%20%283%29.svg?raw=1';
else
song.pause();
video.pause();
play.src = 'https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1';
;
app();
</script>
</html>【问题讨论】：
【参考方案1】：在这里：
const play = document.querySelector(".player-container");
您正在查找 div 元素，然后尝试为其分配 src 属性，这自然是行不通的。
如果您将初始图标更改为：
<svg class="play"
viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/>
到
<img src="https://www.dropbox.com/s/8unx3knosmefedk/download%20%281%29.svg?raw=1" class="play" alt="">
然后将播放查询选择器更改为：
const play = document.querySelector(".play"); 它会起作用的。
【讨论】：
以上是关于为啥JS中没有显示暂停图标的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的 cpanel 没有在软件中显示设置 node.js 应用程序图标？