STUDY_html_002

　　STUDY_html_002_E.html

html
css
JavaScript

<html>

<script>　　　　　すくりぷと-その1　　　　　</script>

<script>　　　　　すくりぷと-その2　　　　　</script>

<style>　　　　　スタイル　　　　　</style>

<button class="四角形">マス目の生成</button>
<div id="くみたて"></div>
<form>
<input type="button"onclick="location.reload();"value="全てを消去">
</form>
</html>

<style>
body{margin-top:20px;
text-align:center;}
form{margin-top:100px;
text-align:center;}
#くみたて{position:relative;
top:24px;
outline:2px solid #007f6f;
font-size:0;
margin:auto;
height:400px;
width:400px;
padding:0;
border:none;}
.ますめ{margin:0;
padding:0;
border:none;
outline:1px solid #32cd32;
display:inline-block;}
</style>

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
function マスメ生成(x)
{for(var よこ=0;よこ<x;よこ++)
{for(var たて=0;たて<x;たて++)
{$("#くみたて").append("<div class='ますめ'></div>");};};
$(".ますめ").width(400/x);
$(".ますめ").height(400/x);};
function ますめ消去(){$(".ますめ").remove();};
function 再読み込み()
{var 正方形=prompt("横と縦のマス目の数");
ますめ消去();
マスメ生成(正方形);};
$(document).ready(function()
{マスメ生成(8);
$(".ますめ").mouseover(function()
{$(this).css("background-color","green");});
$(".四角形").click(function(){再読み込み();
$(".ますめ").mouseover(function()
{$(this).css("background-color","#facebc");});});});
</script>

　　sample_STUDY_html_002_E.pdf サンプル・ダウンロード

← Contents

STUDY_html_002_E.html

　　← Contents

　　STUDY_html_002_E.html