このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

JavaScript ランダム関数 Math.random() まとめ + css3

JavaScript

2012.04.20

この記事は最終更新日から1年以上が経過しています。

前回書いた、

ActionScript ランダム関数 Math.random() まとめ

をそっくりそのまま、JavaScriptにしてまとめてみました。

TweenerのアニメーションはCSS3で実装しておりますので、webkit系ブラウザ(safari,GoogleChome)等での確認して頂ければ幸いです。

前回の記事「ActionScript ランダム関数 Math.random() まとめ」を比べながら見て頂ければと。

 

「Math.random」は、0 以上 1 未満の浮動小数で結果を返します。

では、調べましょう。

ランダム関数「Math.random」はActionScriptとJavaScriptでは同じ使い方となります。

JavaScriptを記述する前にHTML,CSSの用意をしましょう。

HTML

<div class="randomArea">
  <h5>乱数表示</h5>
  <p class="txt" id="randomTxt001"></p>
  <p class="startBtn" id="startBtn001"><a href="#">start</a></p>
</div>

基本はこの形でいきます。

CSS

.randomArea:after{content:'';display:block;clear:both;height:0;visibility:hidden;}
.randomArea h5{
margin-top:10px;
font-weight:normal;
font-size:24px;
}
.randomArea h6{
margin-top:6px;
font-weight:normal;
font-size:20px;
}
.randomArea .txt{
margin-top:10px;
height:36px;
border-bottom:#ccc 1px solid;
font-size:32px;
color:#016699;
}
.randomArea .unseiTxt{
float:left;
margin-top:8px;
font-size:32px;
color:#f00;
}
.randomArea .ball{
background:#f00;
width:50px;
height:50px;
border-radius:25px;
-webkit-border-radius:25px;
margin-top:10px;
}
.randomArea .startBtn{
float:right;
margin-top:20px;
}
.randomArea .startBtn a{
padding:5px 25px;
background:#000000;
color:#ffffff;
text-decoration:none;
}
.randomArea .startBtn a:active{
background:#f00;
}

h5、h6は記事に影響いかないように設定しております。

.ballに関しては、CSS3で円形にしております。

ではJavaScriptの用意。

まず、idを取得するための記述を。

JavaScript id取得

function $(e){ return document.getElementById(e);} 

このように記述すると、$(“startBtn001”)のようにjQueryでidを取得するような形で取得が出来ます。

 

JavaScript ボタンイベント

$("startBtn001").firstChild.onclick = random001;

それぞれのボタンがクリックされた時にイベントを実行します。

今回、001〜008の連番を付けております。

Math.random

JavaScript random001()

function random001(){
  ransu = Math.random();
  $('randomTxt001').innerHTML = ransu;
  return false;
}

まずは、乱数を発生させます。

乱数表示

start

Math.random Math.floor

このままではとても使うには不便なので、使えるように数字を一桁にしましょう。

その為には、まず生成した乱数に10を掛けます。

function random002(){
  ransu = Math.random()*10;
  $('randomTxt002').innerHTML = ransu;
  return false;
}
乱数表示

start

10掛けた乱数をMath.floorで整数にします。

これで0~9の整数をランダムに生成することが出来ます。

function random003(){
  ransu = Math.floor(Math.random()*10);
  $('randomTxt003').innerHTML = ransu;
  return false;
}
乱数表示

start

おみくじ

前回同様、おみくじを作ります。

0〜3の場合、「凶」、4、5の場合「中吉」、6〜9の場合「大吉」にします。

HTML

<div class="randomArea">
  <h5>乱数表示</h5>
  <p class="txt" id="randomTxt004"></p>
  <h6>今日の運勢</h5>
  <p class="unseiTxt" id="uranaiTxt"></p>
  <p class="startBtn" id="startBtn004"><a href="#">start</a></p>
</div>

HTMLを少し付け加えます。あとはActionScriptとほぼ同じです。

function random004(){
  ransu = Math.floor(Math.random()*10);
  $('randomTxt004').innerHTML = ransu; 
  var uranaiTxt = $('uranaiTxt');

  if(ransu<=3){
   uranaiTxt.innerHTML = "凶";
  }else if(ransu>3 && ransu<6){
   uranaiTxt.innerHTML = "中吉";
  }else if(ransu>=6){
   uranaiTxt.innerHTML = "大吉";
  }
  return false;
}
乱数表示

今日の運勢

start

ボール移動

前回同様、今度はボールオブジェクトをランダムに移動させましょう。

Startボタンを押すとランダムにX座標を移動します。

HTML

<div class="randomArea">
  <h5>X座標</h5>
  <p class="txt" id="randomTxt005"></p>
  <p class="ball" id="ball005"></p>
  <p class="startBtn" id="startBtn005"><a href="#">start</a></p>
</div>

JavaScript

function random005(){
  ransu = Math.random()*10;
  ransu = Math.floor(ransu)/2*100;
  $('randomTxt005').innerHTML = ransu;
  $('ball005').style.marginLeft = ransu +"px";
  return false;
}
X座標

start

$(‘ball005’).style.marginLeft = ransu +”px”;で、マージンレフトの値を変えています。

そのままだと瞬間移動しているので、CSS3のtranslateを使いアニメーションさせます。

JavaScript

$("ball006").style.webkitTransform = "translate(0px,0px)";
$("ball006").style.webkitTransitionProperty = "-webkit-transform";
$("ball006").style.webkitTransitionDuration = "0.4s";
$("ball006").style.webkitTransitionTimingFunction = "ease-in-out";

このようにJavaScriptで設定。マージンレフトの設定部分を

$("ball006").style.webkitTransform = "translate(" +ransu+ "px,0px)";

に変更します。

function random006(){
  ransu = Math.random()*10;
  ransu = Math.floor(ransu)/2*100;
  $('randomTxt006').innerHTML = ransu;
  $("ball006").style.webkitTransform = "translate(" +ransu+ "px,0px)";
  return false;
}
X座標

start

ランダムに色を変化

前回同様、色を変化させます。

JavaScriptでの色の変化は0xFFFFFFtoString(16)を使い、16進数の数字に変更し、値を代入することによって対象の色を変更させることができます。

Math.floor(Math.random() * 0xFFFFFF).toString(16);

16進数にするまえに整数にする必要があります。

これらを踏まえ、ボールの色を変化させましょう。

JavaScript

function random007(){
  newColor = Math.floor(Math.random() * 0xFFFFFF).toString(16);
  $('randomTxt007').innerHTML = newColor;
  $("ball007").style.backgroundColor = "#" + newColor;
  return false;
}
新しい色

start

 

では、最後に色の変化と共にX座標のボール移動も行います。

random006とrandom007を合体させた形となります。

function random008(){
  ransu = Math.random()*10;
  ransu = Math.floor(ransu)/2*100;
  newColor = Math.floor(Math.random() * 0xFFFFFF).toString(16);
  $('randomTxt008').innerHTML = newColor;
  $("ball008").style.backgroundColor = "#" + newColor;
  $("ball008").style.webkitTransform = "translate(" +ransu+ "px,0px)";
  return false;
}
新しい色

start

以上になりますー。

 

 

 

Comment

Related Article

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

CATEGORY LIST

LATEST NEWS

Go言語開発者、Unity開発者必見!! 【Golang】「クソコードをシンプルにする」,【Unity】「Singletonを使わないUnityを用いたApplication開発」

イベント

2021.05.23

TypeScriptでStateMachine

AI・Bot・algorithm

2021.05.16

iPad Air で、Web開発環境構築(iSH Alpine使用)

mac

2021.04.11

【Qt】Mac開発 ソートダイアログ (拡張するダイアログ)を作成

C++

2021.04.01

M1 (Appleシリコン)Macで Widowsアプリを起動

mac

2021.03.27

M1(Appleシリコン)Macで、ファミコンソフトプログラミング。 サクッと開発環境準備編

Game

2021.03.21

iPad Air 2020を購入しちゃった件。

mac

2021.03.14

眠っているラズベリーパイをネットワークオーディオ化 Volumio2 インストール手順

RaspberryPi

2021.03.12

ラズベリーパイ 5インチDSIタッチスクリーン ディスプレイを使う。

RaspberryPi

2021.01.11

今年読んで良かった書籍は、「Go言語でつくるインタプリタ」でした。

イベント

2020.12.31

【Qt】Macの、Qt Creatorで Dialog GUI作成

C++

2020.12.29

【Qt】Macで、Qt Creatorをbrew installしてサクッと起動する。

C++

2020.12.14

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US