Google 사이트에서 서버리스 카운트 다운 사이트를 만들었습니다.

15085 단어 Google 사이트HTML자바스크립트google서버리스

완성 이미지



Google 계정이 있으면 무료 서버리스 운영이 가능합니다.

실제로 만든 사이트 (2022/02/07 갱신 파리 올림픽에 날짜 수정)
htps : // / s. 오, ぇ. 코 m/ゔぃえ w/오 lym 피 c 파라 lym 피 c/

빨리 만들기



Google 사이트를 이용합니다.
htps : // / s. 오, ぇ. 코 m/네 w

오른쪽 하단의 +를 클릭


※Google 드라이브에서도 작성할 수 있습니다.


사이트가 생성됩니다.


왼쪽 상단의 사이트 이름을 바꿉니다. (선택)


텍스트 상자를 제목으로 변경하여 문자의 균형을 맞춥니다.


제목 유형을 표지로 변경한 다음 이미지를 변경합니다.


제목을 편집합니다.
올림픽·패럴림픽의 문자 뒤에서 개행해, TOKYO2020을 입력 후 스타일을 제목으로 변경, 또 하나 개행해 2020년 7월 24일 오후 8시 합니다.



※사진은 다음 사이트의 소재를 이용하였습니다.
무료 사진 소재 파쿠타소

카운트다운 생성



카운트다운을 JavaScript를 사용하여 만듭니다.
화면 오른쪽의 삽입에서 삽입을 클릭합니다.


내장 코드를 선택합니다.


여기에 html로 코드를 작성합니다.
일반적으로는 텍스트 편집기로 작성하여 붙여넣는 것 같습니다.
<!DOCTYPE html>
<html lang="ja">
  <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width",initial-scale=1>
    <title>Countdown</title>

<style type="text/css">
  /*書式初期化*/
  html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td {
  border: 0;
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

body {
/*フォント設定*/
  color:#FFFFFF;
  font-size: 300%;
  text-align: center;
  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

</style>

  </head>

  <body>
    <div id="countOutput"></div>
    <script LANGUAGE="JavaScript">
     function dateCounter() {

    var timer = setInterval(function() {
    //現在の日時取得
    var nowDate = new Date();
    //カウントダウンしたい日を設定
    var anyDate = new Date("2020/7/24 20:00:00");
    //日数を計算
    var daysBetween = Math.ceil((anyDate - nowDate)/(1000*60*60*24)-1);
    var ms = (anyDate - nowDate);
    if (ms >= 0) {
        //時間を取得
        var h = Math.floor(ms / 3600000);
        var _h = h % 24;
        //分を取得
        var m = Math.floor((ms - h * 3600000) / 60000);
        //秒を取得
        var s = Math.round((ms - h * 3600000 - m * 60000) / 1000);

        //HTML上に出力
        document.getElementById("countOutput").innerHTML = daysBetween + "日と" +_h + "時間" + m + "分" +s + "秒";

        if ((h == 0) && (m == 0) && (s == 0)) {
        clearInterval(timer);
        document.getElementById("countOutput").innerHTML = "経過しました";
        }
    }else{
        document.getElementById("countOutput").innerHTML = "経過しました";
    }
    }, 1000);
}
dateCounter();
    </script>  

  </body>

</html>

다음을 클릭합니다.


글꼴이 흰색이므로 새하얀 것처럼 보입니다.
믿고 삽입을 클릭합니다.


아래에 삽입되기 때문에 방금 만든 표제 아래로 드래그 앤 드롭합니다.


카운트다운 필드를 선택하고 축소하여 조정합니다.
가능하면 오른쪽 상단의 공개 버튼을 클릭합니다.


마지막으로 웹에 공개 설정을 합니다.
원하는 웹 주소를 입력하고 사이트를 열람할 수 있는 사용자 등 설정 후 공개 버튼을 클릭합니다.


게시하면 오른쪽 상단의 게시 옆에 있는 아래 삼각형 버튼을 클릭하여 사이트를 확인할 수 있습니다.


결론



이상, Google 사이트를 이용해, 간단하게 카운트다운 사이트를 만드는 방법이었습니다.
Google 계정이 있으면 누구나 그대로 사용할 수 있으므로 매우 유용합니다.
JavaScript로 움직이기 때문에, 디스플레이에 비추어 사이니지로서도 이용할 수 있을까 생각합니다. 일시적으로라든지, 조금 적인 때에, 조금이라도 도움이 되어 주시면 기쁘게 생각합니다.
Google 이메일 애플리케이션의 비밀번호 가져오기
Ruby on Rails 튜토리얼 17일째

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage