みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Java 計算結果の表示ボックスの書式を変えたい

計算結果が表示されるボックスの表示(回答(1)(2)(3)のみ)を下記のようなバリエーションで変えたいのですが、どのように記述すれば良いでしょうか。

(1)枠線の色を変えたい
(2)枠線の太さを変えたい
(3)枠線内(ボックス)を一定の時間で、任意の色で点滅させたい(現在は条件をつけて枠内の色が変わるように記述しています)

よろしくお願い致します。



<HTML xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>計算テスト</TITLE>
</HEAD>
<BODY bgcolor="#FFFFCC">
<FONT SIZE="3">
<SCRIPT language="JavaScript">
<!--
function keisan1(x1,x2){
a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000;
return a.toFixed(0);}

function keisan2(x1,x2,x3,x4,s1){
b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.1*eval(x4);
return b.toFixed(2);}

function keisan3(x1,x2){
c=20*(eval(x1)/10)*(eval(x1)/10)*(eval(x2));
return c.toFixed(0);}


function calc(){ // ← 計算ボタンが押されたらこの関数が呼ばれる
  var d1 = document.fk.d1;
  var d2 = document.fk.d2;
  var d3 = document.fk.d3;
  var d4 = document.fk.d4;
  var s1 = document.fk.s1;

  var ans1 = keisan1(d1.value, d2.value);
  var calc1 = document.fk.calc1;
  calc1.value = ans1;

  var ans2 = keisan2(d1.value, d2.value, d3.value, d4.value, s1.value);
  var calc2 = document.fk.calc2;
  calc2 .value = ans2 ;
  if(ans2 >= 0) calc2.style.color = "#e60000";
  if(ans2 >= 0) calc2.style.backgroundColor = "#ffffff";
  if(ans2 >= 1.4) calc2.style.color = "#ffffff";
  if(ans2 >= 1.4) calc2.style.backgroundColor = "#e60000";

  var ans3 = keisan3(d1.value, d2.value);
  var calc3 = document.fk.calc3;
  calc3.value = ans3;
  if(ans3 <180) calc3.style.backgroundColor = "#D5FFCB";
  if(ans3 >=180) calc3.style.backgroundColor = "#FFCC99";
  if(ans3 >=270) calc3.style.backgroundColor = "#FF9999";
}

//-->
</SCRIPT>

<FONT SIZE="5"><B>計算</B></font><BR>
<FORM name="fk">
<FONT SIZE="3">
  ●条件(1):<INPUT size="7" type="text" name="d1" style="text-align:right"><BR>
  ●条件(2):<INPUT size="7" type="text" name="d2" style="text-align:right"><BR>
  ●条件(3):<SELECT name="s1" id="s1" onchange="b();">
<OPTION value="0.1">A</OPTION>
<OPTION value="0.2">B</OPTION>
</SELECT>
<BR>
  ●条件(4):<INPUT size="7" type="text" name="d3" style="text-align:right"><BR>
  ●条件(5):<INPUT size="7" type="text" name="d4" style="text-align:right"><BR>
<BR>
  <INPUT type="button" value="計算開始" onclick="calc()">
<BR>
<BR>
  ◆回答(1):<INPUT size="7" type="text" name="calc1" style="text-align:right"><BR>
  ◆回答(2):<INPUT size="7" type="text" name="calc2" style="text-align:right"><BR>
  ◆回答(3):<INPUT size="7" type="text" name="calc3" style="text-align:right"><BR>
<BR>
</FONT>
</FORM>
</BODY>
</HTML>

投稿日時 - 2015-03-20 18:46:46

QNo.8939554

困ってます

質問者が選んだベストアンサー

まず、言語はjavaではなくjavascriptなので間違わないようにしましょう。
(javaとjavascriptは別物です)

(1)枠線の色を変えたい
style.borderColor = "#FF0000";

(2)枠線の太さを変えたい
style.borderWidth = "10px";

(3)枠線内(ボックス)を一定の時間で、任意の色で点滅させたい
setInterval と clearIntervalについて調べてみると良いと思います

投稿日時 - 2015-03-20 19:54:35

お礼

byDesignさん

ご回答ありがとうございます。

すみません。基本が判っていないので簡単なものも出来上がるのに時間が掛かってしまいます。基礎から勉強していきます。

記述は下記のような感じにしてみました。

◆回答(1):<INPUT size="7" type="text" name="calc1" style="border-color:#ff0000; border-width:2px; border-style:groove; background-Color:#FF9999; text-align:right"><BR>
◆回答(2):<INPUT size="7" type="text" name="calc2" style="border-color:#002bff; border-width:1px; border-style:dashed; text-align:right"><BR>
◆回答(3):<INPUT size="7" type="text" name="calc3" style="border-color:#ff8000; border-width:3px; border-style:solid; text-align:right"><BR>

setInterval と clearInterval については、もう少し調べてみます。

ありがとうございました。m(_ _)m

投稿日時 - 2015-03-21 09:43:54

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問