ウォッチ
JavaSprictで時間取得と指定した経過時間の結果を表示させたいです。
今まではエクセルでやっていたのですが
web上でやらなければならない状態になったので調べたところ
JavaSprictだと出来るのではないかと思ったのですが
まったく解らない状態でして、ご教示お願いします。
色々調べて貼り付けただけの状態なので、現状全く動かない状態です。
一行の場合、時間取得はできたのですが、
複数行になると時間取得すら出来ない状態です。。
とりあえず添付画像のようにhtmlで形を作ってみましたが、やりたい事は下記のとおりです。
１．時間取得ボタンを押す（24時間表示）
２．押したボタンの横にある時間表示フォームに時間が表示される
３．時間選択メニューから経過時間を選択
４．結果表示に、時間表示フォームに表示された時間＋時間選択の時間が表示される
これを複数行でできるようにしたいです。
時間取得ボタンで取得した時間が10:00で、10分後を選択した場合
結果表示には10:10と出るようにしたいです。
時間選択メニューをマウスのホイールで動かした時に
結果表示の時間も一緒に動くようにしたいです。
時間表示と結果表示は、TABLE枠内であれば
特にフォーム内に記載される必要はないです。
メモ欄には備考欄として文字を記入できるようにしたいです。
できれば、メモ欄はクッキーに保存されて残るようにしたいです。
色々と指定が多く面倒なことかと思いますが
JavaSprictにお詳しい方がいらっしゃいましたらよろしくお願いします。
No.1
- 回答日時：
１スレッドであれもこれもは如何なものでしょう。
とりあえず、現在時間の取得と、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>が一行だと時間取得はできましたが
添付画像のように数行にすると記載されなくなってしまいました。
もう少し調べてみたいと思います。
-
-
- 0
- 件
-
No.2
- 回答日時：
何をしたいのかよくわかりませんが、特定の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 = ''; }
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></td>
<td><select name="s1">
<option value="10分後">10分後
<option value="20分後">20分後
</select></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button type="button">時間取得</button></td>
<td></td>
<td><select name="s2">
<option value="30分後">30分後
<option value="30分前">30分前
</select></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
-
-
- 0
- 件
-
ご丁寧にありがとうございました。
体調不良中にわざわざすみませんでした。
時間表示の時間の部分が1桁の場合、結果表示の時間が変になってしまいました。
時間選択部分を増やした場合に計算式を入れていくこと
行数を増やすのが少し大変な感じがしましたが
デザインまで綺麗に作成していただけて嬉しいです。参考にさせていただきます。
どうもありがとうございました。
No.3
- 回答日時：
しんせつをよそおった、あくにんのようなおれ。
<!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>
<td>
<select name="abc" onchange="hoge(this)">
<option value="" selected>-
<option value="10">10分後
<option value="20">20分後
<option value="70">70分後
</select>
<td>
<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
-
-
- 0
- 件
-
No.4
- 回答日時：
ごめん！もじすうせいげんで、とちゅうできれてた。
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を作るようなソフトもあるのでしょうか？
それとも、皆さんほとんど手打ちとか、前に作ったプログラム等から
コピーしたりしながら作成されているのでしょうか？
-
-
- 0
- 件
-
No.5
- 回答日時：
#2です。
＞時間表示の時間の部分が1桁の場合、結果表示の時間が変になって
＞しまいました
ありゃ、やっちまってたか～
t.setHours(parseInt(ds[0]));
↓
t.setHours(1 * ds[0]);
で修正されるはずです。
＞時間選択部分を増やした場合に計算式を入れていくこと
＞行数を増やすのが少し大変な感じがしましたが
計算式は不要にしているはずですけど？？
選択した値が「○○分前」または「○○分後」になっていればそれに応じて計算するようになっているはず。なのでoptionはいくつ増えてもOK。
時間の選択肢がそれぞれ行によって違うのかと思っていたので、直接記述する方法で考えていたけれど、みな同じというのであれば1個だけHTMLに書いておいて、あとはスクリプトで必要な個数だけコピーすればよいでしょう。（#3様がなさっている方法）
（選択肢の内容が違う場合も可能だけれど、少し工夫が必要）
メモ欄のクッキーには対応させていないけど、#3様がそこも対応したのをご提示なので、そちらのほうがそのまま利用できると思ふ。
＞皆さんほとんど手打ちとか
ちなみに私はメモ帳でその都度作成（全部手打ち）
この回答への補足
早速の修正ありがとうございます。
計算式入れなくて平気なのですか！
わからないまま適当な事をいってしまい申し訳ございません。
それと、説明不足で申し訳ございません、おっしゃる通り
時間選択肢はどの行も同じです。
一見同じような動作のプログラムでも
記述方法？は沢山あるのですね。驚いております。
それを皆さん手打ちされているということで、更に驚きです。
本などを購入し、勉強してみたいと思います。
色々とご親切にありがとうございました。
-
-
- 0
- 件
-
No.6ベストアンサー
- 回答日時：
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で手打ちです。きほんてきなのはじぶんせんようのらいぶらりからこぴぺ。
もうそう５ふん。てうち１０ふん。むしとり３０ふんくらいかな？
-
-
- 0
- 件
-
まだまだわからない事だらけですが
希望通りの動きになってすごく嬉しいです。
色々とどうもありがとうございました。
頑張って勉強していきたいと思います。
回答下さったお二方には本当に感謝しております。
No.7
- 回答日時：
ちゅういてん。
じかんのけいさんは、まいなすもかのうだけど、0：00からマイナスはどうすの？
23：59をこえた、ひょうじはどうするの？
くっきーのほぞんにはげんかいがあるけど、そのちぇっくは？
せるのいちなどは、きめうちだけど、それでよいの？
と、じぶんにつっこみをいれてみる。
この回答への補足
時間表示の修正ありがとうございました。
時間の計算、マイナスは不要ですが
マイナスの場合はまた色々と変わるのですね。
23:59時を越えた場合は0:10分（とか00:10）といったように
表示されると嬉しいですが、現状の24:10の記載でも大丈夫です。
セルの位置の決め打ち…？（必ず決まった枠内に表示されるという意味でしょうか）
それでしたら、特に別のセルに表示させるような事はないので大丈夫です。
クッキーの保存の限界というのは、文字数的な問題でしょうか？
メモ欄に長文を打つことはないので、大丈夫だと思います。
色々勘違いしているようでしたらすみません。
ブラウザ上では同じように見えるプログラムも
色んな書き方？があるのですね。
少しでも理解できるように本を買って勉強してみたいと思います。
こんなに色々てんこ盛りな状態のプログラムでも
慣れている方ですと手打ちでもそんなに早く書けるのですね。
html作成ソフトを使ってhtmlを作る時にすら時間がかかる自分には
未知の世界な気がしますが、少しでも慣れるように頑張りたいと思います。
-
-
- 0
- 件
-
No.8
- 回答日時：
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>の上に上記の記述を追加しましたが
（追加する場所が違うせいかもしれないのですが）
特に変化がないように思えました（汗
せっかく色々と丁寧にしてくださっているのに
理解できずにすみません。
-
-
- 0
- 件
-
No.9
- 回答日時：
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で見ているせいか？
追加する部分を間違えたのか？
（削除する部分もあるのかもしれませんが）
特に何も変化がなかったです。
-
-
- 0
- 件
-
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- Visual Basic（VBA） VBAで早押しゲームを作りたい 4 2022/05/12 13:46
- 確定申告 確定申告をe-Tax（スマホ）で行う時の入力方法について 1 2023/02/12 15:38
- LINE スマホを替えてから、LINEの画像が表示されなくなりました 1 2022/10/04 13:41
- Excel（エクセル） ＜スプレッドシート＞IF関数の複数条件について 5 2022/10/27 14:38
- Windows 10 Windows10パソコン右クリックメニューで「切り取り」と「コピー」を選択し間違わないようにしたい 3 2022/04/16 10:35
- Visual Basic（VBA） Excel VBA キーワードから列を取得して、さらに空欄行を非表示にする 3 2022/10/21 22:49
- Visual Basic（VBA） ユーザーフォーム「frm_基本❶」を立ち上げると新規で入力する行数を右下のNoとして表示しています。 1 2023/03/16 19:02
- Excel（エクセル） マクロでボタンにつける名前がどこに設定されているかわからないケースがありました。 1 2023/06/19 19:37
- Excel（エクセル） Excel 時間の引き算でマイナスを表示させることは出来ますか 3 2023/06/14 21:54
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブル内のチェックボックス...
-
VBSでの自動ログイン
-
Ifが正常に動作しない。
-
追加したテキストボックスとテ...
-
複数のselect値で1つも選択され...
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは？
-
<td>の中のonClick="location" で
-
JavaScriptにて動的に配列を作...
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
-
javascriptで画像の移動
-
selectを変更不可にしたい
-
selectを使った計算
-
セレクトメニューで選択された...
-
テキストフィールドに入力した...
-
フォームから入力すると、入力...
-
JSのボタンを複数う使うには
-
空のテーブルを表示させたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptの「.querySelectorA...
-
複数のselect値で1つも選択され...
-
チェックボックス付きのテーブ...
-
ラジオボタンが選択されたらテ...
-
入力チェックの外部スクリプト...
-
Javascriptの電卓で最初の何も...
-
文字数を数える際に空白、改行...
-
画面の２重起動をチェックする...
-
画面表示とともにtableの指定の...
-
jQueryで合計を出したい
-
localStorageでのcheckbox制御
-
JavaScriptによる自動計算フォーム
-
同一nameの input type="text"...
-
テーブル内のチェックボックス...
-
formで項目を連結したい
-
クリックしたラジオボタンの行...
-
Javascriptで自動計算の合計の...
-
ラジオボタンを一括で操作する...
-
送信ボタン連打を抑止したいです
-
ボタン押下すると一行テキスト...
おすすめ情報
