큰 타이머를 표시하고 싶어서 div의border로 숫자를 그려봤어요.

14918 단어 HTMLJavaScriptCSS

입문


나는 div의border로 숫자를 그려 보았다.

하고 싶은 일


나는 초등학교 교실에서 타이머를 매우 크게 표시하고 싶다.

배경


한 달에 몇 번 초등학교에 가서 폐를 끼치다K3Tunnel을 이용한 프로그래밍 과정 제공.
보통의 수업시간을 방해했기 때문에 시간을 엄격히 준수한다.
시간을 엄격히 지키지 않으면 급식 시간과 휴식 시간이 짧아진다.
출장 수업이라 45분×두 칸짜리 경기.
다음에 하자.허락하지 않습니다.
우리가 진행하고 있는 프로그래밍 과정은 대본을 준비한 체험이다.그래서 이곳에 도착했으면 좋겠어요. 이곳의 즐거움을 느꼈으면 좋겠어요.
그래서 때때로 작업 도중의 아이들을 멈추게 하고 다음으로 옮기기도 한다.
천천히 하는 아이의 걸음걸이를 높이는 일도 있다.
근데이런 느낌의 아이들을 보면

그건 어려워요.
말할 수 없는 비밀은 AI에게 말하게 한다.
이거이것은 엔지니어의 상식이다.
기계적으로 그에게 시간이 되었다고 말해라.
단지 종료 시간을 지정해서 그들에게 시계를 보게 하는 것은 매우 약하다.
타이머가 갑자기 소리를 내는 것은 심장에 좋지 않다.
나는 아이들의 걸음걸이 화장을 촉진시키고 싶다.
가장 좋은 것은 타이머를 누구나 볼 수 있는 곳에 표시하는 것이다.
이것은 나의 결론이다.

대응 방침


물리 시계와 타이머 응용 프로그램 등을 보지 않고 제작한다.그래, 해.

방침을 세우다


설치에 사용되는 것을 배우지 않습니다.
자바스크립트/html/css가 하고 싶은 열정이 높아지는 것이 촉발이기 때문에'오늘은 시간을 낼 수 있다'는 휴일에 갑자기 태어날 때 하기로 했다.
중요한 것은 하루 안에 신속하게 완성할 수 있다는 것이다.
익숙하지 않은 언어에 손을 대는 등은 토론 범위 내에 있지 않다.
아마도 처음으로 라이브러리와 프레임워크에 도전했을 것이다.
근데제작.

만든 물건


완성되면 여기서 확인할 수 있어요.
https://cocoakamen.github.io/cocoa-timer/

구상


공부하지 않고 한다지만 특대 글씨체로 시간을 표시하면 아무리 예술이 없다.
나는 약간의 도전 요소를 넣고 싶다.
그리고
나는 잠시 생각하다가 생각났다.
확실하지 않다.
div의 border를 굵게 하면 디지털 시계처럼 변하지 않을까요?
우선, 이 HTML에서 상하와 좌우로 색을 바꾸는 div (세로 100px, 굵기 20px) 를 보여 줍니다.
<html>
  <div style="border-color:black gray; height:100px; width:100px; border-style:solid; border-width:20px;"></div>
</html>
결과.

보아하니 숫자를 아는 것 같다.

제작


큰소리 치다


이렇게 div를 배열합니다.굵은 테두리는 숫자의div를 그려야 한다.

숫자마다 두 개의 div 인상을 사용합니다.
상자 안에 쓴 것은 id 이름이다.
id 이름은 공간 조정용으로 쓰지 않았습니다.
스타일을 설정하기 위한 다양한 class가 있습니다.
아마도 사용하지 않은class도 있을 것이다.
숫자를 표시하는 HTML이 여기 있습니다.
위아래 각각 가로로 배치하는 것은 좀 복잡하다.
index.html
<div class="timer-container">
  <div class="number-row">
      <div class="digital-number number-left number-up" id="number-minute-left-up"></div>
      <div class="digital-blank-separater"></div>
      <div class="digital-number number-right number-up" id="number-minute-right-up"></div>
      <div class="digital-separater" id="separater-up"></div>
      <div class="digital-number number-left number-up" id="number-second-left-up"></div>
      <div class="digital-blank-separater"></div>
      <div class="digital-number number-right number-up" id="number-second-right-up"></div>    
  </div>
  <div class="number-row">
      <div class="digital-number number-left number-down" id="number-minute-left-down"></div>
      <div class="digital-blank-separater"></div>
      <div class="digital-number number-right number-down" id="number-minute-right-down"></div>
      <div class="digital-separater" id="separater-down"></div>  
      <div class="digital-number number-left number-down" id="number-second-left-down"></div>
      <div class="digital-blank-separater"></div>
      <div class="digital-number number-right number-down" id="number-second-right-down"></div>    
  </div>  
</div>

border 콘셉트를 정하도록 하겠습니다.


글자 굵기


css의 : 루트 가상 클래스는 사용자 정의 속성에 의해 정의됩니다.
timer.css

:root {
 --number-line-width: 30px;
}
digital-number 클래스에 기초를 설정합니다.(숫자를 그리는 div 요소는 모두digital-number)
timer.css
main .digital-number{
  border: solid;
  width:200px; 
  height:170px;
  border-width: var(--number-line-width); /* :root要素で設定しているカスタムプロパティ参照 */
  box-sizing: border-box; /* パディングとボーダーを幅と高さに含める */
}
/* 全体的にmain要素で囲っているのでmainがついてます */
위아래로 겹치는 부분은 각각 너비를 2분의 1로 설정한다.
이런 상황에서 사용자 정의 특성을 정의하는 것은 매우 유용하다.
timer.css

main .number-up {
  border-bottom-width: calc( var(--number-line-width)/2);
}

main .number-down {
  border-top-width: calc( var(--number-line-width)/2);
}

텍스트 색상


문자의 색상은 JavaScript에서 지정됩니다.
구조 함수 정의 중의 베타 정의.
timer.js

function CocoaTimer() {
  this.numberColor = 'black'; // 文字の色
  this.GRAY_OUT_COLOR = '#EFEFEF'; // 線がない部分の色
  this.remainingTime = 0;
  this.timer = {};
};

숫자를 그리다


표시할 각 숫자의 색상을 지정합니다.
이런 인상.

그 후 착실하게 정의했다.매개 변수는 디지털 div의 상하 요소입니다.
timer.js

CocoaTimer.prototype.drawNumber = function(upElement, downElement, num) {
  // 中略
  // 数字
  switch(num) {
    case 0:
      upElement.style.borderColor = this.numberColor;
      upElement.style.borderBottomColor = this.GRAY_OUT_COLOR;
      downElement.style.borderColor = this.numberColor;
      downElement.style.borderTopColor = this.GRAY_OUT_COLOR;
      break;
    case 1:
      upElement.style.borderColor = this.GRAY_OUT_COLOR;
      upElement.style.borderRightColor = this.numberColor;
      downElement.style.borderColor = this.GRAY_OUT_COLOR;
      downElement.style.borderRightColor = this.numberColor;
      break;
    // 中略　以下9まで地道に定義
      break;
    default:
      break;
  }
};

시간 정상 계산


시간은 밀리초로 계산한다.
남은 시간의 밀리초부터 setInterval을 사용하여 분, 초를 각각 1위와 10위의 숫자를 계산하고 다시 묘사합니다.자세한 내용은 생략합니다.
시간이 되면 반짝인다.지금 소리가 안 나요.

소스도 여기 있어요.


아이들의 반응


교실에서 실제로 사용할 때의 반응은 대체적으로 "엉망진창인 폭탄이다. 폭탄이다."

뭐긴 하지만 안타깝게도 폭탄을 설치하지 않았어요.
앞으로 게임 창작자가 되고 싶은 아이, 그 타이머를 자랑스럽게 만들었습니다. 존경의 눈길을 받았습니다.
물론 목표처럼 아이들이 남은 시간을 스스로 깨닫는 모습을 볼 수 있어 기쁘다.

총결산


타이머를 도입한 후 아이들을 주목할 때 시간을 의식하는 뇌풀의 사용량이 줄어든 것 같다.워크숍 진행이 매우 수월해서 추천합니다.
참고로 자신의 아이의 초등학교 수업을 참관하러 갈 때 실물 프로젝터로 물리 타이머를 큰 모니터에 비추었다.
철도 포모도로 타이머를 만들었다.
하, 바브, 차

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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