발표시간계산기-코드포함

발표시간 만들기 과정 

다음은 발표시간 계산기를 만들어보겠습니다. 티 스토리용 반응형 발표 시간 계산기 코드를  분, 초 단위로 결과를 보여줍니다. 

 

분: 초 단위 반응형 티스토리용 발표 시간 계산기 코드

<div id="presentation-time-calculator">
  <style>
    #presentation-time-calculator {
      max-width: 800px;
      width: 100%;
      margin: 20px auto;
      padding: 20px;
      background-color: #f9f9f9;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      font-family: Arial, sans-serif;
      box-sizing: border-box;
    }
    #presentation-time-calculator * {
      box-sizing: border-box;
    }
    #presentation-time-calculator h2 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
      font-size: 24px;
    }
    #presentation-time-calculator textarea {
      width: 100%;
      height: 200px;
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
      resize: vertical;
    }
    #presentation-time-calculator .speed-control {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 15px;
    }
    #presentation-time-calculator .speed-control label {
      margin-right: 10px;
      font-weight: bold;
      flex: 1 0 100%;
      margin-bottom: 5px;
    }
    #presentation-time-calculator .speed-control input[type="range"] {
      flex: 1;
      margin-right: 10px;
    }
    #presentation-time-calculator .speed-value {
      min-width: 50px;
      text-align: right;
      font-weight: bold;
    }
    #presentation-time-calculator button {
      width: 100%;
      padding: 12px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      transition: background-color 0.3s;
    }
    #presentation-time-calculator button:hover {
      background-color: #0056b3;
    }
    #presentation-time-calculator #calc-result {
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
      color: #28a745;
      font-size: 18px;
    }
    @media (max-width: 600px) {
      #presentation-time-calculator {
        padding: 15px;
      }
      #presentation-time-calculator h2 {
        font-size: 20px;
      }
      #presentation-time-calculator textarea {
        height: 150px;
      }
      #presentation-time-calculator .speed-control {
        flex-direction: column;
        align-items: stretch;
      }
      #presentation-time-calculator .speed-control input[type="range"] {
        margin-right: 0;
        margin-bottom: 10px;
      }
      #presentation-time-calculator .speed-value {
        text-align: center;
      }
    }
  </style>
  
  <h2>발표 시간 계산기</h2>
  <textarea id="calc-script" placeholder="여기에 발표 스크립트를 입력하세요..."></textarea>
  <div class="speed-control">
    <label for="calc-speed">말하기 속도:</label>
    <input type="range" id="calc-speed" min="60" max="140" value="100">
    <span class="speed-value">100%</span>
  </div>
  <button id="calc-button">계산하기</button>
  <div id="calc-result"></div>

  <script>
    (function() {
      var speedInput = document.getElementById('calc-speed');
      var speedValue = document.querySelector('#presentation-time-calculator .speed-value');
      var calcButton = document.getElementById('calc-button');
      var scriptInput = document.getElementById('calc-script');
      var resultDiv = document.getElementById('calc-result');

      speedInput.addEventListener('input', function() {
        speedValue.textContent = this.value + '%';
      });

      calcButton.addEventListener('click', function() {
        var script = scriptInput.value;
        var speed = speedInput.value;
        var words = script.trim().split(/\s+/).length;
        var wordsPerMinute = 150 * (speed / 100);
        var totalSeconds = Math.round((words / wordsPerMinute) * 60);
        var minutes = Math.floor(totalSeconds / 60);
        var seconds = totalSeconds % 60;
        resultDiv.textContent = '예상 발표 시간: ' + minutes + '분 ' + seconds + '초';
      });
    })();
  </script>
</div>

위 파일 첨부파일:

반응형 발표시간 계산기-코드.txt

0.00MB

적용순서

이 코드를 티스토리 블로그에 적용하는 방법은 다음과 같습니다:

1. 티스토리 관리자 페이지에 로그인합니다.
2. 원하는 게시물을 편집하거나 새 게시물을 작성합니다.
3. HTML 편집 모드로 전환합니다.
4. 위의 전체 코드를 복사하여 원하는 위치에 붙여넣습니다.
5. 저장 후 미리보기를 통해 정상 작동하는지 확인합니다.

var totalSeconds = Math.round((words / wordsPerMinute) * 60);
var minutes = Math.floor(totalSeconds / 60);
var seconds = totalSeconds % 60;
resultDiv.textContent = '예상 발표 시간: ' + minutes + '분 ' + seconds + '초';

이 코드는 다양한 화면 크기에 대응하며, 결과를 "분:초" 형식으로 표시합니다. 예를 들어, "예상 발표 시간: 5분 30초"와 같이 표시될 것입니다.

발표 시간 계산기

말하기 속도: 100%