SHOJI's Code
仕事では画面に警報などの異常状態を知らせる画面などを作成したりしている。通常はそのためのソフトで作成したり、VCで作ったりするのだが、JavaScriptなんかで何かできないかと思い、ちょっとサンプル的に作成してみた。
<html>
<head>
<title>ブリンクテスト</title>
<script type="text/javascript">
<!--
var boxes;
var timing;
function load()
{
boxes = new Array;
timing = true;
for(var i=0;i<document.all.length;i++)
if( document.all(i).className == "box" )
boxes[ document.all(i).id ] = { state: false, ack: true };
setTimeout("blink()", 500);
}
function setState(name, stat)
{
if( stat && !boxes[name].state ) boxes[name].ack = false;
boxes[name].state = stat;
setColor(name);
}
function ack()
{
for(b in boxes)
{
if( !boxes[b].ack )
{
boxes[b].ack = true;
setColor(b);
}
}
}
function blink()
{
for(b in boxes)
if( !boxes[b].ack && boxes[b].state )
setColor(b);
timing = !timing;
setTimeout("blink()", 500);
}
function setColor(name)
{
var c;
if( boxes[name].state )
{
if( boxes[name].ack )
c = "red";
else
{
if( timing )
c = "red";
else
c = "white";
}
}
else
{
if( boxes[name].ack )
c = "white";
else
c = "blue";
}
document.getElementById(name).style.backgroundColor = c;
}
//-->
</script>
<style type="text/css">
.box {
margin: 4px;
border: 2px solid black;
background-color: white;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
float: left;
}
</style>
</head>
<body onload="load();">
<p>
<div id="ALM1" class="box">ALM1</div>
<div id="ALM2" class="box">ALM2</div>
<div id="ALM3" class="box">ALM3</div>
<div id="ALM4" class="box">ALM4</div>
<div id="ALM5" class="box">ALM5</div>
<div id="ALM6" class="box">ALM6</div>
<div id="ALM7" class="box">ALM7</div>
<div id="ALM8" class="box">ALM8</div>
<div style="clear: both;"></div>
</p>
<p>
<button style="font-size: 24px;" onclick="ack();return false;">ACK</button>
</p>
<table>
<tr>
<td>ALM1</td>
<td><button onclick="setState('ALM1',true);return false;">ON</button></td>
<td><button onclick="setState('ALM1',false);return false;">OFF</button></td>
</tr>
<tr>
<td>ALM2</td>
<td><button onclick="setState('ALM2',true);return false;">ON</button></td>
<td><button onclick="setState('ALM2',false);return false;">OFF</button></td>
</tr>
<tr>
<td>ALM3</td>
<td><button onclick="setState('ALM3',true);return false;">ON</button></td>
<td><button onclick="setState('ALM3',false);return false;">OFF</button></td>
</tr>
<tr>
<td>ALM4</td>
<td><button onclick="setState('ALM4',true);return false;">ON</button></td>
<td><button onclick="setState('ALM4',false);return false;">OFF</button></td>
</tr>
<tr>
<td>ALM5</td>
<td><button onclick="setState('ALM5',true);return false;">ON</button></td>
<td><button onclick="setState('ALM5',false);return false;">OFF</button></td>
</tr>
<tr>
<td>ALM6</td>
<td><button onclick="setState('ALM6',true);return false;">ON</button></td>
<td><button onclick="setState('ALM6',false);return false;">OFF</button></td>
</tr>
<tr>
<td>ALM7</td>
<td><button onclick="setState('ALM7',true);return false;">ON</button></td>
<td><button onclick="setState('ALM7',false);return false;">OFF</button></td>
</tr>
<tr>
<td>ALM8</td>
<td><button onclick="setState('ALM8',true);return false;">ON</button></td>
<td><button onclick="setState('ALM8',false);return false;">OFF</button></td>
</tr>
</p>
<p style="display: block;">
</p>
</body>
</html>
実用するには状態をJavaScriptにどう取り込むか、という問題はあるが、とりあえずその辺はおいおい･･･(^^; いずれAjaxなどと組み合わせて作ってみよう(^^)
テーマ:JavaScript - ジャンル:コンピュータ
|
| ホーム |