likes
comments
collection
share

重学前端 钢琴项目（第十二天）

作者站长头像
站长
· 阅读数 27

菜鸟学完之后，总是感觉学了也还是不会，主要就是因为没有实践，不知道自己到底哪里有问题！虽然说我还没复习完，前端很大一部分都处于模糊阶段，但是感觉还是应该先尽力做一个简单的东西，把这几天学的都用进去，遇到困难，才知道自己的不足！

菜鸟后续又完善了一下，添加了音频可视化+音阶修改，还有箭头的运动也换了，之前菜鸟太弱了！

感兴趣的读者可以直接访问连接：github.com/pbw-langwan…，代码都是有注释的，而且也不难！

概要

菜鸟大致要做的就是这样的：

重学前端 钢琴项目（第十二天）

可以拖动左侧的小乐谱（下拉图）到中间变成大乐谱，然后右边有演示视频，按键通过按键盘上的字母发出对应的音阶！

第一部分（左侧下拉）

一开始，菜鸟的代码是这样的 HTML：

<ul style="list-style: none;" class="head_left_ul">
    <li>
        <div class="head_music_name">
            <img onclick="show1()" src="img/尖括号右.png">
            <p>两只老虎</p>
        </div>
        <div class="head_music" id="twotiger_music">
            <img style="width: 140px;height: 100px;" src="img/twotiger.jpg">
        </div>
    </li>
    <li>
        <div class="head_music_name">
            <img onclick="show2()" src="img/尖括号右.png">
            <p>小星星</p>
        </div>
        <div class="head_music" id="star_music">
            <img style="width: 140px;height: 100px;" src="img/star.jpg">
        </div>
    </li>
    <li>
        <div class="head_music_name">
            <img onclick="show3()" src="img/尖括号右.png">
            <p>虫儿飞</p>
        </div>
        <div class="head_music" id="worm_music">
            <img style="width: 140px;height: 100px;" src="img/worm.jpg">
        </div>
    </li>
</ul>

css：

.head_left_ul li{
    background-color: rgba(128, 128, 128,0.7);
    color: white;
    width: 140px;
}

.head_music_name P{
    display: inline-block;
    margin: 0 0 0 30px;
    vertical-align: bottom;
}

.head_music {
    display: none;
}

js：

function show1() {
    let a = document.querySelector("#twotiger_music");
    console.log(a);
    console.log(a.style.display);
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
    } else {
        a.style.display = "none";
    }
}

function show2() {
    let a = document.querySelector("#star_music");
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
    } else {
        a.style.display = "none";
    }
}

function show3() {
    let a = document.querySelector("#worm_music");
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
    } else {
        a.style.display = "none";
    }
}

代码解析

vertical-align

这里之前的讲过，但是有点不一样，先讲的是文字在前面，图片在后面，现在这种情况正好反过来，不过在浏览器中进行调试，可以很清楚的知道该用什么，记下来不如会调试。

如果想看的话 ，见 重学前端 p多大 / 浏览器最小文字 / 详解img / object-fit和object-posit / 详解map / 空白区域 / 文字与图片对齐 / vertical-align（第一天）

document.querySelector

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意：

querySelector() 方法仅仅返回匹配指定选择器的第一个元素，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。querySelectorAll() 方法不会有复制导致死循环的问题，参考: 渡一

重学前端 钢琴项目（第十二天）

资料： HTML DOM querySelector() 方法

js改变css样式的5种方式

第一种：使用 cssText 全属性

*.style.cssText = "width: 666px; color: red";

第二种：使用 setProperty(属性名，属性值) 方法

*.style.setProperty("width", "666px");

第三种：直接使用单属性

*.style.width="666px";

第四种：直接修改名字

function changeStyle3() {
   var obj = document.getElementById( "btnB" );
   
   obj.className = "style2";
   //或者
   obj.setAttribute( "class" , "style2" );
}

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅 设置/更改 值。

第五种：修改外联样式

<link href= "css1.css" rel= "stylesheet" type= "text/css" id= "css" />
 
function changeStyle4() {
  var obj = document.getElementById( "css" );
  obj.setAttribute( "href" , "css2.css" );
}

菜鸟思路

一·、这里菜鸟打印a.style.display，就是想看第一次点击的时候，浏览器会默认display：none为什么东西，结果就是空白，也就是“”

二、菜鸟之所以会用三个show函数，是因为，如果使用querySelector() 方法仅仅返回匹配指定选择器的第一个元素，那样菜鸟不知道怎么区分三个li

第一次修改

然后，菜鸟感觉不行，应该把箭头也变一下，不能一直都是向右的箭头，点击之后应该向下！

于是代码变成了这样（css写好了就无变化了，后面不再列举）。 HTML：

<ul style="list-style: none;" class="head_left_ul">
	<li>
	    <div class="head_music_name">
	        <img id="head_arrows" onclick="show1(this)" src="img/尖括号右.png">
	        <p>两只老虎</p>
	    </div>
	    <div class="head_music" id="twotiger_music">
	        <img style="width: 140px;height: 100px;" src="img/twotiger.jpg">
	    </div>
	</li>
	<li>
	    <div class="head_music_name">
	        <img id="head_arrows" onclick="show2(this)" src="img/尖括号右.png">
	        <p>小星星</p>
	    </div>
	    <div class="head_music" id="star_music">
	        <img style="width: 140px;height: 100px;" src="img/star.jpg">
	    </div>
	</li>
	<li>
	    <div class="head_music_name">
	        <img id="head_arrows" onclick="show3(this)" src="img/尖括号右.png">
	        <p>虫儿飞</p>
	    </div>
	    <div class="head_music" id="worm_music">
	        <img style="width: 140px;height: 100px;" src="img/worm.jpg">
	    </div>
	</li>
</ul>

js：

function show1(element) {
    let a = document.querySelector("#twotiger_music");
    console.log(element);
    console.log(a);
    console.log(a.style.display);
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
        element.src = "img/尖括号下.png";
    } else {
        a.style.display = "none";
        element.src = "img/尖括号右.png";
    }
}

function show2(element) {
    let a = document.querySelector("#star_music");
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
        element.src = "img/尖括号下.png";
    } else {
        a.style.display = "none";
        element.src = "img/尖括号右.png";
    }
}

function show3(element) {
    let a = document.querySelector("#worm_music");
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
        element.src = "img/尖括号下.png";
    } else {
        a.style.display = "none";
        element.src = "img/尖括号右.png";
    }
}

菜鸟思路

菜鸟这里想到了用this，是因为，感觉如果通过document.querySelector的方式获取，那么又得像show函数那样，写三次了！这里的id = ”head-arrows" 是可以去掉的！

onclick=xxx(this)表示一个单击事件，来进行调用xxx(this)这个JavaScript函数，而xxx(this)函数中的this表示你要进行单击对象的本身。

第二次修改

菜鸟感觉重复代码过多，所以必须得提出一个函数，然后在其它函数里面调用。

代码如下（这里html并未改变，所以这里只列举js） js：

function show1(element) {
    let a = document.querySelector("#twotiger_music");
    console.log(element);
    console.log(a);
    console.log(a.style.display);
    this.change(a,element);
}

function show2(element) {
    let a = document.querySelector("#star_music");
    this.change(a,element);
}

function show3(element) {
    let a = document.querySelector("#worm_music");
    this.change(a,element);
}

function change(a, element) {
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
        element.src = "img/尖括号下.png";
    } else {
        a.style.display = "none";
        element.src = "img/尖括号右.png";
    }
}

第三次修改

菜鸟突然记起来data-*，是可以传递参数的，而document.querySelectorAll得到的又是数组，那么是不是可以直接靠传参实现一个show函数呢？

代码如下 HTML：

<ul style="list-style: none;" class="head_left_ul">
    <li>
        <div class="head_music_name">
            <img data-index="0" onclick="show1(this)" src="img/尖括号右.png">
            <p>两只老虎</p>
        </div>
        <div class="head_music">
            <img style="width: 140px;height: 100px;" src="img/twotiger.jpg">
        </div>
    </li>
    <li>
        <div class="head_music_name">
            <img data-index="1" onclick="show1(this)" src="img/尖括号右.png">
            <p>小星星</p>
        </div>
        <div class="head_music">
            <img style="width: 140px;height: 100px;" src="img/star.jpg">
        </div>
    </li>
    <li>
        <div class="head_music_name">
            <img data-index="2" onclick="show1(this)" src="img/尖括号右.png">
            <p>虫儿飞</p>
        </div>
        <div class="head_music">
            <img style="width: 140px;height: 100px;" src="img/worm.jpg">
        </div>
    </li>
</ul>

js：

function show1(element) {
    console.log(element.dataset.index);
    let index = element.dataset.index;
    let b = document.querySelectorAll(".head_music");
    let a = b[index];
    this.change(a, element);
}

function change(a, element) {
    if (a.style.display === "none" || a.style.display === "") {
        a.style.display = "inline-block";
        element.src = "img/尖括号下.png";
    } else {
        a.style.display = "none";
        element.src = "img/尖括号右.png";
    }
}

菜鸟突然发现越是简洁的代码，其实就暗示着思路越发清晰，运用越发熟练，菜鸟得向简洁的代码奋斗！

总代码

（2020/8/2，今天已经是准备写这篇文章的第三天了，前面的倒是慢慢的写的，还能说出条理，后面的完全就是自己在写代码，然后想写的这个博客的时候却发现，忘记先写的代码了，咳咳咳，这里直接把成品展示出来就好）

重学前端 钢琴项目（第十二天）

这就是效果，然后代码已经上传到GitHub上去了，有兴趣的读者可以直接克隆一份

$git clone git@github.com:pbw-langwang/Git_warehouse.git

$ git switch -c dev origin/dev

转载自:https://juejin.cn/post/7371053962069622796
评论
请登录