遇见专属于你的ikun

260 阅读2分钟

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

试卷:

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

解题思路:
  1. 这个概率的分子是2,分母大概是十几亿;
  2. 我们缩小问题规律,从四个人物中遇见一个。
确定主题:
  1. 需要找四个人来遇见,并且是 【you】 来遇见他们~;
  2. 荔枝的进行思考,用纯路人的想法来解决该问题。
整个基本的结构

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

<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件外套都能流畅的使用铁山靠。

完事,溜溜球了🐔~