遇见专属于你的ikun当青训营遇上码上掘金，ok我们可以看到关键词《遇见》。试卷：据说世界上两个陌生人相遇且相识的概

当青训营遇上码上掘金，ok我们可以看到关键词《遇见》。

试卷：

据说世界上两个陌生人相遇且相识的概率是 0.0000005，大家来到我们青训营能够遇见许多志同道合的伙伴一同学习、快乐成长，这是件多么美妙的事情。请大家围绕“遇见”这个主题进行代码创作。

解题思路：

这个概率的分子是2，分母大概是十几亿；
我们缩小问题规律，从四个人物中遇见一个。

确定主题：

需要找四个人来遇见，并且是 【you】 来遇见他们~；
荔枝的进行思考，用纯路人的想法来解决该问题。

整个基本的结构

基本的结构包括标题部分，提示信息，和四个按钮，以及对应的四个人物。图片本来是想弄成本地的，但是咱码上掘金平台不太会用，所以改成在线地址了。

<div id="app">
    <h2 id="title">遇见最好的ikun<h2>
    <div class="tip">tip: 以下有四大ikun，请遇见属于你的专属ikun吧<div>
    <div class="btn">
        <button>C</button>
        <button>T</button>
        <button>R</button>
        <button>L</button>
    </div>
    <div class="img">
        <img src="https://t7.baidu.com/it/u=837392521,2797050479&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=0720D307523B6B905FB8656C030030E3&sec=1674061200&t=bbfa798d732f9b5dc3ddfe32f4119b67"></img>
        <img src="https://t15.baidu.com/it/u=1700719122,186621461&fm=30&app=106&size=f242,150&n=0&f=JPEG&fmt=auto?s=CAB32FC54C2B3E076BB249B30300C002&sec=1674061200&t=2ce27a82ad840375c724c9af0af67a87"></img>
        <img src="https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft13.baidu.com%2Fit%2Fu%3D2999831847%2C1296626058%26fm%3D225%26app%3D113%26f%3DJPEG%3Fw%3D980%26h%3D612%26s%3D2EBA5FCBD419DD9C670C315A03008092&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f242,182&n=0&g=0n&q=100?sec=1674026828&t=100ed81a927a3ff53dc5202b5299e96a"></img>
        <img src="https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft13.baidu.com%2Fit%2Fu%3D2941690105%2C1373929914%26fm%3D225%26app%3D113%26f%3DJPEG%3Fw%3D1716%26h%3D1072%26s%3DF032E07C1A644215592CF255030050F5&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f242,182&n=0&g=0n&q=100?sec=1674026850&t=18fa74bc302bfb6d8e593f6e65d01fcb"></img>
    </div>
</div>

整点基本的CSS样式

尽量保持简洁易懂的原则，让我们的用户能非常简单得理解该页面是干嘛der

#app {
    margin: auto;
    text-align: center;
}
#title {
    
}
.tip {
    color: gray;
}
.btn {
    margin-top: 30px;
}
button {
    background-color: pink;
    width: 40px;
    height: 40px;
}
img {
    display: none;
    width: 200px;
    height: 200px;
}
.img {
    padding: 10px;
}

最后得部分一些JS代码

点击按钮给出对应的人物的图片。这里偷偷用了ES6的let关键字声明变量注册点击事件，不然就见不到我们的gege了

window.onload = function() {
    let btns = document.querySelectorAll("button");
    let imgs = document.querySelectorAll("img");
    for (let i=0; i<btns.length; i++) {
        btns[i].addEventListener("click", function(){
            for (let j=0; j<imgs.length; j++) {
                imgs[j].style.display="none";
            }
            imgs[i].style.display="inline-block";
        })
    }
}

文末介绍：江南四大IKUN

悠悠球琛总

悠悠球大佬，同时也是纯路人大佬，世人评论其完全无创作瓶颈。

汤姆老师

一句"焯"于是引领了一波锟锟教学，脚踏实地的真ikun，组织其他up主拍摄了《只因你太美》团体版。

卓卓脑婆

笔者自己不太了解，唯一的以为女ikun。

yaw自律

健身区up主，专注于坤式训练，基本功扎实到穿上5、6件外套都能流畅的使用铁山靠。

完事，溜溜球了🐔~

遇见专属于你的ikun