結果
...
ラッキーカラーは透明！
バーナム効果
誰にでも当てはまる一般的なことを
自分だけが当てはまると勘違いする心理現象です。
個人情報の取り扱いに注意！
占い等の入力情報を通じて
個人情報を抜き取る詐欺に気をつけてください。
--
当サイトではデータをサーバに送信していません。
出会いがあるかも 大金を失う可能性 忘れ物に注意！ 仕事のミスに注意！ 大チャンス到来！！ トラブルの予感 少し節約しよう 睡眠が足りないかも 賭け事をしてはいけない 危険がせまっています やばい事件が起きる 誰かにみられてるかも 自信が持てず弱気に… おいしいものを食べよう 占いを信じてはいけない スピリチュアルに注意！ おでかけしよう 深呼吸して落ち着こう
view source
JavaScript
document.title = '星座占い';
var signAry = [
"おひつじ座",
"おうし座",
"ふたご座",
"かに座",
"しし座",
"おとめ座",
"てんびん座",
"さそり座",
"いて座",
"やぎ座",
"みずがめ座",
"うお座"
];
var colors = ["赤","青","黄","緑","白","黒"];
var mAry = [...Array(12)].map((_, i) => i+1);
var dAry = [...Array(31)].map((_, i) => i+1);
var getSign = function(m,d){
switch(m) {
case 4: i = d <= 20 ? 0 : 1; break;
case 5: i = d <= 21 ? 1 : 2; break;
case 6: i = d <= 21 ? 2 : 3; break;
case 7: i = d <= 22 ? 3 : 4; break;
case 8: i = d <= 22 ? 4 : 5; break;
case 9: i = d <= 22 ? 5 : 6; break;
case 10: i = d <= 23 ? 6 : 7; break;
case 11: i = d <= 22 ? 7 : 8; break;
case 12: i = d <= 22 ? 8 : 9; break;
case 1: i = d <= 20 ? 9 : 10; break;
case 2: i = d <= 19 ? 10 : 11; break;
case 3: i = d <= 20 ? 11 : 0; break;
}
return signAry[i];
}
$(function(){
$('pre').hide();
$('#result').hide();
texts = $('#texts').text().split("\n");
r = Math.floor(Math.random()*(texts.length-1));
text = texts[r];
cr = Math.floor(Math.random()*colors.length);
color = colors[cr];
console.log(text);
var date = new Date();
var mm = date.getMonth()+1;
var dd = date.getDate();
mAry.forEach(function(v){
var op = $('<option>').text(v);
$('#month').append(op);
});
dAry.forEach(function(v){
var op = $('<option>').text(v);
$('#day').append(op)
});
$('#month').val(mm);
$('#day').val(dd);
$('form').on('submit', function(){
$('form').hide();
$('#result').show();
m = Number($('#month').val());
d = Number($('#day').val());
s = getSign(m,d);
$('#sign').text(s);
$('#text').text(text);
$('#color').text(color);
return false;
});
});
CSS
html,body{
overflow:hidden;
}
#demo{
text-align:center;
display: flex;
justify-content: center;
background-image:url(uranai.png);
background-size:cover;
background-position:50%;
}
h2{
font-size:32px;
color:#ff0000;
padding-top:20px;
padding-bottom:10px;
}
button{
display:inline-block;
border-radius:20px;
margin:40px;
}
select,button{
font-size:64px;
}
form,#result{
width:460px;
height:580px;
margin:40px auto;
padding:10px;
border-radius:20px;
background-color:rgba(0,0,0,0.8);
color:#ffffff;
}
#sign{
font-size:80px;
}
form img{
width:80px;
animation:3s linear infinite rotation;
}
@keyframes rotation{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-uranai/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。