<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<script>
alert('自己紹介');
var img1=new Array(6);
img1[0]=new Image(); img1[0].src="0/1.jpg";
img1[1]=new Image(); img1[1].src="0/2.jpg";
img1[2]=new Image(); img1[2].src="0/3.jpg";
img1[3]=new Image(); img1[3].src="0/4.jpg";
img1[4]=new Image(); img1[4].src="0/5.jpg";
img1[5]=new Image(); img1[5].src="0/6.jpg";
var ch1=0;
function img2(){
if (ch1 == 5)
{ ch1=0; }
else
{ ch1++; }
document.getElementById("img3").src=img1[ch1].src;
}
function div1(){document.getElementById('ap1').innerHTML='<img src="0/1.jpg" onclick="img2()" id="img3">';};
function div2(){document.getElementById('ap1').innerHTML='';};
function back(){window.history.back();}
</script>
<style>
.typing{
color: black;
font-weight: 600;
display: inline-block; width: 25ch;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid transparent;
animation: type 4s steps(25), caret 0.3s steps(1) infinite;
}
@keyframes type{ from{width:0;} }
@keyframes caret{ 50%{border-right-color: black;} }
img{width: 40%;}
#ap1{text-align: center;}
</style>
</head>
<body>
<span class="typing"> alert('自己紹介');</span><br>
<button onclick="div1()">IMG</button>
<button onclick="div2()">close</button><br>
<div id="ap1"></div>
<a href="index.html">HOME</a> 
<a href="about1.html">ABOUT ME</a> 
<a href="about2.html">ABOUT THIS BLOG</a><br>
<button onclick="back()"><Back</button>
</body>
</html>