JS30-01:打击鼓---JS选择器、JS原生增加and移除class样式、事件监听、data-自定义属性、模板字符串、播放音频

JS30-01:打击鼓—JS选择器、JS原生增加and移除class样式、事件监听、data-自定义属性、模板字符串、播放音频

一、JS选择器

const key = document.querySelector(`div[data-key = "${e.keyCode}"]`);

const keys=document.querySelectorAll('.key')	

二、给元素增加、移除class样式的两种方法：

1、元素的classList属性，用来存放所有的class属性值

    console.log([key]);
	
	key.classList.add('playing');

	key.classList.remove('playing');

2、设定class的属性值

	key.setAttribute('class','key playing');

	key.setAttribute('class','key');

三、事件监听

循环遍历keys中的元素，对每个元素进行监听

js监听transition过渡事件

	/*异步的时间监听，不友好 
      setTimeout(function(){
        key.setAttribute('class','key');
      },70);*/

      function removePlaying(e){
        if(e.propertyName !== 'transform')return;
        this.setAttribute('class','key');
      }
      const keys=document.querySelectorAll('.key')
      //循环遍历keys中的元素，对每个元素进行监听
      keys.forEach(key => {
        // js监听transition过渡事件
        key.addEventListener('transitionend',removePlaying)
      })

四、data-自定义属性

data-key,是一个自定义的属性，‘data-’ 开头

	
  <audio data-key="65" src="sounds/clap.wav"></audio>

五、模板字符串（es6）

根据data-key要求，获取页面元素

字符串模板 ${},模板字符串允许嵌入表达式，并且支持多行字符串和字符串插补特性。

模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号。

    const audio = document.querySelector(`audio[data-key = "${e.keyCode}"]`);

六、播放音频：play()方法

currentTime 属性:设置或返回(音频/视频)播放的当前位置（以秒计）

 	  console.log([audio]);
      audio.currentTime = 0;//避免重复按键时的延迟情况
      audio.play();