SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2017.08<<123456789101112131415161718192021222324252627282930>>2017.10
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

仕事では画面に警報などの異常状態を知らせる画面などを作成したりしている。通常はそのためのソフトで作成したり、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 - ジャンル:コンピュータ
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。