ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【javascript】関数やMath,Numberを使った復習


関数を使って練習したコードを上げていきます。

引数に入力した半径を元に円の面積をpxで表す

f:id:p_and_a_fam:20170411232302p:plain:w200

/*-----css-----*/
#b{
  width:20px;
  height:20px;
  margin:0 auto;
  background:linear-gradient(-45deg,#f33,#33f);
  color:#fff;
  text-align:center;
}

/*-----javascript-----*/
var b  = document.getElementById('b');
function call(radius){
  pi = radius * radius * 3.14;
  b.style.width = (radius * 100) + 'px'
  b.style.height = (radius * 100) + 'px'
  b.style.borderRadius = (radius * 100) + 'px'
  b.style.lineHeight = (radius * 100) + 'px'
  b.style.fontSize = (radius * 30) + 'px'
  return pi;
}
b.innerHTML  += (Math.floor(call(3))) + 'px';

画像置換(サイコロの目)

var result = document.getElementById('result');
function dice(){
  var img = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
  var num = Math.floor(Math.random() * img.length);
  console.log(num);
  result.src = 'img/' + img[num];
  result.alt = (num + 1) + 'の目';
}