四捨五入/切り捨て/切り上げ

console.log(Math.round(4.7));    //四捨五入
console.log(Math.floor(3.9));    //切り捨て
console.log(Math.ceil(6.4));    //切り上げ
console.log(Math.trunc(5.5));    //数値の整数を返す

負の値の四捨五入/切り捨て/切り上げ

console.log(Math.round(-7.5));    //四捨五入
console.log(Math.floor(-3.9));    //切り捨て
console.log(Math.ceil(-6.4));    //切り上げ
console.log(Math.trunc(-5.5));    //数値の整数を返す

pタグに文字を挿入

<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
<p class="p4"></p>

document.querySelector('.p1').innerHTML = Math.round(-4.51);
document.querySelector('.p2').innerHTML = Math.floor(-3.78);
document.querySelector('.p3').innerHTML = Math.ceil(-6.21);
document.querySelector('.p4').innerHTML = Math.trunc(-2.22);

ランダムな数字

console.log(Math.random());   //ランダム
console.log(Math.floor(Math.random() * 100));  //ランダムな数字・切り捨て
console.log(10 + Math.floor(Math.random() * 10));  //10〜20までの数字

クリックするたびにグラデーションが変わる

カラー変更

<button class="button">カラー変更</button>
<div class="colorfr"></div>

.colorfr {
width:300px;
height:200px;
--start:hsl(0, 100%, 50%);
--end:hsl(322, 100%, 50%);
background-image:linear-gradient(-135deg, var(--start),var(--end));
}

const colorfr = document.querySelector('.colorfr');
document.querySelector('.button').addEventListener('click', onClickButton);
function onClickButton() {
  //0〜359の整数
  const randomHue = Math.trunc(Math.random() * 360);
  //グラデーションの開始と終了色
  const rcstart = `hsl(${randomHue}, 100%, 50%)`;
  const rcend = `hsl(${randomHue + 40}, 100%, 50%)`;
  colorfr.style.setProperty('--start', rcstart);
  colorfr.style.setProperty('--end', rcend);
}

※ IDとclassを取得してcssを操作する場合の呼び出し方

<p id="elema" class="elemb"></p>

var elema = Document.getElementById('elema');  //IDを取得 .いらない
var elema = document.querySelector('#elema');  //IDを取得 #いる
var elemb = Document.getElementsByClassName('elemb');  //classを取得 .いらない
var elemb = document.querySelector('.elemb');  //classを取得 .いる

elema.style.setProperty('color','#ffffff','');
elemb.style.setProperty('margin-top','20px','important');

[ELEMENT].style.setProperty('[ATTRIBUTE]','[PROPERTY]','[PRIORITY]');

数学

console.log(Math.abs(5));    //5
console.log(Math.abs(-8));   //8
console.log(Math.pow(2,4));   //2の4乗  16
console.log(Math.pow(-2,3));  //-2の3乗  -8
console.log(Math.sign(4));   //1
console.log(Math.sign(-2));   //-1
console.log(Math.sqrt(9));    //平方根 3
console.log(Math.sqrt(-64));   //NaN
console.log(Math.log(Math.E));  //自然対数を計算1