JavaScript初学——实现功能：单击按钮，视频暂停，按钮图标变换

JavaScript初学——实现功能：单击按钮，视频暂停，按钮图标变换

最近才开始学习JavaScript，正好又在练习几个网页端页面项目，然后遇到了一些问题，正好学了一点JavaScript，就想应用到项目中实现一些功能。
鼠标点击按钮 视频暂停 图标替换

首先整一个结构

  		<div class="poster__video--entry">
            <img id="poster__video__img" src="./images/中间播放功能.png">
            <button id="video_btn_paused" class="poster_video">
            <!-- 按钮样式-->
                <div id="paused" class="poster_videoSjx"></div>
                <div id="play" style="display: none;" class="poster_videoSjx_play"></div>
            </button>
        </div>

css样式

.poster_videoSjx {
  position: relative;
  left: 13px;
  width: 28px;
  height: 19px;
  background-color: rgba(107, 126, 134, 0.75);
  border-radius: 5px;
  z-index: 100;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  transform: rotateZ(90deg);
  border-radius: 5px;
}
.poster_videoSjx_play {
  position: relative;
  left: 10px;
  width: 28px;
  height: 28px;
  background-color: rgba(107, 126, 134, 0.75);
  border-radius: 5px;
  z-index: 100;
  /* clip-path: polygon(0 100%, 50% 0, 100% 100%); */
  /* transform: rotateZ(90deg); */
  border-radius: 5px;
}

JavaScript

原理：
1、先获取需要的元素，然后建立一个监听事件
2、监听到事件后执行两步：图标替换、视频播放暂停

上代码：

window.addEventListener('load', function () {

    let videobtnpuased = document.getElementById("paused")
    let videobtnon = document.getElementById("play")
    let vidoepause = this.document.getElementById("video_btn_paused")
    let videoyuans = document.getElementById("bgVideo");
    vidoepause.addEventListener('click', () => {
        
        if (videoyuans.paused) {
            videoyuans.play();
            videobtnpuased.style.display = 'block'
            videobtnon.style.display = 'none'

        } else {
            videoyuans.pause();
            videobtnpuased.style.display = 'none'
            videobtnon.style.display = 'block'
        }
    })

})

这样，功能就实现了
来看看效果