配列の内容をtextareaに書き出す
ここでは「占い」のようなものを作ることをイメージしています。
まず、2種類の占いの文言を作っておいて、配列に並べています。
ボタンを押すと、random関数で選ばれた文言が別々のtextareaに表示されるようにしました。
一つの作り方の例ですが、それぞれの配列の文言をrandom関数で呼び出すこともできますが、文章の整合性がとれないと具合が悪いので、ここでは、対になるようにして表示させています。
また、少し文言や体裁を変えれば面白いものになると思いますのでいろいろ考えてアレンジしてみてください。
表を作ってそこに文章を表示する
＊＊＊＊＊＊＊＊＊＊＊
CSS
表に関係するCSSは</head>の上部に書いていますが、特になくても良いものです。
table,td,th
{
width: 300 ;
border-width: 1px;
border-style: solid;
background-color: #c9ffd7;
text-align:center;
}
Javascript
//すべての「my＊＊」は、変数です
//10の配列を用意して
let myOne = new Array(10);
let myTwo = new Array(10);
myOne[0] ="今日の運勢は最高です";
myOne[1] ="今日一日は普通の一日になるでしょう";
myOne[2] ="今日はさえない一日？かもしれませんね";
myOne[3] ="最悪とは思わないで気合を入れていきましょう！";
myOne[4] ="頑張れば何でもできます！";
myOne[5] ="運に期待しないで努力しましょう！";
myOne[6] ="あと一歩。運気はいいですから";
myOne[7] ="今日はじっと我慢をしたほうがいいかも！";
myOne[8] ="充実した1日になります。さあ、頑張りましょう";
myOne[9] ="平凡な1日ですがこういう一日を大切にしましょう";
myTwo[0] ="いい一日になるでしょう。今落ち込んでいる方も、次第に調子がよくなります。";
myTwo[1] ="可もなく不可もなく、平凡な一日でしょう。リラックスできる1日です。";
myTwo[2] ="何をやっても満足感が得られないかもしれませんが、我慢して！";
myTwo[3] ="あなたはついていないと思うことがあっても、今日はまだマシなんですよ！";
myTwo[4] ="あなた次第です。やりたいことがあれば、頑張ってやってみましょう。";
myTwo[5] ="努力なしではあなたに幸運が回ってきません。運に期待はしないように。";
myTwo[6] ="重苦しい気分でいると、うまくいきませんよ！気持ちを切り替えて。";
myTwo[7] ="毎日良い日は続きません。落ち着いて、じっくり待つことも大事";
myTwo[8] ="今日の運勢は悪くありません。いい日だと信じて行動してください。";
myTwo[9] ="こういう日は貴重です。自分らしさのある1日を過ごしてください。";
//Math.randomで乱数をつくり整数化して表示させる計画。
function myUnn(){let myAns=Math.floor(10*Math.random());
//それぞれのtextareaに2つの配列の内容を書き出しています。
document.myUnsei.my1st.value=myOne[myAns];
document.myUnsei.my2nd.value=myTwo[myAns];
}
Math.random()を使って配列の答えを選び出す
今回は10個の文言なので、Math.floor(10*Math.random() のように、乱数を10倍して小数部分をfloorで切り捨てて0から9の数字を得ています。
ここではシンプルな表示ですが、字や表のの体裁をCSSで変えてやれば見やすくなり、それなりに見えるでしょう。
表示するのがテキストであれば、同じような方法が使えますし、同じ答えが出にくくするには、項目を増やせばいいですし、それも簡単にできるでしょう。
