最大公約数と最小公倍数を求めるサイトを作ってみた

2022年12月17日 10:55

どーもyudaiです．今回は最大公約数と最小公倍数を求めるサイトを作ってみました．

コード

HTML&CSS,Javascriptを使いました．

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>GCM & LCM</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <link rel="stylesheet" href="stylesheet_2.css">

        <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
    </head>
    <body>
        <div class="title">
            <h1>最小公倍数,最大公約数計算ツール</h1>
            <p>入力された2数のGCMとLCMを求めます</p>
        </div>
        <div class="main">
            <div class="text">
                <input type="text" name="example1" id="value_1"></p>
                <input type="text" name="example1" id="value_2"></p>
                <input type="button" value="GO" id="checkButton">
            </div>
        </div>
        <div id="answer">
            <p id="GCM"></p>
            <p id="LCM"></p>
        </div>
        <script src="lcm.js"></script>
        
    </body>
</html>

CSS

body{
    margin: 0;
}
.title {
    margin: 0;
    padding:2rem;
    font-family: "M PLUS Rounded 1c";
    background-color: rgb(150, 255, 255);
}
.main{
    padding: 2rem;
}
@media(min-width:701px){
    .text{
        display: flex;
    }
}
.answer{
    font-family: "M PLUS Rounded 1c";
    font-size:  1.5rem;
    padding: 0 2rem;
}
.answer p::before{
    content: '■';
}
#checkButton{
    width:60px;

}

Javascript

'use strict'

const value_1 = document.getElementById('value_1');
const value_2 = document.getElementById('value_2');
const button = document.getElementById('checkButton');
const ans = document.getElementById('answer');
const GCMans = document.getElementById('GCM');
const LCMans = document.getElementById('LCM');

function GCM(A,B){
    let R,tmp;
    if (A < B){
        tmp = A;
        A = B;
        B = tmp;
    }
    R = A % B;
    while (R > 0){
        A = B;
        B = R;
        R = A % B;
    }

    return B;
}//ユークリッドの互除法

function LCM(A,B){
    return A * B / GCM(A,B);
}

button.addEventListener('click' , function(){
    ans.classList.add('answer');

    GCMans.textContent = `GCM:${GCM(value_1.value , value_2.value)}`
    if (GCM(value_1.value , value_2.value) === 1) GCMans.textContent = `GCM:${GCM(value_1.value , value_2.value)}(互いに素)`
    LCMans.textContent = `LCM:${LCM(value_1.value , value_2.value)}`
    
});//HTMLへの出力

動作状況

この記事が気に入ったらサポートをしてみませんか？