<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="sample.js"></script>
<script src="jquery.js"></script>
<script src="svgpaint.js"></script>
<title>ボタン</title>
</head>
<body onload="sample()">
<p id="memo"></p>
<div>
<input id="b1" type="button" value="上" />
</div>
</body>
</html>
var p;
var x1=new Array();
var x2=new Array();
var x3=new Array();
var mode;
function sample(){
mode = 1;
$("#b1").click(function () {
mode = mode + 1;
if (mode == 3) mode = 1;
});
var timer;
var delay = 100;
p = 1;
for (s = 1; s < 101;s++ ){
x1[s] = 2;
x2[s] = 2;
x3[s] = 2;
if(Math.random()>0.5)x1[s]=1;
if(Math.random()>0.5)x2[s]=1;
if(Math.random()>0.5)x3[s]=1;
}
var loop = function () {
if(mode==2)p = p + 1;
if (p > 100) p = 1;
paint();
clearTimeout(timer);
timer = setTimeout(loop, delay);
}
loop();
}
function paint(){
var sub=new svgpaint();
str="<svg width=\"500\" height=\"500\">";
for (s = 1; s < 6; s++) {
n1 = s + p;
if (n1 > 100) n1 = n1 - 100;
if(x1[n1]==1)str = str + sub.rect(0, 100*s-100, 150, 100, "red");
if(x2[n1]==1)str = str + sub.rect(150, 100*s-100, 150, 100, "red");
if(x3[n1]==1)str = str + sub.rect(300, 100*s-100, 150, 100, "red");
if(x1[n1]==2)str = str + sub.rect(0, 100*s-100, 150, 100, "blue");
if(x2[n1]==2)str = str + sub.rect(150, 100*s-100, 150, 100, "blue");
if(x3[n1]==2)str = str + sub.rect(300, 100*s-100, 150, 100, "blue");
}
str=str+"</svg>";
$("#memo").html(str);
}
最終更新：2015年06月02日 12:32
