JavaSprictで時間取得と指定した経過時間の結果を表示させたいで

質問

JavaSprictで時間取得と指定した経過時間の結果を表示させたいです。

今まではエクセルでやっていたのですが
web上でやらなければならない状態になったので調べたところ
JavaSprictだと出来るのではないかと思ったのですが
まったく解らない状態でして、ご教示お願いします。
色々調べて貼り付けただけの状態なので、現状全く動かない状態です。
一行の場合、時間取得はできたのですが、
複数行になると時間取得すら出来ない状態です。。
とりあえず添付画像のようにhtmlで形を作ってみましたが、やりたい事は下記のとおりです。

１．時間取得ボタンを押す（24時間表示）
２．押したボタンの横にある時間表示フォームに時間が表示される
３．時間選択メニューから経過時間を選択
４．結果表示に、時間表示フォームに表示された時間＋時間選択の時間が表示される

これを複数行でできるようにしたいです。
時間取得ボタンで取得した時間が10:00で、10分後を選択した場合
結果表示には10:10と出るようにしたいです。

時間選択メニューをマウスのホイールで動かした時に
結果表示の時間も一緒に動くようにしたいです。
時間表示と結果表示は、TABLE枠内であれば
特にフォーム内に記載される必要はないです。

メモ欄には備考欄として文字を記入できるようにしたいです。
できれば、メモ欄はクッキーに保存されて残るようにしたいです。
色々と指定が多く面倒なことかと思いますが
JavaSprictにお詳しい方がいらっしゃいましたらよろしくお願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.6

babu_baboo · ベストアンサー

function hoge(e,v,t){if(e.value&&(v=getPreText(e.parentNode)||getIma()))setNxtText(e.parentNode,v.replace(/(\d+):(\d+)/,function(a,h,m){t=(+h)*60+(+m)+(+e.value);return(t/60|0)+':'+(+(m=t%60)<10?'0'+m:m)}));}

かってなおもいこみだけど・・（さいきんのしつもん）
かんばんだけ「プロ」で、しょしんしゃのふりして、きくだけきいて、ほうちしている
ようにおもえてね。だったら、りかいしにくいようにしてやろうとおもってかいてみた。
しつもんは、たぎにわたり、かいとうはてほんにもならないけど、これがりかいできたら
たのしいのかも？

VxEditorで手打ちです。きほんてきなのはじぶんせんようのらいぶらりからこぴぺ。

もうそう５ふん。てうち１０ふん。むしとり３０ふんくらいかな？

お礼

まだまだわからない事だらけですが
希望通りの動きになってすごく嬉しいです。
色々とどうもありがとうございました。
頑張って勉強していきたいと思います。
回答下さったお二方には本当に感謝しております。

回答No.9

babu_baboo

function hoge(e,v,t){if(e.value&&(v=getPreText(e.parentNode)||getIma()))setNxtText(e.parentNode,v.replace(/(\d+):(\d+)/,function(a,h,m){t=(1440+(+h)*60+(+m)+(+e.value))%1440;return(t/60|0)+':'+(+(m=t%60)<10?'0'+m:m)}));}

あ～きにしなくてもよいよ。
じこまんぞくなんだし。

いか、かんけいなし。
「たにすくろーるの・・」どこがわるかった？
ぎゃくまわりもできて、まうすでとまって・・

ここです！といいきるね～。すごい。

補足

時間表示部分の修正ありがとうございました。
大変助かります。
スクロールの部分ですが、IEで見ているせいか？
追加する部分を間違えたのか？
（削除する部分もあるのかもしれませんが）
特に何も変化がなかったです。

回答No.8

babu_baboo

selectようそのうえで、くるくるするやつかいてみた。
これはこれで、もんだいありそうなきがしてる。
だれかおしえてください！

ぜんかくくうはくは、はんかくに～、とかいって
さいしょにかいたこーども、こんなふうにしろとかは、い・わ・な・い・の。
とかいわせなぁ～ぃ

/*@if( @_jscript )
　document.attachEvent( 'onmousewheel'
@else@*/
　addEventListener( 'DOMMouseScroll'/*@end@*/,

　function ( evt ) {
　　var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/,ts, no;

　　if( 'SELECT' === e.nodeName && 'select-one' === e.type ) {
　　　no = e.selectedIndex + ( (evt.wheelDelta || -evt.detail ) < 0 ? 1: -1);
　　　ts = e.options;

　　　if( -1 < no && no < ts.length ) {
　　　　e.focus();
　　　　e.selectedIndex = no; // ts[ no ].selected = true;
　　　　e.onchange();
　　　}
　　}
　}, false);

補足

マウスのホイールでクルクルする時用の記述ということでしょうか？
最初に書いていただいたプログラムの状態でも
ホイールでクルクルできていたのですが、それとは別でしょうか？
</script>の上に上記の記述を追加しましたが
（追加する場所が違うせいかもしれないのですが）
特に変化がないように思えました（汗
せっかく色々と丁寧にしてくださっているのに
理解できずにすみません。

回答No.7

babu_baboo

ちゅういてん。

じかんのけいさんは、まいなすもかのうだけど、0：00からマイナスはどうすの？
23：59をこえた、ひょうじはどうするの？
くっきーのほぞんにはげんかいがあるけど、そのちぇっくは？
せるのいちなどは、きめうちだけど、それでよいの？
と、じぶんにつっこみをいれてみる。

補足

時間表示の修正ありがとうございました。
時間の計算、マイナスは不要ですが
マイナスの場合はまた色々と変わるのですね。
23:59時を越えた場合は0:10分（とか00:10）といったように
表示されると嬉しいですが、現状の24:10の記載でも大丈夫です。
セルの位置の決め打ち…？（必ず決まった枠内に表示されるという意味でしょうか）
それでしたら、特に別のセルに表示させるような事はないので大丈夫です。
クッキーの保存の限界というのは、文字数的な問題でしょうか？
メモ欄に長文を打つことはないので、大丈夫だと思います。
色々勘違いしているようでしたらすみません。

ブラウザ上では同じように見えるプログラムも
色んな書き方？があるのですね。
少しでも理解できるように本を買って勉強してみたいと思います。
こんなに色々てんこ盛りな状態のプログラムでも
慣れている方ですと手打ちでもそんなに早く書けるのですね。
html作成ソフトを使ってhtmlを作る時にすら時間がかかる自分には
未知の世界な気がしますが、少しでも慣れるように頑張りたいと思います。

回答No.5

fujillin

#2です。

＞時間表示の時間の部分が1桁の場合、結果表示の時間が変になって
＞しまいました
ありゃ、やっちまってたか～
　t.setHours(parseInt(ds[0]));
　　　　　　↓
　t.setHours(1 * ds[0]);
で修正されるはずです。

＞時間選択部分を増やした場合に計算式を入れていくこと
＞行数を増やすのが少し大変な感じがしましたが
計算式は不要にしているはずですけど？？
選択した値が「○○分前」または「○○分後」になっていればそれに応じて計算するようになっているはず。なのでoptionはいくつ増えてもOK。

時間の選択肢がそれぞれ行によって違うのかと思っていたので、直接記述する方法で考えていたけれど、みな同じというのであれば1個だけHTMLに書いておいて、あとはスクリプトで必要な個数だけコピーすればよいでしょう。（#3様がなさっている方法）
（選択肢の内容が違う場合も可能だけれど、少し工夫が必要）

メモ欄のクッキーには対応させていないけど、#3様がそこも対応したのをご提示なので、そちらのほうがそのまま利用できると思ふ。

＞皆さんほとんど手打ちとか
ちなみに私はメモ帳でその都度作成（全部手打ち）

補足

早速の修正ありがとうございます。
計算式入れなくて平気なのですか！
わからないまま適当な事をいってしまい申し訳ございません。

それと、説明不足で申し訳ございません、おっしゃる通り
時間選択肢はどの行も同じです。
一見同じような動作のプログラムでも
記述方法？は沢山あるのですね。驚いております。
それを皆さん手打ちされているということで、更に驚きです。
本などを購入し、勉強してみたいと思います。
色々とご親切にありがとうございました。

回答No.4

babu_baboo

ごめん！もじすうせいげんで、とちゅうできれてた。
function setNxtText(e

の頭から以下
function setNxtText(e,v,o){o=e;while(o=o.nextSibling)if(o.nodeName==e.nodeName)return o./*@if(1)innerText@else@*/textContent/*@end@*/=v;}
function hoge(e,v,t){if(e.value&&(v=getPreText(e.parentNode)||getIma()))setNxtText(e.parentNode,v.replace(/^(?:(\d+):(\d+))$/,function(a,h,m){t=(+h)*60+(+m)+(+e.value);return(t/60|0)+':'+(t%60)}));}
function fuga(e,p){for(var ip=document.getElementsByName('memo'),i=0,o;o=ip[i];i++)if(o==e) setCookie('tr'+i, e.value,100)}
</script>

あとは、かいせきしてね。

補足

ご丁寧にどうもありがとうございました。
希望通りの動きで感激しております。

記述内容は正直まったくわからないのですが、色々いじってみたところ、
時間選択部分、他にも色々な時間を追加したかったので
option valueで時間指定できる点とても助かりました。
for(var i=4;i--;)の4の数値を変えると行数も変更できるのですね。
すみません、一つだけ…結果表示の分数が1～9分の時に
1桁で表示されるのですが
（取得時間9:54分のときに、10分後を選ぶと10:4と表示される）
10:04と表示できるようにするにはどうしたら良いのでしょうか。
色々いじっておりますが、良く分からなかったのでよろしければ教えてください。

それと、こういうプログラムを書くときは、
皆さん何かソフトを使っているのでしょうか？
html作成ソフトの中にはJavaSprictの簡単な物のサンプルが
入っているものはありますが、今回のように計算等もできるような
JavaSprictを作るようなソフトもあるのでしょうか？
それとも、皆さんほとんど手打ちとか、前に作ったプログラム等から
コピーしたりしながら作成されているのでしょうか？

回答No.3

babu_baboo

しんせつをよそおった、あくにんのようなおれ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>

<body>
<form action="#">
<table border="1" summary="こんなてんこもりなようぼうというよりむぼうにちかし">
<thead>
<tr>
<th>時間取得<th>時間表示<th>時間選択<th>結果表示<th>メモ欄

<tbody id="add_tb">
<tr id="copy_tr">
<td>
<input type="button" value="時間取得">
<td>
&nbsp;
<td>
<select name="abc" onchange="hoge(this)">
<option value="" selected>-
<option value="10">10分後
<option value="20">20分後
<option value="70">70分後
</select>
<td>
&nbsp;
<td>
<input type="text" size="20" name="memo" value="" onchange="fuga(this)">
</table>

</form>

<script type="text/javascript"><!--
//@cc_on
for(var i=4;i--;)document.getElementById( 'add_tb' ).appendChild(document.getElementById('copy_tr').cloneNode(true));
for(var ip=document.getElementsByName('memo'),i=0,o;o=ip[i];i++)o.value=getCookie('tr'+i)||'';
document./*@if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/
'click', function(evt){var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
if('INPUT'==e.nodeName&&'button'==e.type&&'時間取得'==e.value)e.parentNode.nextSibling.firstChild.nodeValue=getIma()}, false );
function getCookie(name){
name=encodeURIComponent(name).replace(/([.*()])/g,'\\$1');
var value=document.cookie.match(RegExp(name+'\\s*=\\s*(.*?)(?:[\\s;,]|$)'));
return value?decodeURIComponent(value[1]):'';
}
function setCookie(name,value,day,path,domain){
return document.cookie=encodeURIComponent(name)+'='+encodeURIComponent(value)+
'; '+'expires='+new Date((new Date)-86400000*-day).toUTCString()+
'; '+(path?'path='+encodeURI(path)+';':'')+(domain?'domain='+encodeURI(domain)+';':'');
}
function getIma(m){with(new Date)return getHours()+':'+((m=getMinutes())<10?'0'+m:m)}
function getPreText(e,o){o=e;while(o=o.previousSibling)if(o.nodeName==e.nodeName)return o./*@if(1)innerText@else@*/textContent/*@end@*/}
function setNxtText(e

回答No.2

fujillin

何をしたいのかよくわかりませんが、特定のidやnameに頼らずに要素の位置関係で処理するようにしてあげれば、数が増減しても対応可能では？

本日、頭痛がひどいため、かなりいい加減。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
#timetable { border-collapse:separete; border: 1px ridge #aaa; }
#timetable thead { background-color:#eed; }
#timetable td { border:1px ridge #aaa; }
#timetable td, #timetable button, #timetable select { width:120px; text-align:center; }
</style>

<script type="text/javascript">
<!--
window.onload = function() {
var i, t = document.getElementById('timetable');
addEvent(t, 'click', setTime);
t = t.getElementsByTagName('SELECT');
for (i=0; i<t.length; i++) addEvent(t[i], 'change', setTime);
function addEvent(obj, evt, func) {
if (obj.addEventListener) obj.addEventListener(evt, func, false); else if (obj.attachEvent) obj.attachEvent('on' + evt, func);
}
}
function setTime(evt) {
var t = evt.target || evt.srcElement;
var tr = t.parentNode, td, tn = t.nodeName;
var dt, ds, dsel;
var tf = tn=='BUTTON'?1:tn=='SELECT'?3:0;
if ((tf != 1 || evt.type != 'click')&&(tf != 3 || evt.type != 'change')) return;
while (tr.nodeName != 'TD') tr = tr.parentNode;
tn = tr;
while (tr.nodeName != 'TR') tr = tr.parentNode;
td = tr.getElementsByTagName('TD');
if (tn != td[tf-1]) return;

if (tf == 1) td[1].innerHTML = d2str(new Date());
ds = td[1].innerHTML.split(':');
dt = new Date();
if (tr.getElementsByTagName('SELECT')[0].value.match(/^([0-9]+)分(前|後)$/) && ds.length == 2) {
dsel = (RegExp.$2=='前'?-1:1) * RegExp.$1;
dt.setHours(parseInt(ds[0]));
dt.setMinutes(parseInt(ds[1]) + dsel);
td[3].innerHTML = d2str(dt);
} else { td[3].innerHTML = '&nbsp;'; }
function d2str(d) {
h = '0' + d.getHours(), m = '0' + d.getMinutes();
return h.substr(h.length-2) + ':' + m.substr(m.length-2);
}
}

-->
</script>
</head>

<body>
<table id="timetable">
<thead>
<tr>
<td>時間取得ボタン</td>
<td>時間表示</td>
<td>時間選択</td>
<td>結果表示</td>
<td>メモ欄</td>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button">時間取得</button></td>
<td>&nbsp;</td>
<td><select name="s1">
<option value="10分後">10分後
<option value="20分後">20分後
</select></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><button type="button">時間取得</button></td>
<td>&nbsp;</td>
<td><select name="s2">
<option value="30分後">30分後
<option value="30分前">30分前
</select></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

お礼

ご丁寧にありがとうございました。
体調不良中にわざわざすみませんでした。
時間表示の時間の部分が1桁の場合、結果表示の時間が変になってしまいました。
時間選択部分を増やした場合に計算式を入れていくこと
行数を増やすのが少し大変な感じがしましたが
デザインまで綺麗に作成していただけて嬉しいです。参考にさせていただきます。
どうもありがとうございました。

回答No.1

nda23

１スレッドであれもこれもは如何なものでしょう。
とりあえず、現在時間の取得と、10分後の作り方を
示します。
var 現在 = new Date();
var 十分後 = new Date();
十分後.setTime(現在.getTime() + 600000);
//試しに表示
alert(現在);
alert(十分後);

「マウスイベントを扱う」、「クッキーに残す」は
別スレッドで問い合わせた方がヨロシイと思います。

補足

回答ありがとうございます。
ごちゃごちゃ詰め込んでしまいすみません。

毎回、10分後という訳ではなく、
メニューから10分後や20分後など、選んで計算できればいいなと思っています。

時間の取得は、下記のようにしてみました。
<script language="javascript">
<!--//
var tid;
function ShowTime()
{

var dtNowLocal = new Date;
var dtNow = new Date;
var strHour;
var strMinutes;

dtNow.setTime(dtNowLocal.getTime() + (dtNowLocal.getTimezoneOffset() + 540) * 60 * 1000);

strHour = dtNow.getHours();
strMinutes = dtNow.getMinutes();

if (strHour < 10)
{
strHour = "0" + strHour;
}
if (strMinutes < 10)
{
strMinutes = "0" + strMinutes;
}

document.forms["frmTime"].elements["txtTime"].value=strHour+":"+strMinutes;
}
//-->
</script>

これだと、TABLE内に<TR></TR>が一行だと時間取得はできましたが
添付画像のように数行にすると記載されなくなってしまいました。
もう少し調べてみたいと思います。