배열에서 임의로 값을 검색하는 점심 앱

저, 언제나 쓰고 있구나~라는 JavaScript의 소기집 의 , 기사에 있던 「배열로부터 랜덤으로 값을 꺼내기」를 사용해, 점심 밥 어플리를 만들었습니다.

이하 의식적으로 코드를 작성

움직이는 앱 만들기

작성한 코드 이해

기능 또는 디자인 추가

아티팩트는 그물에 올린다

비효율적인 부분을 리팩토링

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lunch_app</title>
    <link rel="stylesheet" href="./09_lunch.css">
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
    <input type="button" value="ボタン" id="btn">
    <p>本日のお昼は............</p>
    <h2></h2>
    <h1></h1>
<script>
$(document).ready(function(){

    $("#btn").on("click", function(){   

        //食事の種類
        var kind = ["和食(◉◞౪◟◉)","洋食(⊙◞౪◟⊙)","コンビニ☭(;´༎ຶД༎ຶ`)☭ "];
        var random = Math.floor(Math.random () * 3);

        var w = ["牛丼!!","ラーメン!!","寿司!!"];
        //w配列からランダムで値を取り出す
        var wRandam = w[Math.floor(Math.random () * w.length)];        
        var y = ["ピザ!!","パスタ!!","カレー!!"];
        //y配列からランダムで値を取り出す
        var yRandam = y[Math.floor(Math.random () * y.length)];
        var k = ["パン!!","おにぎり!!","うまい棒!!"];
        //k配列からランダムで値を取り出す
        var kRandam = k[Math.floor(Math.random () * k.length)];

        //和食の処理結果
        if(random == 0){
            $("h2").text(kind[0]);
            $("h1").text(wRandam);
        //洋食の処理結果
        }else if(random == 1){
            $("h2").text(kind[1]);
            $("h1").text(yRandam);
        //コンビニの処理結果
        }else{
            $("h2").text(kind[2]);
            $("h1").text(kRandam);
        }
    })

});   
</script>    
</body>
</html>

css

#btn{
    font-weight: bold;
    padding: 10px 30px;
    background-color: black;
    color: #fff;
    border-style: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

p{
    color:black;
    font-weight: bold;
    font-size: 19px;
    padding: 50px;
}

h2{
    color:blue;
    font-weight: bold;
    font-size: 120px;
    margin: 50px
}

h1{
    color: deeppink;
    font-weight: bold;
    font-size: 350px;
    margin: 50px
}

Reference

이 문제에 관하여(배열에서 임의로 값을 검색하는 점심 앱), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ko8@github/items/bfbcb99a6d40659ce9a0

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

배열에서 임의로 값을 검색하는 점심 앱

이하 의식적으로 코드를 작성

Reference

좋은 웹페이지 즐겨찾기