JavaScript勉強メモ。
4点を意識して写経なり
- 動くアプリを作る
- 書いたコードを理解
- 機能またはデザインを追加
- 成果物は、ネット上にあげる
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: white;
text-align: center;
font-size: 100px;
color:#fff;
}
#result{
margin: 30px auto;
width: 500px;
height: 400px;
border-radius: 50px;
line-height: 180px;
color:black;
font-size: 100px;
font-weight: bold;
background-color: greenyellow;
box-shadow: 0, 2px, 10px rgba(0,0,0,0.3);
background-color: aqua
}
#btn{
margin: 20 px;
width: 500px;
padding: 50px;
border-radius: 5px;
background: orange;
box-shadow: 0 4px 0 #FFD700;
cursor: pointer;
font-size:50px;
}
</style>
</head>
<body>
<div id= "result"></div>
<form>
<input type = "button" value="スタート" onclick="omikuji()" id="btn">
</form>
<div class="anime"></div>
<script>
var count = 0;
var countup = function(){
alert("今日も1日に頑張りましょう！");
location.href = "http://www.youtube.com/v/S86ppy4jdxg?autoplay=1";
}
function omikuji(){
document.getElementById("result").innerHTML = "大吉";
var num = Math.floor(Math.random()*5+1 );
if(num==1){
document.querySelector("#result").innerHTML = "大吉";
document.querySelector("#result").style.backgroundColor = "yellow";
document.querySelector(".anime").innerHTML="./matu.jpg";
setTimeout(countup, 1000);
}else if(num==2){
document.querySelector("#result").innerHTML = "中吉";
document.querySelector("#result").style.backgroundColor = "pink";
setTimeout(countup, 1000);
}else if(num==3){
document.querySelector("#result").innerHTML = "小吉";
document.querySelector("#result").style.backgroundColor = "red";
setTimeout(countup, 1000);
}else if(num==4){
document.querySelector("#result").innerHTML = "凶";
document.querySelector("#result").style.backgroundColor = "green";
setTimeout(countup, 1000);
}else if(num==5){
document.querySelector("#result").innerHTML = "大凶";
document.querySelector("#result").style.backgroundColor = "red";
setTimeout(countup, 1000);
}
}
</script>
</body>
</html>