FOBshippingpoint/hundred-abehiroshi

## hundred-abehiroshi
<!DOCTYPE html>
<html>

<head>
  <meta charset=UTF-8>
  <title>Hello World!</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script>
    $(function () {
      $('#start').on('click', function () {
        const id = startTimer();
        createAbe(function () {
          $('.complete').css('visibility', 'visible');
          clearInterval(id)
        });
      })
    })

    function createAbe(onComplete, count) {
      if (!count) count = 0;
      const abe = $(`<div class="num">${count + 1}<br/><iframe src="http://abehiroshi.la.coocan.jp/" width="50%" height="500px"></iframe></div>`);
      $("#abes").append(abe)
      $(abe).children('iframe').on("load", function () {
        count++;
        // $("html, body").scrollTop($(document).height());
        console.log(count);
        if (count < 100) {
          createAbe(onComplete, count);
        } else {
          onComplete();
        }
      })
    }


    function startTimer() {
      var start = new Date;
      const id = setInterval(function () {
        $('.timer').text(((new Date - start) / 1000).toFixed(3) + "s");
      }, 100);
      return id;
    }

  </script>
  <style>
    .num {
      font-size: 10em;
    }

    .timer {
      position: fixed;
      right: 0;
      font-size: 20em;
    }

    .complete {
      position: fixed;
      right: 10px;
      bottom: 0;
      font-size: 20em;
      color: red;
      visibility: hidden;
    }

    .btn {
      font-size: 20em;
    }
  </style>
</head>

<body>
  <button id="start" class="btn">START</button>
  <span class="timer"></span>
  <i class="complete">DONE!</i>
  <div id="abes"></div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset=UTF-8>
	<title>Hello World!</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script>
	$(function () {
	$('#start').on('click', function () {
	const id = startTimer();
	createAbe(function () {
	$('.complete').css('visibility', 'visible');
	clearInterval(id)
	});
	})
	})

	function createAbe(onComplete, count) {
	if (!count) count = 0;
	const abe = $(`<div class="num">${count + 1}<br/><iframe src="http://abehiroshi.la.coocan.jp/" width="50%" height="500px"></iframe></div>`);
	$("#abes").append(abe)
	$(abe).children('iframe').on("load", function () {
	count++;
	// $("html, body").scrollTop($(document).height());
	console.log(count);
	if (count < 100) {
	createAbe(onComplete, count);
	} else {
	onComplete();
	}
	})
	}


	function startTimer() {
	var start = new Date;
	const id = setInterval(function () {
	$('.timer').text(((new Date - start) / 1000).toFixed(3) + "s");
	}, 100);
	return id;
	}

	</script>
	<style>
	.num {
	font-size: 10em;
	}

	.timer {
	position: fixed;
	right: 0;
	font-size: 20em;
	}

	.complete {
	position: fixed;
	right: 10px;
	bottom: 0;
	font-size: 20em;
	color: red;
	visibility: hidden;
	}

	.btn {
	font-size: 20em;
	}
	</style>
	</head>

	<body>
	<button id="start" class="btn">START</button>
	<span class="timer"></span>
	<i class="complete">DONE!</i>
	<div id="abes"></div>
	</body>

	</html>