<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#omikuji").one("click",function(){
var omikuji = ["大吉", "中吉", "小吉","末吉", "吉", "凶","大凶"];
var kekka = Math.floor(Math.random() * omikuji.length);
$("#kekka").text(omikuji[kekka]);
if(kekka == 0){
$("#kekka").addClass("daikichi");
}
});
$("#reset").click(function(){
$("#kekka").text("");
$("#omikuji").unbind("one");
$("#kekka").removeClass("daikichi");
$("#omikuji").one("click",function(){
var omikuji = ["大吉", "中吉", "小吉","末吉", "吉", "凶","大凶"];
var kekka = Math.floor(Math.random() * omikuji.length);
$("#kekka").text(omikuji[kekka]);
if(kekka == 0){
$("#kekka").addClass("daikichi");
}
});
});
});
</script>
<style>
#omikuji,#reset{
cursor:pointer;
width:250px;
height:50px;
line-height:50px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#FFFFFF;
border:5px solid #000000;
border-radius:10px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f6f7f7), color-stop(0.51, #b7b9c5), color-stop(0.00, #f6f7f7));
background: -webkit-linear-gradient(top, #f6f7f7 0%, #b7b9c5 51%, #f6f7f7 100%);
background: -moz-linear-gradient(top, #f6f7f7 0%, #b7b9c5 51%, #f6f7f7 100%);
background: -o-linear-gradient(top, #f6f7f7 0%, #b7b9c5 51%, #f6f7f7 100%);
background: -ms-linear-gradient(top, #f6f7f7 0%, #b7b9c5 51%, #f6f7f7 100%);
background: linear-gradient(top, #f6f7f7 0%, #b7b9c5 51%, #f6f7f7 100%);
margin:10px;
}
#kekka{
width:250px;
height:250px;
line-height:250px;
text-align:center;
font-size:84px;
font-weight:bold;
color:#FFFFFF;
border:5px solid #000000;
border-radius:10px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #1e3a07), color-stop(0.00, #637d4d));
background: -webkit-linear-gradient(top, #637d4d 0%, #1e3a07 100%);
background: -moz-linear-gradient(top, #637d4d 0%, #1e3a07 100%);
background: -o-linear-gradient(top, #637d4d 0%, #1e3a07 100%);
background: -ms-linear-gradient(top, #637d4d 0%, #1e3a07 100%);
background: linear-gradient(top, #637d4d 0%, #1e3a07 100%);
margin:10px;
}
.daikichi{
font-size:96px !important;
color:#FFFF00 !important;
}
</style>
</head>
<body>
<div id="omikuji">
おみくじを引く
</div>
<div id="reset">
リセット
</div>
<div id="kekka">
</div>
</html>