はじめまして。最近HTMLとCSSとJavascriptを使用し、ネットや本を参考にしながら簡単なブラウザ上のメモアプリを作っているのですが、メモを追加して追加されたメモの横に↑と↓の矢印をつけてクリックした分だけ上下入れ替えするようなものを作りたいのですがなかなか分からずなので教えてください。画像の赤字のような感じです・・・。それともう一つ、メモの隣に記入した時間が表示されるよう(画像:水色の文字)にしたいのですが本をみてもなかなか反映されません。こちらも出来ればお応えお願いいたします。
【コード】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="memo stylesheet.css">
<title>memo</title>
<body onload="load()" >
<div><form submit="return false;">
<header><input type="text" id="newMemo">
<input type="button" id="addBtn" value="追加" onclick="addMemo()"></header></form>
<form>
<p><button id="saveBtn" onclick="save()">保存</button>
<button id="clearBtn" onclick="clearAllMemo()">すべて削除</button></p>
</form>
<div id="disp"></div>
</body>
<script>
var ls = window.localStorage;
// ストレージに保存する際のキー識別用接頭辞
var AppName = 'MemoAppVer1.';
// 入力値を画面で一時的に保存するための配列
var temp = new Array(0);
// メモの追加
function addMemo() {
if(temp.length == 10) {
alert('保存できるメモの上限は10件です。');
return;
}
var v = $('newMemo').value;
if(v == '' || v == null) {
alert('メモが入力されていません。');
return;
}
temp[temp.length] = v;
display();
}
// メモ一覧の表示
function display() {
$('newMemo').value = '';
var s = '<table class="example">';
for(var i = 0; i < temp.length; i++) {
var btn = '<input type="image" ' +
' src="gomibako.png" id onclick="removeMemo(' + i + ')">';
s += '<tr class="table"><td class="table">' +
temp[i] + '</td><td class="table">' + btn +
'</td><tr>';
}
s += '</table>';
$('disp').innerHTML = s;
}
// メモを1件削除
function removeMemo(no) {
temp.splice(no, 1);
display();
}
// 入力内容をLocalStorageに保存
function save() {
// 以前に登録されているキーと値を削除
for(var i = 0; i < 10; i++) {
if(ls[AppName + 'dataId' + i]) {
ls.removeItem(AppName + 'dataId' + i);
}
}
var len = temp.length;
// Storageに保存。キーは[アプリ名 + データID]という形式にする
for(var i = 0; i < len; i++) {
ls[AppName + 'dataId' + i] = temp[i];
}
display();
}
// 起動時に呼出される
function load() {
for(var i = 0; i < 10; i++) {
if(ls[AppName + 'dataId' + i]) {
temp[i] = ls[AppName + 'dataId' + i];
}
}
display();
}
// ストレージの内容をすべて削除する
function clearAllMemo() {
var ans = confirm('メモをすべて削除しますか?');
if(ans) {
temp.length = 0;
save();
}
}
// IDの取得
function $(id) {
return document.getElementById(id);
}
</script>
</html>
【CSSコード】
body{
text-align:center;
margin-left:auto;
margin-right:auto;
width: 370px;/*全体の幅*/
min-height:450px;
font-size: 20px;/*文字サイズ*/
border: dashed 1px #666666;/*枠の色*/
padding: 1px;
}
header{/*タイトル部分の設定*/
color: #FFFFFF;
background: #00bfff;/*背景色*/
font-size: 120%;
font-family: "Lucida Sans Unicode", sans-serif;
text-align: left;/*左寄せ*/
margin: 0;
padding: 3px 0.5em 2px 0.5em;
text-align: right;
}
p{/*内容部分*/
text-align:right;
margin: 0;
padding: 0.2em;
}
h2{
padding: 1em;/*テキスト部分の余白*/
margin: 0;
}
/* --- 表全体 --- */
table.example {
text-align:left;
width: 280px; /* 表の幅 */
border: 1px #c0c0c0 none; /* 大枠の境界線 */
border-collapse: collapse;
font-size: 80%;
margin: 20px 60px;
}
table.example tbody td {
height: 30px;
border-bottom: 1px #c0c0c0 dotted; /* データセルの下境界線 */
}
No.3ベストアンサー
- 回答日時:
// メモを一つ上へ
function upMemo(no) {
var tmp1 = temp[no];
var ntmp = new Array();
for(var i = 0; i < temp.length; i++) {
if(i == no - 1) {
ntmp.push(tmp1);
ntmp.push(temp[i]);
} else if(i != no) {
ntmp.push(temp[i]);
}
}
temp = ntmp;
display();
}
// メモを一つ下へ
function dnMemo(no) {
var tmp1 = temp[no];
var ntmp = new Array();
for(var i = 0; i < temp.length; i++) {
if(i == no + 1) {
ntmp.push(temp[i]);
ntmp.push(tmp1);
} else if(i != no) {
ntmp.push(temp[i]);
}
}
temp = ntmp;
display();
}
// メモ一覧の表示
function display() {
$('newMemo').value = '';
var s = '<table class="example">';
for(var i = 0; i < temp.length; i++) {
var up = '';
if(i != 0) {
up = '<input type="button" value="↑" onclick="upMemo(' + i + ')">';
}
var dn = '';
if(i != temp.length - 1) {
dn = '<input type="button" value="↓" onclick="dnMemo(' + i + ')">';
}
var btn = '<input type="image" ' +
' src="gomibako.png" id onclick="removeMemo(' + i + ')">';
s += '<tr class="table">' +
'<td class="table">' + temp[i] + '</td>' +
'<td class="table">' + up + '</td>' +
'<td class="table">' + dn + '</td>' +
'<td class="table">' + btn + '</td>' +
'<tr>';
}
s += '</table>';
$('disp').innerHTML = s;
}
---------------------------------------------
//メモを一つ上へ
//メモを一つ下へ
を追加して、
// メモ一覧の表示
を差し替えてみてください。
わあああ二回もコメントありがとうございます!まず書いてくださったものをコピー&ペーストで貼り付け動かしてみたら私のやりたかったことがそのままでした・・・!ご丁寧に画像まで添付してくださってありがとうございます!これからひとつひとつどんな仕組みになってるか見ていこうと思います!本当にありがとうございました!
No.4
- 回答日時:
// メモの追加
function addMemo() {
if(temp.length == 10) {
alert('保存できるメモの上限は10件です。');
return;
}
var v = $('newMemo').value;
if(v == '' || v == null) {
alert('メモが入力されていません。');
return;
}
var dd = new Date();
var mm = dd.getMonth() + 1;
var dt = dd.getDate();
var hh = dd.getHours();
var mn = dd.getMinutes();
if(mm < 10){ mm = "0" + mm; }
if(dt < 10){ dt = "0" + dt; }
if(hh < 10){ hh = "0" + hh; }
if(mn < 10){ mn = "0" + mn; }
temp[temp.length] = v + ' ' + mm + '月' + dt + '日' + hh + '時' + mn + '分';
display();
}
-----------
日付もあったのですね。
// メモの追加
を差し替えてください。
No.2
- 回答日時:
こんにちは。
使ったことがありませんが、保存にはウェブストレージをご利用なさっているようですね。
>メモアプリを作っているのですが~~
ここまで作られたのならあとは簡単だと思いますが、ゴミ箱の処理と同じ要領でできるのではないでしょうか?
表示はdisp関数で毎回データからを全部を作成し直すようになさっているので、修正はしやすいと思います。
例えば、dispの中で
'<span class="arrow" onclick="hoge(' + i + ')">↑</span>'
のようなHTMLをボタンの前に付け加えてあげれば、「↑」が表示されて、クリック時には関数hoge(n)が呼び出されるようになります。
hogeの引数にはメモの番号(=tempのインデックスと同じ)が渡されますので、それに応じてtempのデータを入れ替えてあげれば良いことになりますね。(入れ替えるところが、削除とちょっと違う処理になるだけです)
「↓」も同様ですが、↑も↓も基準となるインデックスを一つずらして考えれば、「入れ替える」という同じ処理として考えることができますので、インデックスをずらす処理だけの違いなので同じ処理関数で処理できるものと思います。
入れ替え処理が終わったところで、他の処理と同様にdisp()を呼び出せば、新しい内容で表示されることになるでしょう。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
イラレでナンバリングする方法
-
なぜmatchメソッドがエラーにな...
-
ジェネレーターの作り方
-
翌月を取得するGASが分かりません
-
指定日数経過でHTML上のデータ...
-
1日1回だけ引けるjavascriptお...
-
javascriptで複数キーワード検...
-
pdfに丸秘などのスタンプを...
-
GoogleMap 住所から座標の取得
-
明日・明後日・明々後日
-
googleスプレッドシートのApps ...
-
JavaScriptで平日のみをカウン...
-
ASP.NET MVCでObjectをjsに渡す
-
記述方法について
-
HTMLで作った時報アプリが動き...
-
gasについて
-
ASP.NETのコントロールの値をJa...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
google apps scriptの終了のさせ方
-
ジェネレーターの作り方
-
ASP.NETのコントロールの値をJa...
-
C#で、ContextMenuStripに動的...
-
GASでundefinedエラーが出ます
-
なぜmatchメソッドがエラーにな...
-
ASP.NET MVCでObjectをjsに渡す
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
シンプルなweb版スタンプラリー...
-
html javascript リンク先アド...
-
ローカルにあるファイルを検索...
-
javascriptでiframeのURL変更は?
-
javaScript textareaの一行あた...
-
イベントが初めの一回しか起き...
-
C# 演算 奇数と偶数 表現の仕方
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
条件に応じて座席表をつくりた...
おすすめ情報
旧来…ですか?すみませんそれがなんなのかすらわからず…。これが求めてくださってる答えかどうかわからないですが、上に貼ったコードをhtmlで保存し、下のコードをcssで保存し、同じファイルに入れて上のhtmlファイルをウェブブラウザで開いております。