前回記事の解説というか、コードを見やすいように表示しつつちょこちょこコメントを入れましたφ(..)
ラジオボタン、テキストボックス、プルダウンリスト、テキストエリア等色々と試しているので、
HTML/JavaScriptで何か作ってみたい場合の参考になればと思います。
↓下記記事の説明になります。
fintechdiary.hatenablog.com
商品一覧
HTML
★ポイント
・ラジオボタンの使用
・ラジオボタンを選択するとonclickイベントで[選択中の商品]の表示を切り替える(ChangeGoodsInfo)
・画像をクリックするとonclickイベントでラジオボタンが選択される(ClickGoodsImage)
<p>以下より商品をお選び下さい(画像クリックでも選択可)。</p>
<p>※価格は税別価格です</p>
<p><form name = fr_good></p>
<br/>
<p><input name="kapu" type="radio" value="kapu_html" id = "kapu_html" onclick="ChangeGoodsInfo(1)" />支払可能見込額算出サンプルコード(html)</p>
<p>[ダウンロード版]￥ 400</p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/natsumedeus/20180506/20180506201036.png" border=0 onClick="ClickGoodsImage(1)" style="cursor: hand;">
<br/>
<br/>
<p><input name="kapu" type="radio" value="kapu_js" id = "kapu_js" onclick="ChangeGoodsInfo(2)" />支払可能見込額算出サンプルコード(JavaScript)</p>
<p>[ダウンロード版]￥ 600</p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/natsumedeus/20180506/20180506201302.png" border=0 onClick="ClickGoodsImage(2)" style="cursor: hand;">
<br/>
<br/>
<p><input name="kapu" type="radio" value="kapu_both" id = "kapu_both" onclick="ChangeGoodsInfo(3)" />支払可能見込額算出サンプルコード(html/JavaScript)</p>
<p>[ダウンロード版]￥ 900</p>
<p><span style="color: #ff0000">※html/JavaScript同時購入で10%割引</span></p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/natsumedeus/20180506/20180506203926.png" border=0 onClick="ClickGoodsImage(3)" style="cursor: hand;">
<p></form></p>
★ポイント
・CASE文を使用
・ChangeGoodsInfoを呼び出し、ラジオボタンを選択した時と同様に[選択中の商品]･[購入金額(税別)]の表示を切り替える
<script language="javascript">
<!--
function ClickGoodsImage(num)
{
switch(num) {
case 1:
ChangeGoodsInfo(1);
document.getElementById('kapu_html').checked=true;
break;
case 2:
ChangeGoodsInfo(2);
document.getElementById('kapu_js').checked=true;
break;
case 3:
ChangeGoodsInfo(3);
document.getElementById('kapu_both').checked=true;
break;
}
}
function ChangeGoodsInfo(num)
{
switch(num) {
case 1:
goods_temp = "支払可能見込額算出サンプルコード(html)";
amaon_temp = "400";
break;
case 2:
goods_temp = "支払可能見込額算出サンプルコード(JavaScript)";
amaon_temp = "600";
break;
case 3:
goods_temp = "支払可能見込額算出サンプルコード(html/JavaScript)";
amaon_temp = "900";
break;
}
document.getElementById("select_goods").textContent = goods_temp;
document.getElementById("goods_amount").textContent = '￥' + amaon_temp;
}
</script>
お支払い
カード情報のご入力
HTML
★ポイント
・テキストボックスの使用(カード名義人･カード番号)
・プルダウンリストの使用(有効期限)
・カード番号の入力後、onkeyupイベントにより[ご利用カード]の表示を切り替える(ChangeCardInfo)
<p>以下のカード情報をご入力下さい。</p>
<p>カード名義人(半角ローマ字) | カード番号 (半角数字) | 有効期限</p>
<form name = fr_card_info>
<input name="card_name" type="text" value="" placeholder="カード名義人(半角ローマ字)" size = "21" maxlength = "30"/>
<input name="card_num" type="text" value="" placeholder="カード番号 (半角数字)" size = "16" maxlength = "16" onkeyup="ChangeCardInfo(this.value)" />
<select name="month">
<option selected="selected" value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option>
<option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option>
<option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
</select>
<select name="year">
<option value="2018">2018</option><option value="2019">2019</option><option selected="selected" value="2020">2020</option>
<option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option>
<option value="2025">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option>
</select>
</form>
<p>※JCB/VISA/MASTERブランドをご利用頂けます。先頭3(JCB)/4(VISA)/5(MASTER)且つ16桁の番号以外は購入時にエラーとなります。</p>
<p>※カード情報の収集はしてませんが、念のため適当な番号を入力してね！</p>
★ポイント
・substrを使用して文字列を編集
<script language="javascript">
<!--
function ChangeCardInfo(change_card_num)
{
document.getElementById("use_card_num").textContent = '************' + change_card_num.substr(12,4);
}
</script>
お支払い方法の選択
HTML
★ポイント
・プルダウンリストの使用
<p>一括払い/リボ払いのみご利用頂けます。</p>
<p><form name = fr_pay_method>
<select name="pay_method" onchange="ChangePayInfo(this.value)">
<option selected="selected" value="一括">一括</option>
<option value="リボ">リボ</option>
</select>
</form></p>
<script language="javascript">
<!--
function ChangePayInfo(change_pay_method)
{
document.getElementById("select_pay_method").textContent = change_pay_method;
}
</script>
商品ご購入
HTML
★ポイント
・入力によって下記の表示が切り替わる
・購入ボタンを押すと購入処理(purchase)を実行
<p>以下の内容でよろしければ、”購入”ボタンをクリックして下さい。</p>
<p>-----------------------------------------------------------------------------------------------------------</p>
<span>[選択中の商品]</span>
<span id="select_goods">商品未選択</span>
<span>[購入金額(税別)]</span>
<span id="goods_amount">￥0</span>
<span>[ご利用カード]</span>
<span id="use_card_num">未入力</span>
<span>[お支払い方法]</span>
<span id="select_pay_method">一括</span>
<span>[ダウンロードリンク]</span>
<a id="download_link" href="" target="_blank"></a>
<p>※ダウンロードリンクはご購入後に表示されます</p>
<p>-----------------------------------------------------------------------------------------------------------</p>
<input type="button" value="購入" onclick="purchase()">
★購入処理(purchase)の説明
(1)入力チェック
入力された商品情報、カード情報が不正な値でないかチェックする。
チェックOKの場合、クレジット売上票の編集、ダイアログメッセージの表示、ダウンロードリンクの表示を行う。
チェックNGの場合、ダイアログメッセージを表示し処理を終了する。
(2)クレジット売上票編集(edit_credit_slip)
入力された商品情報、カード情報を元に、テキストエリアに表示するクレジット売上票の内容を編集する。
(3)ダウンロードリンク表示(show_download_link)
選択された商品のダウンロードリンクを表示する。
★ポイント
処理を説明する際には、IPOを考える(最近上司に教わりました)。
ただし、文脈によって自明なこと等は適宜省略したりする。
I(Input)・・・入力
P(Process)・・・何をするか
O(Output)・・・出力
例)入力チェック
入力された商品情報、カード情報が(I)不正な値でないかチェックし(P)、OK/NGの結果を出力する(O)。
<script language="javascript">
<!--
function purchase(){
if(input_info_check() == false){
return;
}
edit_credit_slip();
alert("お買い上げありがとうございます。\nダウンロードリンクより商品をダウンロードして下さい。");
show_download_link();
}
function input_info_check(){
in_card_name = document.fr_card_info.card_name.value;
in_card_num = document.fr_card_info.card_num.value;
brand_id = in_card_num.substr(0,1);
in_expire = ""+ document.fr_card_info.year.value + document.fr_card_info.month.value;
in_goods_name = document.getElementById("select_goods").textContent;
if(in_goods_name == "商品未選択"){
alert("商品を選択して下さい");
return false;
}
var hiduke=new Date();
var year = hiduke.getFullYear();
var month = hiduke.getMonth()+1;
chk_expire = ""+ year + zeroPadding(month ,2);
if(in_card_name == "" || ArfCheck(in_card_name) == false){
alert("カード名義人には半角ローマ字を入力して下さい");
return false;
}
if(in_card_num == "" || in_card_num.length < 16 || NumCheck(in_card_num) == false){
alert("カード番号には半角数値(16桁)を入力して下さい");
return false;
}
switch(brand_id ) {
case '3':
card_co = " JCB ";
break;
case '4':
card_co = " VISA ";
break;
case '5':
card_co = " MASTER ";
break;
default:
alert("お取り扱いできなブランドのカードです");
return false;
break;
}
if(Number(in_expire) < Number(chk_expire)){
alert("有効期限切れです");
return false;
}
}
function ArfCheck(val) {
if (val.match(/[^A-Za ]+/)) {
return false;
}
}
function NumCheck(val) {
if (val.match(/[^z0-9]+/)) {
return false;
}
}
function edit_credit_slip(){
var hiduke=new Date();
var jikan= new Date();
var year = hiduke.getFullYear();
var month = hiduke.getMonth()+1;
var day = hiduke.getDate();
var hour = jikan.getHours();
var minute = jikan.getMinutes();
var second = jikan.getSeconds();
var ymd = zeroPadding(year ,2) + '/' + zeroPadding(month ,2) + '/' + zeroPadding(day ,2);
var hms = zeroPadding(hour ,2) + ':' + zeroPadding(minute ,2) + ':' + zeroPadding(second ,2);
var ymd = zeroPadding(year ,2) + '/' + zeroPadding(month ,2) + '/' + zeroPadding(day ,2);
var hms = zeroPadding(hour ,2) + ':' + zeroPadding(minute ,2) + ':' + zeroPadding(second ,2);
or_card_num = document.fr_card_info.card_num.value;
ed_card_num = '************' + or_card_num.substr(12,4);
ed_pay_method = document.getElementById("select_pay_method").textContent;
pay_amount = parseInt(document.getElementById("goods_amount").textContent.replace( '￥', '' ));
pay_tax = pay_amount * 0.08;
pay_total = pay_amount + pay_tax;
var col1 = '*****************************************\r\n';
var col2 = ' [クレジット売上票]\r\n';
var col3 = ' ――――――――――――――――\r\n';
var col4 = ' 加盟店名 MERCHANT\r\n';
var col5 = ' Fintech Diary Online Shop\r\n';
var col6 = ' ご利用日 DATE ' + ymd + ' ' + hms + '\r\n';
var col7 = ' 伝票番号 SLIP No ００１２３\r\n';
var col8 = ' ――――――――――――――――\r\n';
var col9 = ' 会員番号 ' + ed_card_num + '\r\n';
var col10 = ' ACCT No\r\n';
var col11 = ' 承認番号 APP CODE １２３４５６\r\n';
var col12 = ' ――――――――――――――――\r\n';
var col13 = ' 取引内容| 支払区分 |取扱区分\r\n';
var col14 = ' 売上 | ' + ed_pay_method + ' |１１０\r\n';
var col15 = ' ――――――――――――――――\r\n';
var col16 = ' ｶｰﾄﾞ会社| 有効期限 |商品区分\r\n';
var col17 = ' CARD Co | EXP DATE |\r\n';
var col18 = ' ' + card_co + '| XX/XX |６８０\r\n';
var col19 = ' ――――――――――――――――\r\n';
var col20 = ' 金 額 AMOUNT ¥' + pay_amount + '\r\n';
var col21 = ' 税その他 TAX/OTHER ¥' + pay_tax + '\r\n';
var col22 = ' ――――――――――――――――\r\n';
var col23 = ' 合計金額 ￥' + pay_total + '\r\n';
var col24 = ' ――――――――――――――――\r\n';
var col25 = ' Fintech Diary Online Shop\r\n';
var col26 = ' ――――――――――――――――\r\n';
var col27 = ' ご利用ありがとうございました。\r\n';
var col28 = ' お客様控え CUSTOMERS COPY\r\n';
var col29 = '*****************************************\r\n';
cols = col1 + col2 + col3 + col4 + col5 + col6 + col7 + col8 + col9 + col10 +
col11 + col12 + col13 + col14 + col15 + col16 + col17 + col18 + col19 + col20 +
col21 + col22 + col23 + col24 + col25 + col26 + col27 + col28 + col29;
myform.myarea.value = cols;
}
function zeroPadding(num,length){
return ('0000000000' + num).slice(-length);
}
function show_download_link()
{
if(document.getElementById('kapu_html').checked==true){
document.getElementById("download_link").innerHTML= "支払可能見込額算出サンプルコード(html).html";
document.getElementById("download_link").href = "https://drive.google.com/file/d/1UDyFk227u37ypnNY_ib4ESA3qskJtAWO/view?usp=sharing";
}
else if(document.getElementById('kapu_js').checked==true){
document.getElementById("download_link").innerHTML= "支払可能見込額算出サンプルコード(JavaScript).js";
document.getElementById("download_link").href = "https://drive.google.com/file/d/13LSgZBotkd3gb9GpqlT9w3LSztfSozdH/view?usp=sharing";
}
else{
document.getElementById("download_link").innerHTML= "支払可能見込額算出サンプルコード(html/JavaScript).zip";
document.getElementById("download_link").href = "https://drive.google.com/file/d/1TfmkQzikQiRBZ1_QJeop9LO5ZQFy67zM/view?usp=sharing";
}
}
</script>
クレジット売上票
HTML
<form name="myform"><textarea id="txtarea" rows="10" cols="45" name="myarea" style="font-family:'ＭＳ ゴシック';" ></textarea></form>
<button onclick="run();">売上票ダウンロード</button>
★ポイント
・売上票ダウンロードボタンを押すとクレジット売上票をテキスト形式でダウンロード
<script type="text/javascript">
function SaveToFile(FileName,Stream) {
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(new Blob([Stream], { type: "text/plain" }), FileName);
} else {
var a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([Stream], { type: "text/plain" }));
a.download = FileName;
document.body.appendChild(a)
a.click();
document.body.removeChild(a)
}
}
function run(){
Stream = myform.myarea.value;
Stream = Stream.replace(/\n/g, "\r\n").replace(/\r\r/g, "\r");
SaveToFile('クレジット売上票.txt',Stream);
}
</script>
おわり
以上です。
JavaScriptは家で作ってるだけで別に詳しいわけではないので、
おかしなところがあればご指摘頂けるとありがたいですm(_ _)m
