practice

　　　　

<html>
<meta charset="utf-8">

<style>
html{background-color:#fefefe;}
hr{width:500px;
height:8px;
background-color:#456789;
margin:40px;
margin:40px auto;
display:block;}
h1{text-align:center;
margin-top:40px;
padding-top:30px;
text-shadow:1px 1px 0px white;}
input{width:300px;
font-size:20px;}
main{background-image:url(000.png);
background-repeat:no-repeat;
background-position:center;}
section{width:400px;
margin:10px auto;
color:#ffffff;
font-size:20px;}
section:first-child{margin-top:100px;}
div{display:block;
position:relative;
padding:20px 0 20px 20px;
background-color:#456789;}
div:after{position:absolute;
content:"▶︎";
top:35%;
left:85%;
transform:rotate(90deg);}
div.とじる:after{position:absolute;
content:"◀︎";
top:35%;
left:85%;
transform:rotate(-270deg);}
p{display:none;
padding:20px 0 20px 40px;
color:#123456;}
.ドット:focus{outline:4px #ff0000 dotted;
transition:outline 2s ease-out;}
</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){$(".ぷるだうん").click(function(){$(this).toggleClass("とじる").next().slideToggle();});});
</script>

<main>
<h1>カードの発行</h1>
<section>
<div class="ぷるだうん">日付と時刻を入力<input class="ドット"></div>
<p id="目印_時間"></p>
</section>
<section>
<div class="ぷるだうん">パスワード<input class="ドット"></div>
<p><input onclick="ぼたん()"type="button"value="パスワードを忘れたら →">
<input type="text"class="いんぷっと"value="思い出すためのヒントを見る"disabled></p>
</section>
<section>
<div class="ぷるだうん">カードのデザインを選択<input class="ドット"></div>
<p><img id="目印"src="a.jpg"width="300"height="220">
<input type="button"onclick="go_forward()"value="Next">
<input type="button"onclick="go_back()"value="Back"></p>
</section>
</main>

<script>
function ぼたん()
{let わく=document.querySelectorAll(".いんぷっと");
わく.forEach(function(色)
{if(色.value==="その1: 自分が生まれた土地の名前")
{色.value="その2: ペットの名前";
色.style.fontSize="20px";
色.style.color="red";
色.style.border="solid 1px";
色.style.borderColor="red";}
else
{色.value="その1: 自分が生まれた土地の名前";
色.style.fontSize="20px";
色.style.color="#456789";
色.style.border="solid 1px";
色.style.borderColor="#123456";}});}
var 画像=new Array("a.jpg","b.jpg","c.jpg");
var num=0;
function go_forward(){
if(num == 2){num=0;}
else
{num ++;}
document.getElementById("目印").src=画像[num];}
function go_back(){if(num==0)
{num=2;}
else
{num--;}
document.getElementById("目印").src=画像[num];}
window.addEventListener("load",()=>
{let 週=["日","月","火","水","木","金","土"];
let 今日=new Date();
let 年=今日.getFullYear();
let 月=今日.getMonth() + 1;
let 日付=今日.getDate();
let 終日=今日.getDay();
let 時間=今日.getHours();
let 分=今日.getMinutes();
let 秒=今日.getSeconds();
document.getElementById("目印_時間").innerHTML=年+"/"+月+"/"+日付+"("+週[終日]+")"+" "+時間+":"+分+":"+秒;});
</script>

</html>